Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website

Hình ảnh là 1 trong số các thành phần có ảnh hưởng lớn đến tốc độ tải trang. Với những website sử dụng càng nhiều hình ảnh, thì mỗi hình ảnh được tối ưu 1 chút sẽ giúp làm tăng tốc khá đáng kể.

Một trong những tiêu chí tối ưu hình ảnh cho website, đó là tối ưu về kích thước hiển thị. Kích thước hiển thị được tối ưu, thường kéo theo dung lượng lượng ảnh cũng như chất lượng hình ảnh được tối ưu.

Ví dụ về ảnh hưởng của ảnh không đúng kích thước đối với hiệu năng website

Hình ảnh đại diện cho bài viết với kích thước hiển thị 100x100px

Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website - Ảnh 1.

Hình1: Kích thước ảnh đại diện sẽ hiển thị là 100 x 100

Do đó chúng ta chỉ cần 1 ảnh có kích thước đúng 100×100 thay vì sử dụng hình ảnh giống như trong bài viết, có kích thước lớn.

Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website - Ảnh 2.

Hình2: Ảnh có kích thước lớn 650×406 dung lượng 42,52KB

Chúng ta sẽ sử dụng hình ảnh nhỏ sau làm ảnh đại diện

Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website - Ảnh 3.

Hình 3: Ảnh kích thước 100×100 dung lượng 5.50KB.

Ví dụ trên cho ta thấy, với việc sử dụng hình ảnh đúng kích thước hiển thị, ta có thể giảm được gần 37,02KB cho 1 ảnh (~87%) mà không làm giảm chất lượng hiển thị của hình ảnh.

Hơn nữa việc dùng đúng kích thước của ảnh còn tránh được việc ảnh bị vỡ hoặc không hiển thị được hết nội dung ảnh.

Hướng dẫn tối ưu kích thước hiển thị ảnh thủ công

Để website sử dụng hình ảnh đúng kích thước hiển thị, ta cần làm các bước sau:

Bước 1: Chuẩn bị ảnh

Bước 2: Xác định kích thước sẽ hiển thị trên website (dựa vào cấu hình, setup của web…)

Bước 3: Chỉnh kích thước ảnh cho phù hợp

Sau đây , BizFly Cloud sẽ giới thiệu 1 số công cụ đơn giản và hướng dẫn chỉnh sửa ảnh cho đúng kích thước.

1. Dùng paint của windows để chỉnh sửa kích thước ảnh

Bước 1: Ảnh hiện có

Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website - Ảnh 4.

Bước 2: Kích thước ảnh cần chỉnh thành 100×100

Bước 3: Mở bức ảnh cần chỉnh sửa bằng paint, sau đó chọn Resize

Paint cho 2 lựa chọn chỉnh kích thước, theo phần trăm, hoặc theo pixel. Ở đây ta sẽ chọn Pixel

Bạn có thể nhấn vào ô “Maintain aspect radio”, để khi bạn điều chỉnh chiều ngang thì chiều dài cũng sẽ được điều chỉnh theo, khiến hình không bị méo.

Còn nếu fix cứng kích thước 2 chiều thì không tick vào ô này, ta  sẽ nhập Horizontal – chiều ngang là 100 pixel, và Vertical -chiều dọc là 100 pixel.

Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website - Ảnh 5.

Sau đó bấm OKSave ảnh lại

Ta sẽ có kết quả

Hướng dẫn tối ưu kích thước hiển thị hình ảnh trên website - Ảnh 6.

Ta có thể sử dụng ảnh này để dùng làm ảnh đại diện cho bài viết, và dùng ảnh ban đầu để làm ảnh bên trong nội dung bài.

Trên đây là hướng dẫn tối ưu kích thước ảnh với công cụ Paint, một công cụ khá phổ biến, dễ sử dụng đối với những người không có nhiều kinh nghiệm về chỉnh sửa ảnh.

Ngoài ra , các bạn cũng có thể sử dụng các công cụ khác như Photoshop …, các trang web chỉnh sửa ảnh online như https://resizeimage.net/ …. , hoặc sử dụng các plugin chỉnh sửa ảnh được hỗ trợ cho 1 số loại CMS.

Với cách làm thủ công như trên, chúng ta sẽ khá mất thời gian và công sức cho từng bức ảnh. Trong khi đó, hình ảnh là một thành phần cực kỳ quan trọng khi xây dựng và phát triển website. Trên thực tế, số lượng ảnh trên mỗi website có thể lên tới vài trăm thậm chí vài nghìn tấm, chưa kể đối với các website cập nhật nội dung hàng ngày, số lượng ảnh cũng có thể tăng lên từng giờ. Việc tối ưu thủ công lúc này có thể là không khả thi.

Để giải quyết vấn đề này, BizFly Cloud giới thiệu giải pháp BizFly CDN với tính năng tự động chỉnh kích thước ảnh cho phù hợp với kích thước hiển thị mà không làm giảm chất lượng.

Khi tích hợp CDN trên hệ thống toàn bộ hình ảnh của website sẽ được tự động resize lại theo đúng tiêu chuẩn mà không cần bất cứ thao tác thủ công nào. Điều quan trọng là chất lượng hình ảnh được đảm bảo khi đã resize ,không làm ảnh hưởng đến trải nghiệm xem trang của khách hàng. Kích thước ảnh giảm, kéo theo dung lượng ảnh giảm giúp tổng thể website “nhẹ hơn”, và kết quả là tốc độ tải web được đẩy nhanh hơn. Khách hàng sẽ được tận hưởng những trải nghiệm lướt web mượt mà và thỏa mãn về mặt thị giác. Khách hàng ở lại lâu hơn, đồng nghĩa với việc hiểu biết về sản phẩm, thương hiệu nhiều hơn, ấn tượng tốt đẹp hơn và cuối cùng mua sắm nhiều hơn. Cảm tình thương hiệu gia tăng hứa hẹn cho những lần quay lại lần sau. Đây là một trong những yếu tố vô cùng quan trọng tạo đà cho việc xây dựng lòng trung thành của khách hàng để gắn kết và lan tỏa thương hiệu dài lâu.

Have your say