メインコンテンツまでスキップ

Hình ảnh trên website

Tổng quan​

Dữ liệu trên website thường có 2 loại chính là văn bản và hình ảnh. Văn bản mang thông điệp và chứa nhiều thông tin và kiến thức. Nhưng để tạo nên ấn tượng cho website thì phải là hình ảnh.

Hình ảnh đóng một vai trò quan trọng và không thể thiếu đối với website. Sử dụng hình ảnh hợp lý trên website sẽ làm website trở lên đẹp mắt, ấn tượng, hấp dẫn khách hàng hơn.

Các loại định dạng hình ảnh​

GIF​

  • GIF là viết tắt của Graphics Interchange Format
  • Giới hạn trong bảng màu 8 bit, có tối đa 256 màu
  • Sử dụng thuật nén lossless, không làm giảm chất lượng hình ảnh
  • Hỗ trợ hình ảnh động, hình ảnh có nền trong suốt
  • Phù hợp sử dụng cho: icon, hình động, hình ảnh đơn sắc

JPG và JPEG​

  • JPEG, hay còn gọi là JPG, là viết tắt của Joint Photographic Experts Group
  • Hình ảnh nhiều màu (16 triệu màu)
  • Áp dụng tính năng nén mất dữ liệu cho hình ảnh, điều này có thể làm giảm đáng kể kích thước tập tin
  • Phù hợp sử dụng cho các hình ảnh có màu sắc sống động, kích thước lớn

PNG​

  • PNG là viết tắt của Portable Network Graphics
  • Hổ trợ nền trong suốt tốt hơn GIF
  • Nén theo chuẩn lossless, hình ảnh sau khi nén vẫn giữ được chất lượng
  • Thường sử dụng tốt nhất cho hình ảnh logo, hình ảnh có nền trong suốt hoặc bán trong suốt, ảnh cần chỉnh sửa nhiều lần

SVG​

  • SVG viết tắt của Scalable Vector Graphics
  • Ảnh dạng vector, có thể scale mà không ảnh hưởng tới chất lượng hình ảnh
  • Phù hợp sử dụng cho: icon, logo, hình ảnh cần hiển thị trên nhiều thiết bị khác nhau (Smartphone, Rentina)

Webp​

  • Định dạng file được tạo ra bởi Google vào năm 2010, nhằm giảm kích thước hình ảnh mà không giảm chất lượng của nó
  • Giảm kích thước file hình ảnh (khoảng 20-50%) so với các loại file khác
  • Tổng hợp các thế mạnh của các loại hình ảnh khác:
    • Ảnh động của GIF
    • Ảnh trong suốt của PNG, GIF
    • Tính năng nén của JPG
  • Chưa được hỗ trợ rộng rãi, chỉ phù hợp sử dụng trên môi trường web
  • Tạo và chỉnh sửa file webp bằng photoshop bằng plugin WebPShop

Trích xuất hình ảnh từ file design​

Photoshop​

Illustrator​

XD​

Figma​

ghi chú

Nếu gặp khó khăn trong việc trích xuất hình ảnh từ các file design, hãy nhờ trợ giúp từ Mentor của bạn.

Các thẻ HTML chứa hình ảnh​

Img​

  • Thẻ img được sử dụng để nhúng hình ảnh vào trang web.
  • Thẻ img có hai thuộc tính bắt buộc:
    • src: chỉ định đường dẫn đến hình ảnh
    • alt: chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị được


    <img src="url-img.jpg" alt="Content of the Image">

Figure​

  • Thẻ figure chỉ định nội dung độc lập, như hình ảnh, sơ đồ...

  • Phần tử figcaption được sử dụng để thêm chú thích cho phần tử figure.

    <figure>
      <img src="url-img.jpg" alt="Content of the Image">
      <figcaption>This is caption of the image</figcaption>
    </figure>

Picture​

  • Thẻ picture giúp các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh.
  • Phần tử picture chứa 2 thẻ:
    • Một hoặc nhiều thẻ source
    • Một thẻ img.


    <picture>
        <source media="(max-width: 1024px)" srcset="url-img-tbl.img">
        <source media="(max-width: 767px)" srcset="url-img-sp.img">  
        <img src="url-img.jpg" alt="#">
    </picture>

Hỗ trợ màn hình Retina, 2K​

Màn hình Rentina thực chất vẫn là màn hình IPS LCD, có điều mật độ điểm ảnh khá cao so với các loại màn hình khác, được đăng ký độc quyền bởi Apple và chỉ xuất hiện trên các sản phẩm nhà Táo như iPad, iPhone, Macbook...

Dưới đây là một số phương pháp để hình ảnh có thể hỗ trợ màn hình Rentina, 2K:

Dùng file hình ảnh SVG​

SVG là hình ảnh dạng vector nên nó vẫn giữ được chất lượng hình ảnh trên các loại màn hình Rentina, 2K...

