5 cách hay dùng để tối ưu hóa hình ảnh cho website

Tối ưu hóa hình ảnh là một thủ thuật làm cho website của bạn chạy nhanh hơn. Việc này rất cần thiết để tăng trải nghiệm người dùng, cảm giác web chạy mượt mà, giảm dung lượng 4G/5G. Đây là một trong những trọng điểm mà các developer luôn quan tâm khi xây dựng và quản trị website.

Từ 5 cách dưới dây, hoàn toàn có thể giúp website của bạn chạy gấp 2, 3 lần. Hy vọng bài viết sẽ mang lại sự thú vị và bạn có thể chọn 1 trong 5 cách bên dưới để áp dụng cho website của mình nhé.

1. Lazy load image

Lazy-load image là một kỹ thuật hay dùng nhất. Các hình ảnh sẽ không set cứng đường dẫn trong thẻ <img> . Chỉ khi người dùng lướt/cuộn đến vùng hiển thị, thì các hình ảnh trong vùng mới được set đường dẫn và hiển thị hình ảnh lên thôi.

Điều này giúp website không tải những hình ảnh không cần thiết, những hình ảnh thuộc vùng mà người dùng không xem đến.

Cách này thường can thiệp bằng javascript, đại khái là dùng js để set src cho thẻ img.

Có thể lấy ví dụ như đoạn js bên dưới

<img data-src="https://bbmcode.com/xxxxxxxx">

// js
const img = document.querySelector('img')
img.src = img.dataset.src

hoặc trong reactjs cũng có nhiều package hỗ trợ việc này như: react-lazy-load-image-component

// install
npm i react-lazy-load-image-component

// usage
import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

const MyImage = ({ image }) => (
  <div>
    <LazyLoadImage
      alt={image.alt}
      height={image.height}
      src={image.src} // use normal <img> attributes as props
      width={image.width} />
    <span>{image.caption}</span>
  </div>
);

export default MyImage;

2. Reposive image

Là kỹ thuật mà hình ảnh sẽ được load lên tùy theo kích thước màn hình. Ví dụ người dùng đang chạy website bằng laptop sẽ xem hình dung lượng cao hơn là chạy bằng mobile.

Tuyệt vời đúng không, nếu vậy rõ ràng lướt web trên mobile sẽ cảm giác nhẹ hơn, không cần phải tải hình ảnh dung lượng cao như trên máy tính.

Thủ thuật này hiện nay dùng cũng khá phổ biến, WordPress cũng đã có nhiều plugin, như ví dụ bên dưới

<?php
    $img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
    $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">

Hoặc cách thủ công ít dùng hơn là can thiệp từ phía css. Tuỳ theo size màn hình mà css sẽ thay đổi các URL hình ảnh nhất định. Như ví dụ bên dưới là xử lý với background-image URL.

@media (min-width: 769px) {
	.img-background {
		background-image: url(large.jpg);
	}
}
@media (max-width: 768px) {
	.img-background{
		background-image: url(mid.jpg);
	}
}

3. Thay đổi ảnh, hiển thị với nhiều kích thước khác nhau

Nghe có vẻ phức tạp, nhưng làm cũng đơn giản lắm. Cách này thường được xử lý ở back-end hơn.

Ví dụ hình ảnh sản phẩm cần hiển thị là thumbnail hình nhỏ, nhấn vào mới ra hình to kích thước 1920 * 1080. 

Với kỹ thuật này chúng ta sẽ tạo ra 2 hình, một hình là thumbnail kích thước nhỏ, khi nhấn vào sẽ load hình gốc kích thước to. 

Làm như vậy sẽ giúp người dùng lướt danh sách sản phẩm mượt mà, vì trong list lúc này chỉ toàn là hình thumbnail với dung lượng rất nhỏ. Như ví dụ bên dưới

4. Giảm chất lượng hình ảnh

Đây cũng là cách hay được áp dụng. Với các hình ảnh JPG thì việc giảm chất lượng từ 100% xuống 70% hay 60% đi nữa thì cũng không thấy rõ sự khác biệt.

Nếu resize bằng tools, các bạn có thể dùng Photoshop hay rất nhiều tools khác.

Tuy nhiên, để nhanh, tự động thì lúc upload image, chúng ta nên xem size của tấm hình và dùng code để resize nó luôn thì sẽ hợp lý hơn.

Nếu dùng webpack, bạn có thể tham khảo package image-webpack-loader

// install
npm i image-webpack-loader

// in your webpack.config.js, add the image-loader, chained after the file-loader:

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, // webpack@1.x
        disable: true, // webpack@2.x and newer
      },
    },
  ],
}]

5. Sử dụng hình ảnh định dạng webp

Các trình duyệt ngày nay cũng đã hỗ trợ hình ảnh dạng Webp rồi. Ưu điểm của webp là chuẩn file hình đã được nén và không bị thay đổi chất lượng hình ảnh (có nhưng không đáng kể). Các hình ảnh dạng webp có thể có dung lượng thấp hơn png/jpg đến 26% 

As per Google Data, WebP images (on average) are 25–34% smaller than comparable JPEGs and 26% smaller than comparable PNGs.

Các website dùng WordPress rất hay kỹ thuật này. Ngoài ra nếu code PHP vẫn có thể convert hình ảnh png/jpg sang webp nha các bạn, chúng ta sẽ dùng hàm imagewebp.

Tham khảo: https://www.php.net/manual/en/function.imagewebp.php

OK. Như vậy đã xong 5 cách tối ưu hình ảnh cho website rồi. Các bạn đã chọn được cách nào chưa? Có vấn đề gì cứ comment ở cuối bài viết nhé.

Cảm ơn các bạn đã đọc!