Video học lập trình mỗi ngày

Tối ưu hoá hình ảnh là một thủ thuật làm cho ứng dụng nhanh hơn, giúp cho người dùng có một cách trải nghiệm mượt mà và ít tốn dung lượng 4G hay 5G nhất có thể. Và khái niệm tối ưu hoá hình ảnh cũng nằm trong 24 đề xuất tối ưu hoá hệ thống được các chuyên gia Front-End đưa ra. Và bài viết này, với 6 cách được đưa ra, hy vọng bạn sẽ có một cách làm cho riêng mình.

Tối ưu hoá hình ảnh

Các bạn nào hay mua đồ nhu tiki hay shopee thì thấy đội ngũ lập trình của họ khá giỏi, rất nhiều mặt hàng và hình ảnh nhưng việc trải nghiệm của tôi chưa bao giờ thất vọng. Đó là một điều tuyệt vời về việc tối ưu hiệu suất của họ. Nhưng về mặt back-end thì những lúc sale sập sàn thì vẫn còn chậm và rất chậm mới vào được. Nhưng về vấn đề này tôi sẽ phân tích sau. Còn bây giờ, các bạn thấy đấy nhưng trang mua sắm như shopee hay tiki giả sử nếu chậm thì các bạn thấy thế nào? Họ có thể mất đi một lượng khách hàng nếu hiệu suất web của họ chậm hơn 2 giây. 

Khuyến khích: 1 mẹo duy nhất check nhanh website của bạn có chậm hay không?

Và có thể họ mất biết bao nhiêu tiền bạc với nhiều đơn hàng. Chình vì vậy, không thể phủ nhận việc tối ưu hình ảnh là một việc rất rất quan trọng, cho nên các bạn đừng lơ đễnh và bỏ qua. Việc làm thế nào để tối ưu một hệ thống thì trước đây chúng tôi cũng đã đề cập tới 24 đề xuất cải thiện hiệu suất ứng dụng website được các chuyên gia Front-End khuyến khích. Các bạn có thể vào đó để mở rộng hơn. Còn ở đây chúng ta chỉ nói đến việc tối ưu hình ảnh mà thôi.

1 - lazy load image

Kỹ thuật lazy-load images thì thường được nhắc đến nhiều nhất trong việc này. Cụ thể về kỹ thuật này là trong sites không đặt sãn các đường dẫn hình ảnh, và chỉ tải ảnh khi người dùng lướt đến và nó xuất hiện trong vùng hiển thị mà thôi. Đây là một điều rất cần thiết cho việc tối ưu website. Ví dụ:

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

Các bạn thấy đấy, khi trang hiển thị thì chúng ta dùng một kỹ thuật sử dụng JS để xử lý

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

Các bạn có thể tham khảo Kỹ thuật lazy load

2 - Hình ảnh phản hồi

Ưu điểm của cách làm này là hình ảnh nó sẽ có thể tự động tải thích hợp theo kích thước màn hình. Từ đó giúp người dùng trải nghiệm tốt hơn, nếu dùng mobile để lướt web thì nó ít tốn băng thông or gì gì đó. Nói chung, anh em trong nghề hiểu hết đó mà.

<picture>
	<source srcset="banner_w1000.jpg" media="(min-width: 801px)">
	<source srcset="banner_w800.jpg" media="(max-width: 800px)">
	<img src="banner_w800.jpg" alt="">
</picture>

Nếu sử dụng CSS để xử lý

@media (min-width: 769px) {
	.bg {
		background-image: url(bg1080.jpg);
	}
}
@media (max-width: 768px) {
	.bg {
		background-image: url(bg768.jpg);
	}
}

Tham khảo về srcset in images

3 - Thay đổi kích thước hình ảnh

Đây cũng là một trường hợp mà ta hay gặp. Ví dụ: 

Bạn có hình ảnh 1920 * 1080, được hiển thị cho người dùng dưới dạng hình thu nhỏ và hình ảnh đầy đủ được hiển thị khi người dùng di chuyển con chuột qua nó. Điều này có nghĩa là, nếu người nào thực sự quan tâm đến hình ảnh của bạn thì họ sẵn sàng di chuyển vào vị trí để hiện thị hình ảnh rõ hơn, Còn không thì hiển thị làm gì cho nó lẵng phí khi mà họ không cần nhìn. Kỹ thuật này là chúng ta dùng hai hình ảnh, 1 là thumb 2 là hình ảnh gốc. Lúc đầu, chỉ những hình thu nhỏ mới được tải và khi người dùng di chuột qua hình ảnh, hình ảnh lớn sẽ được tải, chỉ đơn giản vậy thôi.

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

Đây là một thủ thuật mà có lẽ tôi hay xài nhiều nhất bởi lẽ tôi toàn xài JPG cho nên từ chất lượng 100% tôi cho xuống 70% nhưng mắt thường cũng chả phân biệt được. Thậm chí xuống 50% cũng không sao, tin tôi đi, nó vừa nhẹ và mượt không tì vết. Có nhiều cách để giảm chất lượng hình ảnh ví dụ như PhotoShop ... Nhưng có thể là sử dụng nodejs, javascript để xử lý nói chung là nhiều. Thậm chí là sử dụng thông qua plugin webpack. image-webpack-loader 

Ví dụ:

npm i -D image-webpack-loader

Cấu hình webpack

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000, /* nếu dưới 10000 bytes thì tự động chuyển về base64*/
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    /* Auto nén hình ảnh*/
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

Ngoài ra còn một số thư viện dễ hơn nữa cho các bạn tham khảo như: 

Sử dụng cloudinary tối ưu hoá hình ảnh 

Node và Jimp - xử lý hình ảnh 

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

Ưu điểm của hình ảnh có định dàng WebP là nó có thuật toán nén dữ liệu hình ảnh tốt hơn, có thể mang lại khối lượng hình ảnh nhỏ hơn và có chất lượng hình ảnh không thể phân biệt bằng mắt thường. Nó cũng có các chế độ nén không mất dữ liệu và mất dữ liệu. Kích thước tệp nhỏ hơn với chất lượng tương đương so với PNG và JPEG. Định dạng không mất dữ liệu WebP có thể nén hình ảnh nhiều hơn tới 26% so với PNG trong khi hình ảnh mất dữ liệu WebP có kích thước nhỏ hơn 25-34% ở chất lượng tương đương so với JPG. 

Để hiểu rõ hơn thì bạn có thê đọc thêm ở đây Image Formats Comparison - WebP vs JPG vs PNG