Progressive JPEG nâng cao trải nghiệm người dùng khi lướt web

429

17-06-2017

Progressive JPEG nâng cao trải nghiệm người dùng khi lướt web

Đối với các trang web nhiều hình ảnh, hoặc dùng ảnh kích thước lớn, thời gian và cách thức tải ảnh có tác động lớn đến trải nghiệm của người dùng. Định dạng progressive JPEG là giải pháp tối ưu để cải thiện trải nghiệm của độc giả khi xem trang web. Hãy cùng Bizfly Cloud tìm hiểu qua bài viết sau đây.

Trước đây, các trang web thường sử dụng baseline JPEG để hiển thị hình ảnh. Theo đó, trình duyệt sẽ tải ảnh theo chiều dọc từ trên xuống dưới. Đặc biệt khi tải các ảnh kích thước lớn hoặc trong thời điểm mạng chậm, bạn sẽ thấy những hình ảnh bị cắt khúc hoặc mất phía dưới.

Ảnh minh họa bên dưới, mô tả cách hoạt động của baseline jpeg:

Progressive JPEG là một dạng nén khác của JPEG và chia ảnh thành nhiều bản quét khác nhau. Bản đầu tiên của hình ảnh sẽ có độ phân giải rất thấp và tốn rất ít dung lượng. Những bản quét tiếp theo sẽ tăng dần chất lượng, người xem sẽ nhìn thấy ảnh dần hiện từ mờ sang rõ nét.

Lợi thế của progressive JPEG là người dùng sẽ thấy được sơ bộ hình ảnh ngay lúc ảnh đang được truyền đi, và chất lượng ảnh sẽ tăng dần theo thời gian. Đối với người dùng, progressive JPEG làm tăng cảm nhận tốc độ trang web so với baseline, theo đó, họ có thể nắm được nội dung của ảnh mà không phải chờ load hết.

Hãy cùng xem video so sánh hoạt động của progressive JPEG và baseline JPEG:

https://youtu.be/yHJl3oaD19Q

Chuyển đổi định dạng ảnh sang progressive JPEG

Phương pháp thủ công

Các bạn có thể thử những cách sau để tự chuyển ảnh sang định dạng progressive JPEG:

sử dụng lệnh jpegtran:

$ jpegtran -copy none -progressive source.jpg result.jpg

sử dụng tool ImageMagick:

$ convert -strip -interlace Plane source.jpg result.jpg

Sử dụng VCCloud CDN

Khi sử dụng VCCloud CDN, hình ảnh của trang web của bạn sẽ được tự động tối ưu và chuyển đổi sang progressive JPEG, giúp ảnh tải nhanh hơn so với server gốc và người dùng sẽ cảm nhận tốc độ nhanh hơn bình thường.

Demo: