Làm thế nào để sử dụng Progressive JPEG trong WordPress?

Progressive JPEG là gì? Sử dụng Progressive JPEG để tăng tốc độ load blog/ website như thế nào?

Hình ảnh là một trong những thành phần chiếm tỉ trọng cao nhất trong tổng dung lượng của một trang trên blog/ website (page-size). Nếu blog/ website của bạn sử dụng nhiều hình ảnh và chúng không được tối ưu tốt thì tốc độ load web sẽ bị ảnh hưởng rất nhiều. Thông thường, hình ảnh được sử dụng trên web bao gồm 3 định dạng chính: JPG/JPEG, PNG và GIF. Trong đó, JPG/JPEG có dung lượng nhẹ nhất và load nhanh nhất (nếu không so với WebP). Nhưng bạn có biết JPEG cũng có 2 loại khác nhau: progressive JPEG và baseline JPEG. Progressive JPEG tân tiến hơn và có nhiều ưu điểm hơn khi đem so với người anh em của mình.

Tham khảo thêm:

• Sử dụng định dạng WebP cho hình ảnh trong WordPress
• ShortPixel – Plugin nén ảnh giá rẻ tốt nhất dành cho WordPress

Progressive JPEG là gì?

Thông thường, ảnh JPEG sẽ tải từ trên xuống và chúng được gọi là baseline JPEG. Progressive JPEG khác với baseline JPEG. Nó hiển thị toàn bộ hình ảnh trong khi chỉ tải trước một phần của dữ liệu. Nghĩa là hình ảnh có thể bị vỡ hình (nhòe) trước khi việc tải hoàn tất. Để hiểu rõ hơn, các bạn có thể xem ví dụ bên dưới.

• Cách tải của baseline JPEG:

• Cách tải của progressive JPEG:

Tại sao sử dụng progressive JPEG giúp web load nhanh hơn?

Tùy thuộc vào kích thước tập tin, progressive JPEG thể được tối ưu hóa tốt hơn, dẫn đến kích thước đầu ra của nó nhỏ hơn và sẽ tải nhanh hơn. Các trình duyệt web hiện đại có thể hiển thị hình ảnh JPEG nhanh hơn nếu chúng được tạo ra bằng cách sử dụng phương pháp “progressive”.

Trình duyệt Safari và Internet Explorer 8 không tương thích với sự nén thuận lợi (advantageous compression) và hiển thị ảnh JPEG ở tốc độ bình thường (có nghĩa là không cải thiện hiệu suất). Trong trường hợp này, sử dụng progressive JPEG sẽ giúp hiển thị hình ảnh nhanh hơn cho người đọc, khi hình ảnh thay đổi từ dạng thô (vỡ, nhòe) đến chất lượng cao.

Sử dụng progressive JPEG trong WordPress

Nếu tôi không nhầm thì Optimus – WordPress Image Optimizer là plugin duy nhất tính đến thời điểm này có khả năng tạo đồng thời cả progressive JPEG lẫn WebP. Đó là lý do tại sao tôi quyết định chuyển từ ShortPixel sang Optimus.

Optimus cũng sử dụng server riêng (được đặt tại Đức) để nén ảnh thay vì sử dụng tài nguyên của host, giúp giảm tải rất nhiều cho CPU và RAM so với các plugin nén local (ngay trên host).

Mặc dù Optimus có sẵn phiên bản miễn phí, tuy nhiên, bạn chỉ có thể nén những ảnh có kích thước nhỏ hơn 100KB và không hỗ trợ định dạng WebP. Đây là một hạn chế rất lớn. Do đó, nếu có điều kiện, bạn nên mua phiên bản HQ hoặc HQ Pro của plugin này.

Cách sử dụng plugin Optimus cũng rất đơn giản. Các bạn chỉ cần cài đặt và kích hoạt nó. Sau đó, truy cập vào Settings => Optimus và tiến hành một vài thiết lập cơ bản.

Trong đó:

• No optimization of original images: tích vào mục này nếu bạn không muốn nén ảnh gốc, chỉ nén ảnh thumbnail.
• No deletion of image metadata: tích vào mục này nếu bạn muốn giữ lại các thông số kỹ thuật của hình ảnh. Chỉ áp dụng với bản trả phí.
• Creation of WebP files: tích vào mục này nếu bạn muốn tạo định dạng ảnh WebP. Chỉ áp dụng với bản trả phí.
• Transfer images using TLS encryption: tích vào mục này nếu bạn muốn sử dụng giao thức HTTPS (bảo mật) trong quá trình upload ảnh từ host của bạn sang server tại Đức và ngược lại. Chỉ áp dụng với bản trả phí.
• No optimization of images during the upload process: tích vào mục này nếu bạn không muốn tự động nén ảnh khi chúng được upload. Thay vào đó, bạn sẽ nén thủ công vào lúc bạn cho là thích hợp. Nó giúp quá trình upload ảnh nhanh hơn (do không phải mất thời gian chờ để nén).

Tiếp đến, truy cập Tools => Optimize all images => Click vào nút Optimize all images để nén toàn bộ hình ảnh mà bạn đã upload trước đó (và chưa từng được nén). Đơn giản vậy thôi!

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)