ghi chú

Nếu hình ảnh gốc là định dạng base64 thì không nên xuất file dưới dạng SVG

Dùng Icon Fonts​

Icon Fonts là những font chữ được thiết kế đặc biệt để thay thế cho các hình ảnh được dùng trong việc phát triển website, ví dụ như FontAwesome, Ionicons...

Ưu điểm của Icon Fonts​

  • Thay đổi màu sắc, kích thước dễ dàng
  • Dung lượng file nhỏ gọn
  • Hỗ trợ trên nhiều trình duyệt và thiết bị

Dùng hình 2x​

Hình 2x là hình ảnh có kích thước gấp 2 lần so với kích thước hình ảnh sẽ hiển thị.
Ví dụ: nếu hình ảnh của bạn rộng 800px và cao 300px thì hình 2x sẽ rộng 1600px và cao 600px.

Quy tắc là luôn dùng hình 2x cho phát triển website dành cho SP (Smartphone, Tablet), trên môi trường PC (Desktop) thường có các cách dùng phổ biến sau:

Dùng hình x2 cho tất cả các màn hình PC​

Cách này khá tiện lợi và đơn giản nhưng không được tối ưu cho tốc độ tải trang.

<img src="image_2x.jpg" alt="Image description">

Chỉ dùng hình x2 cho màn hình Rentina, 2K​

Cách này tối ưu cho tốc độ tải trang nhưng cần tốn thời gian hơn cho việc cắt hình và có kiến thức về coding.
Cả HTML và CSS đều có hỗ trợ xử lý vấn đề này:

  • Dùng thuộc tính srcset của thẻ img trong HTML

    <img srcset="image@2x.jpg 2x" src="image@1x.jpg" alt="Image description">
     <!-- Lưu ý: IE và Opera Mini không hỗ trợ srcset -->

    👉 Xem thêm về thuộc tính srcset

  • Dùng thuộc tính image-set trong CSS.

    background-image: image-set(    
      url(/images/image-lg@1x.jpg) 1x, url(/images/image-lg@2x.jpg) 2x);

  • Dùng thẻ picture

    <picture>
      <source media="(min-width: 1025px)" srcset="large-image@1x.jpg 1x, large-image@2x.jpg 2x">
      <source media="(min-width: 768px)" srcset="medium-image@1x.webp 1x, medium-image@2x.jpg 2x">
      <img src="small-image@1x.jpg" srcset="small-image@2x.jpg 2x" alt="Image description">
    </picture>

Tối ưu hóa hình ảnh cho website​

Nén hình ảnh (Compress)​

  • Các công tụ nén trực tuyến như tinypng, img2go...
  • Gulp hoặc các phần mềm nén ảnh như Caesium, RIOT...
  • Bộ công cụ Abobe như Photoshop...

Sử dụng đúng định dạng​

  • Hình đại diện cho các bài viết / sản phẩm dùng JPG
  • Logo, icon thì nên dùng SVG, nếu không xuất được SVG thì dùng PNG
  • Hình cần nền trong suốt dùng PNG

Tải trước hình ảnh (Preload)​

<link rel="preload" as="image" href="url_to_image.png">

Chỉ nên preload hình ảnh lớn nhất mà nằm màn hình đầu tiên trên site, không nên preload nhiều hình

Chỉ tải những image thật sự cần thiết​

Có một cách code khá lỗi thời, đó là tải hết các hình ảnh rồi dùng CSS để ẩn/hiện các hình ảnh đó, như ví dụ bên dưới:

HTML
<img class="u-pc" src="large-image.jpg" alt="">
<img class="u-sp" src="small-image.jpg" alt="">
CSS
.u-sp {
  display: none;
}
@media (max-width: 1024px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: inline-block;
  }
}

Nên dùng thẻ picture để tối ưu cho trường hợp này:

<picture>
  <source media="(max-width: 1024px)" srcset="small-image.jpg">
  <img src="large-image.jpg" alt="">
</picture>

Kỹ thuật Lazy Loading​

Lazy Loading (Lazyload) chính là kỹ thuật chỉ tải dữ liệu khi bạn cần sử dụng đến chúng.
Ví dụ khi người dùng vào 1 trang web, người dùng scroll đến đâu thì trang web sẽ load dữ liệu đến đó chứ không cần load trang 1 lần khi tải trang.
Hiện nay, chủ yếu có 2 cách áp dụng lazyload vào trang web:

Dùng lazyload library js​

Dùng thuộc tính loading="lazy" của html​

HTML5 đã cung cấp thuộc tính loading="lazy" để chúng ta có thể áp dụng kỹ thuật lazyload vào trang web mà không cần tới các thư viện javascript

<img src="url-image.jpg" loading="lazy" alt="">

Tham khảo​