Giảm tải hình ảnh với plugin Hammy [NEW]

Trong phần giới thiệu 8 plugin hỗ trợ tăng tốc website, mình đã giới thiệu plugin Hammy rất tốt để sử dụng nếu bạn sử dụng nhiều hình ảnh trên trang web. Nhưng một số bạn phản hồi là do không biết cách thiết lập plugin này nên gây ra lỗi, vì vậy trong bài viết này mình sẽ giải thích công dụng của plugin này và hướng dẫn cấu hình.

Công dụng của Hammy

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

Plugin Hammy ra đời để khắc phục nhược điểm này, công dụng của nó là tự động 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ự động tạo cache (có hạn) của ảnh. hình ảnh với kích thước thích hợp.

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

Trong ngắn hạn, nó sẽ Tạo kích thước hình ảnh nhỏ của riêng bạn (và tự xóa sau một thời gian nhất định) để vừa với màn hình và chiều rộng nội dung. Khi xem nội dung trên thiết bị di động, nó sẽ hiển thị hình ảnh nhỏ và sẽ chỉ hiển thị hình ảnh lớn nếu bạn xem trên máy tính để bàn.

Hướng dẫn Hammy

Sau khi cài đặt plugin Hammy, hãy truy cập Cài đặt -> Hammy để thiết lập nó. Chỉ có hai cài đặt quan trọng, nhưng hãy thiết lập chúng cho phù hợp.

Giảm tải hình ảnh với plugin Hammy [NEW]

Ngay ở phần 1, là nơi bạn vào phần lựa chọn vùng hiển thị nội dung trên website. Sử dụng Google Chrome nhấp chuột phải vào nội dung bài viết và chọn Kiểm tra phần tử, sau đó phát hiện nội dung nào nằm trong phần lựa chọn.

hammy-Inspector-selector

Tìm lựa chọn của phần nội dung

Nếu đó là một lớp học thì hãy nhập .single-contentnếu nó là ID thì hãy nhập #single-content.

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

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

Sau khi thiết lập xong, hãy lưu lại và vào trang web để xem kết quả.

hammy làm việc

Như các bạn thấy bây giờ ảnh đã được chuyển sang liên kết khác và ảnh sẽ nằm trong bộ nhớ đệm, độ rộng của ảnh cũng được giảm xuống do chúng ta đặt ở breakpoint, thời gian tải trang cũng nhanh và nhẹ hơn đúng không?

Đánh giá nội dung này