Tối ưu ảnh cho website: Lựa chọn loại tệp và cách lưu

GIANG

1475

25-06-2018

Chúng ta có câu "1 bức tranh trị giá 1000 chữ", đây là một trong những lý do khiến hình ảnh đóng một vai trò rất quan trọng trong thương mại điện tử. Nếu khách hàng không thể cảm nhận, kiểm tra hay chạm tay vào sản phẩm, họ sẽ đưa ra quyết định mua hàng phần nhiều dựa vào hình ảnh của sản phẩm đó. Hình ảnh chính là hình thức mà doanh nghiệp thông qua đó chuyển tải màu sắc, chất lượng và câu chuyện của sản phẩm tới khách hàng của mình.

Vì vậy, một điều hiển nhiên, hình ảnh của website phải đảm bảo độ phân giải cao và sắc nét. Nhưng điều này luôn đi kèm với một mức tốn kém chi phí nhất định. Các hình ảnh với độ phân giải cao, lớn sẽ kéo theo kích thước tệp lớn. Đặt những bức ảnh này lên trên trang, có thể người dùng sẽ cảm thấy như họ đang "bơi trong mật ong" (chậm chạp) khi duyệt website của bạn.

Sự chậm chạp không những khiến khách truy cập rời bỏ khỏi trang mà còn khiến Google chú ý tới sự tải chậm của website, điều này gây ảnh hưởng lên kết quả SEO của bạn.

Trong thương mại điện tử nói riêng và toàn bộ các lĩnh vực khác nói chung, điều quan trọng là tìm ra sự cân bằng tốt nhất giữa chất lượng và kích thước file ảnh khi bạn lưu chúng cho website.

Bài viết sau sẽ chỉ cho bạn cách thực hiện sự cân bằng đó. 

Nếu bạn:

- Tự chụp ảnh sản phẩm và tải trực tiếp lên website.

- Không có kiến thức hoặc quy trình để lưu hình ảnh với file size.

- Sở hữu website có cả tấn hình ảnh và nó dần trở nên chậm chạp trông thấy.

- Chưa bắt đầu xây dựng một cửa hàng trực tuyến của riêng mình.

Thì toàn bộ các hướng dẫn dưới đây đặc biệt dành cho bạn. Bạn đã sẵn sàng chưa?

Tùy chọn loại tệp hình ảnh

Có ba loại tệp chính chúng ta sẽ dùng để lưu hình ảnh được tối ưu hóa: GIF, JPG và PNG. Mỗi loại tệp sẽ có điểm mạnh và điểm yếu riêng, do đó chúng ta cần biết được khi nào thì dùng loại tệp nào. Cụ thể như sau:

1. JPG

JPG (còn được gọi là JPEG) là loại tệp phổ biến nhất cho hình ảnh trên web. JPG là loại tệp hoàn hảo cho các photographs hoặc các images phức tạp chứa nhiều màu sắc, shadows, gradients hoặc các patterns phức tạp. JPGs xử lý tốt các loại hình ảnh này vì các JPGs có bảng màu khá lớn.

JPG còn có thể được lưu ở chất lượng cao, chất lượng thấp hoặc bất cứ mức chất lượng nào nằm giữa. Điều này cho phép bạn điều chỉnh và lưu hình ảnh chính xác theo cách bạn muốn, sao cho cân bằng cả về chất lượng và kích thước tệp.

Use Case cho doanh nghiệp thương mại điện tử: JPEG là định dạng file online phổ biến nhất và thường được sử dụng cho hình ảnh sản phẩm, biểu ngữ/ hình ảnh chính (hero) trên trang chủ.

2. PNG

PNG là một định dạng tệp trực tuyến phổ biến khác. Trong Adobe Photoshop, bạn sẽ có hai tùy chọn lưu PNG dưới dạng PNG-8 hoặc PNG-24.

PNG-8 có một pallet màu rất hạn chế 256 màu. Mặc dù kích thước hình ảnh nhỏ hơn, nhưng đây lại không phải là lựa chọn tốt cho hình ảnh thường và các hình ảnh phức tạp.

PNG thích hợp cho các ảnh là logo

PNG-24 cung cấp hình ảnh có chất lượng cao hơn nhiều nên có kích thước tệp lớn hơn.

Quan trọng nhất, PNG có thể xử lý transparency. Đây là một trong những điểm khác biệt lớn nhất giữa PNG và JPEG.

Use Case cho doanh nghiệp thương mại điện tử: PNG thường xuyên được sử dụng cho các logo vì chúng có chất lượng cao và có thể xử lý độ trong suốt (transparency). Bạn có thể để logo là một hình ảnh có chất lượng cao, vì kích thước của nó khá nhỏ nên bạn không cần lo về kích cỡ của chúng bị lớn gây ảnh hưởng cho website.

3. GIF

GIF dường như phổ biến hơn vào nhiều năm trước, nhưng dù vậy, hiện nay GIF vẫn là một tùy chọn tốt cho các hình ảnh với kích thước nhỏ với một vài màu sắc đơn giản. Giống như PNG-8, các tệp GIF bị giới hạn chỉ 256 màu. Do đó, GIF sẽ không bao giờ được sử dụng cho ảnh sản phẩm.

Use Case cho doanh nghiệp thương mại điện tử: GIF có thể được sử dụng cho logo nhưng vì sự giới hạn về màu sắc nên chúng không phổ biến đối với hầu hết các website  thương mại điện tử.

Lưu hình ảnh đúng cách

Lưu hình ảnh đúng cách

Đúng như thực tế, hình ảnh lớn sẽ mất nhiều thời gian hơn để tải. "lớn" tức là chúng ta đang đề cập đến kích thước tệp thay vì kích thước của hình ảnh, nghĩa là giá trị bằng KB, MB, GB,...

47% người dùng mong đợi trang web tải dưới 2 giây và 40% sẽ từ bỏ một trang mất hơn 3 giây để tải (Nguồn thống kê: https://blog.kissmetrics.com/loading-time/?wide=1), do đó điều quan trọng là hình ảnh của bạn phải đủ nhỏ để đảm bảo một tốc độ tải trang nhanh chóng.

Có ba điều bạn có thể làm để tối ưu hóa hình ảnh của mình sao cho đúng cách khi post chúng lên cửa hàng trực tuyến của mình:

1. Lưu đúng kích cỡ (DIMENSIONS)

Bạn phải mở hình ảnh trong Photoshop và xem nó ở mức 100%. Điều này cho phép bạn xem hình ảnh ở kích thước chính xác mà nó được hiển thị trên màn hình máy tính khi bạn lưu hình ảnh cho web.

2. Lưu hình ảnh cho website

Bạn hoàn toàn có thể giảm kích thước tệp mà không làm giảm đáng kể chất lượng hình ảnh bằng cách sử dụng chức năng "Save for Web" của Photoshop. Cụ thể: mở hình ảnh trong Photoshop, vào File> Export> Save for Web (Legacy)… Một cửa sổ xuất hiện cho phép bạn chọn chất lượng xuất ảnh. Thực tế chất lượng 60 là tốt nhất vì nó giảm kích thước tệp xuống dưới một megabyte và không có sự khác biệt đáng kể về chất lượng.

3. Nén ảnh cho website

Sử dụng các ứng dụng nén ảnh là cách dễ dàng nhất để giảm kích thước tệp hình ảnh. Các công cụ này xóa dữ liệu bị ẩn trong tệp hình ảnh như hồ sơ màu sắc bổ sung và siêu dữ liệu (như định vị địa lý nơi chụp ảnh) không cần thiết.

Những công cụ này giúp bạn giảm kích thước tệp mà không làm giảm chất lượng hình ảnh một cách nhanh chóng và dễ dàng.

Ứng dụng/ Dịch vụ nén hình ảnh thông dụng:

- TinyJPG | TinyPNG - https://tinypng.com/

- Compressor.io - https://compressor.io/

- Kraken ImageOptimizer - https://kraken.io/web-interface

- ImageOptim - http://www.imageoptimizer.net/Pages/Home.aspx

- Crush Pics (Shopify App) - https://apps.shopify.com/crush-pics

- Minifier (Shopify App) - https://apps.shopify.com/minifier

Kết luận

Tóm lại, khởi điểm bạn có bức ảnh gốc với dung lượng khá lớn. Tuy nhiên, với một vài bước đơn giản, chúng ta hoàn toàn có thể giảm kích thước ảnh từ 5184 × 3456 xuống 1600 × 800 sao cho nó phù hợp hoàn hảo cho trang chủ, đồng thời lấy từ dung lượng giảm từ 14,4mb xuống chỉ còn 336kb rất hợp lý.

Lưu hình ảnh phù hợp cho website là một bước quan trọng bạn phải ưu tiên thực hiện cho website nhằm đạt lợi ích về hiệu suất và tốc độ tải trang. Ngay cả khi bạn chỉ tiết kiệm được từ 10-20% cho mỗi hình ảnh được tối ưu, theo thời gian, khi cửa hàng và website của bạn tăng lên về quy mô, mỗi KB tiết kiệm gộp lại sẽ trở nên đáng kể vô cùng, góp phần tăng trải nghiệm người dùng và làm hài lòng cỗ máy tìm kiếm khổng lồ Google.

Bài dịch từ: www.abetterlemonadestand.com

GIANG - VCCloud

>> Có thể bạn quan tâm: Cách tối ưu Website của bạn với nén Gzip