Hammy - Plugin giúp giảm tải hình ảnh cho Wordpress

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,688
Hammy - Plugin giúp giảm tải hình ảnh cho Wordpress

Nếu website có những tấm ảnh rất to với dung lượng khá nặng thì dù tải bức ảnh đó trên di động hay máy tính đều với dung lượng như nhau. Vậy thì hãy tưởng tượng, khách truy cập đang dùng 3G và truy cập vào website thì chi phí để họ tải hình ảnh trên trang là bao nhiêu? Đó là chưa kể đến các tấm ảnh quá lớn so với độ rộng của khung trang website sẽ trở nên thừa thải và làm website tải lâu hơn.

Plugin Hammy sinh ra là để khắc phục nhược điểm này, công dụng của nó là sẽ tự tính toán độ rộng của trang nội dung của màn hình hiện tại, sau đó nó sẽ tự tạo ra một bản cache (có thời hạn) của bức ảnh đó với kích thước phù hợp.

Ví dụ ảnh gốc là 1280x768px nhưng chiều rộng của khung nội dung trên website lại thấp hơn chiều rộng của bức ảnh thì nó sẽ tự tạo ra một bản cache của ảnh với breakpoint gần nhất so với chiều rộng của nội dung, và dung lượng cũng như kích thước tấm ảnh đó sẽ nhẹ hơn ảnh gốc.

Nói tóm lại, nó sẽ tự tạo ra các size ảnh nhỏ (và tự xóa đi sau 1 thời gian nhất định) để hiển thị phù hợp với màn hình và chiều rộng nội dung. Khi xem nội dung trên di động nó sẽ hiển thị ảnh nhỏ và sẽ chỉ hiển thị ảnh to nếu xem trên desktop.

Hướng dẫn Hammy
Sau khi cài xong plugin Hammy, hãy vào Settings -> Hammy để thiết lập cho nó. Chỉ có mỗi 2 thiết lập quan trọng thôi nhưng hãy thiết lập cho phù hợp nhé.

hammy-options.jpg

Ngay phần số 1, là nơi nhập vùng chọn của khu vực hiển thị nội dung trên website. Hãy sử dụng Google Chrome ấn chuột phải vào nội dung bài viết rồi chọn Inspect Element, sau đó dò tìm xem nội dung nằm trong vùng chọn nào.

hammy-inspect-selector.jpg

Nếu nó là class thì nhập là .single-content, nếu nó là ID thì nhập là #single-content.

Phần số 2 là phần khai báo breakpoint, có thể hiểu breakpoint là chiều rộng tối đa mà ảnh sẽ được tạo ra cho mỗi loại màn hình. Ví dụ nếu nhập là 320 nghĩa là nó sẽ tạo ra một tấm ảnh với chiều rộng là 320 để hiển thị ở màn hình có chiều rộng từ 320px trở xuống. Tốt nhất nên thêm 3 breakpoint là 320, 568, 768 và có thể thêm 1024 nếu thích.

Phần số 3 nghĩa là các vùng chọn mà nó sẽ không tạo ảnh cache ra, trong thời gian sử dụng nếu thấy bố cục bị vỡ thì xem ảnh đó nằm phần nào rồi thêm vùng chọn vào. Tính năng này chỉ khuyến khích áp dụng cho nội dung bài viết.

Sau khi thiết lập xong thì hãy Save lại và ra website xem kết quả.

hammy-worked.jpg

Bây giờ hình ảnh đã được chuyển sang một link khác và ảnh đó sẽ nằm trong cache, chiều rộng của ảnh cũng được thu lại như đã thiết lập trong breakpoint, thời gian tải trang cũng nhanh hơn và nhẹ hơn.

Chúc các bạn thành công.


Nguồn: Thachpham​
 

Đính kèm

  • hammy.1.5.1.zip
    2.4 MB · Lượt xem: 2

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom