Hướng Dẫn Tối Ưu Hình Ảnh Để Tăng Tốc Độ Website

Bạn đã rất mất kiên nhẫn khi truy cập một website mà thời gian tải quá lâu. Việc website tải chậm có thể do nhiều nguyên nhân khác nhau. Theo một nghiên cứu từ Google, khách hàng sẵn sàng bỏ đi nếu website mất hơn 3 giây để tải nội dung. Tuy nhiên trong thực tế, Google nhận ra có đến 70% website trên di động cần 5 giây để tải nội dung, và hơn 7 giây để tải đầy đủ tất cả nội dung còn lại. Vậy làm sao để tăng tốc độ website đây?

Với việc ngày càng nhiều đối thủ cạnh tranh, vì vậy việc tối ưu để tăng tốc độ website là cực kỳ quan trọng. Bài viết sau đây, Ekoizi Software sẽ hướng dẫn cách giúp chủ doanh nghiệp tối ưu hình ảnh để tăng tốc website mà không cần rành về kỹ thuật/code hay thiết kế.

Hình ảnh, hơn 85% nguyên nhân làm chậm website của bạn

Ngoài hình ảnh ra, bất kỳ tệp file nào có dung lượng lớn mà cần tải xong mới hiển thị được “đầy đủ ý nghĩa” trên web thì đều ảnh hướng lớn đến tốc độ tải trang. Đa phần các website hiện nay được phủ đầy bằng hình ảnh (nhất là website thương mại điện tử). Những thành phần còn lại như: HTML, CSS, JS, Font,…dù khá nhiều tập tin nhưng lại chiếm dung lượng không đáng kể, tầm 10-20%.

Vì vậy đa số website tải trang chậm nguyên nhân là do không xử lý ảnh. Cụ thể ở đây là không nén, chọn sai định dạng và kích thước không phù hợp,.. trước khi đưa lên website. Chính vì thế, bạn cần tối ưu hình ảnh ngay trước khi xử lý các yếu tốt khác.

3 Bước để bạn tối ưu hình ảnh – tăng tốc độ website một cách nhanh chóng

Ekoizi Software, sẽ tóm tắt 3 bước chính cần thiết để tối ưu hình ảnh, nhằm tăng tốc độ website. Cụ thể là:

1. 4 định dạng ảnh được dùng phổ biến cho website hiện nay 

Theo Google PageSpeed Insights thì 96% lưu lượng tải hình ảnh trên Internet hiện nay từ các định dạng ảnh GIF, PNG, JPG và WebP. Bởi vì, các chúng quá phổ biến, nên bạn không cần chú ý đến những định dạng ảnh khác, mà chỉ nên tập trung vào 4 loại này.

Nên dùng định dạng ảnh khác nhau cho từng mục đích khác nhau

1.1. JPGs: Định dạng này được xem ưa chuộng và phổ biến nhất. Bởi vì, khi nén dung lượng nén tốt nhưng vẫn giữ được chất lượng ảnh đáng kể. Phù hợp với hình ảnh chất lượng cao và nhiều màu sắc phức tạp. Ekoizi khuyến cáo bạn nên dùng trong đa số trường hợp nếu có thể, ví dụ như: ảnh sản phẩm, banner, background,… Tuy nhiên, nhược điểm là không thể áp dụng cho các trường hợp ảnh cần có nền trong suốt.

1.2. PNG: Cũng là định dạng khá phổ biến nhưng lại có chất lượng hình ảnh nhỉnh hơn JPGs. Rất thích hợp dùng trong trường hợp cần chất lượng gần như tối đa, hình ảnh chụp sống động và xóa được cả phông nền như: logo, icon, hoặc các ảnh chồng lên phức tạp. Nhưng nhược điểm là ảnh PNG lại có dung lượng lớn hơn rất nhiều (x2, x3) so với JPGs. Thường chỉ nên dùng cho logo hoặc khi bạn thật sự cần thiết.

1.3. GIF: Là ảnh Graphics Interchange Format, một loại ảnh được tạo ra bởi CompuServe. Ảnh GIF thường bao gồm tối đa 256 (khá ít) nên ảnh GIF (tĩnh) thường có dung lượng nhỏ hơn JPGs nhiều.

GIF có thể lưu lại dạng nền trong suốt và làm dạng ảnh động khá tốt. Chúng thường thay thế cho các video / clip ngắn khá hiệu quả và tối ưu dung lương hơn video. Lưu ý đừng lạm dụng ảnh GIF động (dài) vì có khi lại nặng hơn cả PNG. Tốt nhất bạn chỉ nên dùng cho ảnh động giả lập trạng thái đang tải trang hoặc những chỗ cần cho website sinh động (mà vẫn tải nhẹ hơn video)

1.4. WEBP: Định dạng được tạo ra bởi ông lớn Google và họ khuyến cáo sử dụng trong mọi trường hợp nếu có thể. Định dạng ảnh này nén cực tốt (hơn JPG, PNG nhiều) mà chất lượng không quá thay đổi, kể cả ảnh có nền trong suốt và ảnh động. Ngày nay, hầy hết tất cả trình duyệt: Firefox , Chrome, Opera, Edge đều hỗ trợ ngoại trừ Safari của Apple.

2. Chủ động nén ảnh trước khi tải lên website của bạn

Không phải lúc nào các hệ thống CMS (Hệ thống quản trị nội dung) cũng nén ảnh tự động giúp bạn. Và nếu có thì cũng chưa chắc khi nén nó lại đáp ứng đầy đủ yêu cầu về chất lượng. Vì vậy, bạn hãy chủ động nén ảnh trước khi tải lên website nhé. Điều này cực kỳ quan trọng trong việc tăng tốc độ website của bạn.

Các CMS phổ biến hiện mặc định là tạo ra nhiều ảnh có kích thước khác nhau dựa trên ảnh gốc. Bạn muốn hệ thống CMS tự động nén ảnh (Compres) thì phải cần cài thêm các plugin (Phần mềm hỗ trợ). Tất nhiên, CPU của máy chủ cũng hoạt động nhiều hơn mỗi khi bạn tải ảnh lên.

Sau khi đã chọn đúng định dạng ảnh, bạn nên nén ảnh trước khi tải lên website nhé. Việc nén ảnh cũng rất dễ dàng bằng các công cụ nén ảnh phổ biến.

3. Sử dụng đúng kích thước ảnh hiển thị trên website 

Khi bạn phân tích website trên các công cụ như Google PageSpeed Insight hay GTMetrix, bạn sẽ thấy từ khoá như Dimension hay Responsive Image. Đại khái đây là những lời khuyên rằng bạn nên tải lên website ảnh vừa khớp với kích thước mà website sẽ hiển thị cho người dùng.

3.1. Vậy, làm thế nào để có kích thước ảnh đúng?

Ảnh có kích thước đúng phải là kích thước cố định hoặc tối đa mà website cho phép hiển thị ở vị trí cụ thể để người dùng thấy được. Kích thước này thường được quy định bởi thiết kế của website ngay từ ban đầu. Vì vậy, dù bạn dùng ảnh có kích thước lớn hơn gấp nhiều lần thì website cũng chỉ hiển thị đúng hoặc tối đa như kích thước mặc định mà thôi.

Ví dụ 1: Về kích thước cố định

Banner này đã được website định nghĩa để hiển thị ảnh 383.33×383.33 pixel. Nếu bạn tải ảnh 800×480 pixel hay 1200×900 pixel thì website cũng chỉ hiển thị 383.33×383.33 pixel thôi. Khi tải ảnh lớn hơn kích thước được website hiển thị, bạn sẽ chỉ làm website nặng hơn chứ hình ảnh không hề nét hay đẹp hơn.

Ví dụ 2: Về kích thước tối đa

Chiều rộng tối đa (max-width) khung nội dung bài viết là 800 pixel. Tương tự ví dụ trên, nếu bạn tải ảnh lớn hơn 800px thì website cũng chỉ hiển thị tối đa là 800px thôi.

Trong ví dụ 2, ảnh mô tả trong bài viết chỉ có chiều rộng là 800px, với kích thước này cũng đảm bảo chuẩn SEO cho website của bạn.

3.2. Làm thế nào để biết được kích thước đúng hay không?

Có rất nhiều cách để xác định được ảnh có đúng kích thước hay không, nhưng phổ biến vẫn là 3 cách sau đây:

C1: Hỏi người đã thiết kế website, họ sẽ cung cấp cho bạn danh sách các kích thước được quy định để hiển thị tốt nhất.

C2: Xem các hướng dẫn, gợi ý có ngay trong phần thiết lập trong giao diện nếu bạn mua giao diện mẫu sẵn có trên kho.

C3: Tự mình đo kích thước, nếu bạn biết sử dụng công cụ Inspect (F12) có sẵn ở trình duyệt.

3.3 Vậy cùng một ảnh, nhưng hiển thị mỗi trang có kích thước khác nhau thì sẽ như thế nào?

Các nội dung cần trình bày cùng một hình ảnh, nhưng kích thước hiển thị lại khác nhau như Trang sản phẩm hoặc Blog cần làm gì khi:

– Ở trang danh sách sản phẩm ảnh hiển thị có kích thước là 350×350 pixel

– Vào trang chi tiết sản phẩm ảnh cần hiển thị đầy đủ là 700×700 pixel

Ở trường hợp này bạn sẽ chọn kích thước đúng ở trang chi tiết sản phẩm cố định 700×700 px để đảm bảo chất lượng ảnh hiển thị cho người dùng.

Phần tối ưu kích thước ảnh sản phẩm ở trang danh sách sản phẩm 350×350 lúc này buộc phải có kỹ thuật can thiệp. Người lập trình website sẽ dựa vào giới hạn nền tảng hiện có (hoặc khả năng của mình) để load ảnh nhỏ tối ưu hơn ở trang danh sách sản phẩm.

Vì bài viết dành cho người không rành công nghệ nên sẽ không đi sâu hơn.

Kết luận:

Ngoài việc, đã hiểu đúng định dạng mà bạn muốn tải lên web và cần phải nén ảnh trước khi đưa lên website. Bạn cần nhớ luôn sử dụng đúng kích thước ảnh cần hiển thị trên web để tối ưu tốc độ tải trang. Chỉ cần làm tốt 3 yếu tố này, đã có thể tăng tốc độ website của bạn lên đến 85% rồi. Chúc bạn thành công nhé!

Tham khảo các giải pháp công nghệ giúp bạn chuyển đổi số, đột phá trong bán lẻ và marketing tại Ekoizi Software: ekoizi.com

Tanchiba

Liên Hệ: