HTML/CSS | Sử dụng hình ảnh tối ưu

Học HTML, CSS từ Zero Tới Hero

• Sử dụng ảnh phù hợp kích thước hiển thị
• Tối ưu dung lượng ảnh cho trang web
• Tránh sử dụng hình ảnh từ URL ngoài trang

Sử dụng ảnh phù hợp kích thước hiển thị

Quan sát ví dụ dưới đây:

Hình ảnh hiển thị ở kích thước 200 x 112 trong khi kích thước gốc là 960 x 538.

Khi hình ảnh có kích thước lớn được hiển thị với kích thước nhỏ (dùng width, height hoặc CSS) thì trình duyệt vẫn sẽ phải tải toàn bộ ảnh có kích thước lớn. Điều này làm cho chậm trang web một cách không cần thiết và lãng phí băng thông.

Hãy xem xét ví dụ dưới đây:

Bạn có nhận ra sự khác biệt giữa chúng mà không cần phóng to không? Điều này gần như là không thể. Ảnh gốc là 59KB, trong khi ảnh đã thay đổi kích thước chỉ còn 22KB. Có nghĩa là đã tiết kiệm được 37KB, tương đương 37%. Trang web có thể tải nhanh hơn nếu kích thước các tệp trên trang được tối ưu hơn.

Nên để kích thước hình ảnh gốc x 2 lần kích thước hiển thị của nó. Ví dụ ảnh hiển thị ở 200 x 112 thì kích thước gốc nên là 400 x 224. Điều này giúp hình ảnh hiển thị tốt trên cả màn hình Retina.

Tối ưu dung lượng ảnh cho trang web

Khi đã tối ưu về kích thước ảnh, nếu sử dụng định dạng PNG bạn vẫn có thể tiếp tục sử dụng tinypng.com để tối ưu dung lượng hình ảnh.

Sử dụng công cụ sau: https://tinypng.com

Trang web này không thay đổi kích thước hình ảnh, nó chỉ tối ưu về dung lượng hình ảnh.

Cá nhân mình đã sử dụng trang web này trong khoảng 7-8 năm trở lại đây. Mỗi khi mình nhận được ảnh thiết kế từ designer dưới dạng PNG là sử dụng trang này. Mỗi lần tối ưu giảm được từ 50% - 75% dung lượng hình ảnh mà vẫn đảm bảo về mặt hiển thị.

Tránh sử dụng hình ảnh từ URL ngoài trang

Không nên sử dụng các tệp tài nguyên (hình ảnh, video, v.v) từ URL của các trang không tin tưởng. Khi trang web đó ngừng hoạt động hoặc tài nguyên bị xóa thì có thể làm ảnh hưởng tới trang của bạn.

Dưới đây là ví dụ hình ảnh bị lỗi (sau một thời gian) vì dùng URL từ một trang web bên ngoài:

Hình ảnh bị lỗi:

<img src="https://dantri.com.vn/thumb_w/680/2021/08/27/2022-08-27124707-1661579238875.png" alt="Rau cải xanh" />

Có thể sau một thời gian thì trang web ngừng hoạt động, tài nguyên bị xóa, v.v sẽ làm ảnh hưởng tới trang web của bạn.

Tóm tắt

• Khi hình ảnh có kích thước lớn được hiển thị với kích thước nhỏ thì trình duyệt vẫn sẽ phải tải toàn bộ ảnh có kích thước lớn. Điều này làm cho chậm trang web một cách không cần thiết và lãng phí băng thông.
• Nên để kích thước hình ảnh gốc x 2 lần kích thước hiển thị của nó. Điều này giúp hình ảnh hiển thị tốt trên cả màn hình Retina.
• Khi đã tối ưu về kích thước ảnh, nếu sử dụng định dạng PNG bạn vẫn có thể tiếp tục sử dụng tinypng.com để tối ưu dung lượng hình ảnh.
• Không nên sử dụng các tệp tài nguyên từ URL của các trang không tin tưởng. Khi trang web đó ngừng hoạt động hoặc tài nguyên bị xóa thì có thể làm ảnh hưởng tới trang của bạn.