Tối ưu ảnh và nén file ảnh để giảm tải cho website

Nguyễn Trọng Nhân

1674

08-08-2019

Hình ảnh thường là một thành phần chiếm nhiều dung lượng trên website và các nội dung hình ảnh cũng gia tăng không ngừng mỗi ngày. Điều tối quan trọng là phải tối ưu ảnh hiệu quả để cải thiện hiệu suất website. Google coi hiệu suất là một yếu tố xếp hạng tín nhiệm cao vì điều này ảnh hưởng trực tiếp đến trải nghiệm người dùng.

Và thực tế Google vẫn thực hiện đo hiệu suất hình ảnh - công cụ PageSpeed Insights cho thấy thuật toán đo tốc độ hình ảnh của họ hiệu quả như thế nào. Có hai lý do chính đáng để bắt đầu tối ưu hình ảnh trong quy trình phát triển web ngay từ đầu - đó là thời gian tải trang và xếp hạng SERP.

Thay thế hình ảnh không cần thiết

Loại bỏ hình ảnh có thể chỉ đơn giản như việc đánh giá lại các bản chốt thiết kế. Một thiết kế đơn giản có thể có nhiều tác động hơn, gây ít nhiễu loạn thị giác hơn và giúp truyền tải thông điệp mà không làm người xem phân tâm. 

Dù vậy, sử dụng hiệu ứng hoặc đồ họa hình ảnh thường là yếu tố không thể thiếu trong thiết kế. Vậy liệu bạn có thể đạt được hiệu ứng tương tự mà không làm tăng dung lượng các tập tin hình ảnh? Bizfly Cloud sẽ đưa ra một số phương án thực hiện có thể cân nhắc:

Hình nền chỉ chứa CSS: 

Bạn thường có thể thay thế hình nền đơn giản bằng các họa tiết gradient hoặc CSS.

Sử dụng các hiệu ứng CSS: 

Đổ bóng, tạo sáng và tạo hiệu ứng trong suốt đều có thể thực hiện được trong CSS3. CSS3 thậm chí còn hỗ trợ các key-frame dạng hoạt hình mượt mà, do đó hiệu ứng ánh sáng đồ họa khi thiết kế có thể là không cần thiết.

Phông chữ Web dạng vectơ: 

Có nhiều phông chữ để lựa chọn, Google cung cấp nhiều phông chữ thiết kế và cơ bản miễn phí. Phông chữ web cho phép các nhà thiết kế sử dụng các kiểu chữ sáng tạo hơn mà không phải hiển thị văn bản dưới dạng hình ảnh. Trên thực tế, thậm chí còn có các phông chữ web dạng icon, chẳng hạn như FontAwesome, cung cấp hàng trăm biểu tượng chất lượng cao để sử dụng trên website của bạn.

Ưu tiên sử dụng hình ảnh dạng Vector

Bất cứ khi nào bạn xử lý các hình ảnh dạng hình học đơn giản, hình minh họa hai chiều hoặc hình ảnh với các vùng màu phẳng, hình ảnh vector là một lựa chọn tối ưu hơn cho các raster. 

Đồ họa vector SVG có thể nhỏ hơn nhiều so với bitmap, ngay cả trước khi nén. Không chỉ nhỏ hơn, chúng trông đẹp hơn nhiều trong định dạng thu nhỏ, vì về cơ bản chúng là các đường cong, nét và hình học, thay vì pixel. Vì vậy, chúng không có các cạnh lởm chởm, trong khi vẫn sắc nét và góc cạnh ở bất kỳ kích thước nào.

Đồ họa dạng vector được định nghĩa là các điểm và số - về cơ bản chúng là dữ liệu toán học. Định dạng SVG là một cách gọi XML, có nghĩa là định dạng dựa trên văn bản. Nó có thể được thu nhỏ và nén, giống như CSS và JavaScript.

Chọn đúng định dạng raster

Có ba định dạng tệp raster khác nhau khả dụng trên tất cả các trình duyệt. PNG, GIF và JPEG. Mỗi một định dạng phục vụ tối ưu cho một mục đích nhất định. PNG là lựa chọn phù hợp khi cần duy trì mức độ chi tiết cao. 

Định dạng này hoạt động tốt trên các mẫu phức tạp hoặc hình ảnh có các chi tiết phải được giữ nguyên, giống như chụp màn hình có chứa văn bản. Tuy nhiên, nếu hình ảnh chỉ là văn bản, việc sử dụng HTML sẽ có ý nghĩa hơn. Định dạng tiêu tốn ít băng thông hơn và cũng tiện hơn cho người dùng, khi họ có thể tìm kiếm, sao chép và dán văn bản. 

Xếp trước PNG, GIF là lựa chọn tốt nhất cho các hình ảnh non-photographic. Định dạng PNG cung cấp nhiều tính năng hơn GIF và có thể nhỏ hơn tới 25%. GIF chỉ tốt hơn khi bạn cần sử dụng hình ảnh hoạt họa. JPEG là lựa chọn lý tưởng cho các bức ảnh. Chúng sử dụng một thuật toán nén lossy đặc biệt để loại bỏ các chi tiết mà mắt người thường không thể nhìn thấy. Và chúng ta có thể tinh chỉnh thuật toán này để có kết quả tốt nhất.

Áp dụng độ phân giải phù hợp cho thiết bị phù hợp

Một trong những lỗi lớn nhất mà các nhà phát triển web tạo ra là tải một hình ảnh lớn và thu nhỏ nó trong CSS. Nếu hình ảnh được thu nhỏ lại một nửa kích thước ban đầu, điều đó có nghĩa là người dùng của bạn đã tải xuống một hình ảnh có chiều rộng và chiều cao gấp đôi cần thiết để hiển thị. Điều đó có nghĩa là tệp lớn hơn bốn lần so với mức cần thiết (2 x 2).

Một yếu tố khác cần xem xét là sức mạnh xử lý sẽ phải được sử dụng để chia tỷ lệ những hình ảnh này. Thu nhỏ có thể gây ra sự chậm trễ hiển thị một trang. Nó cũng có thể gây ra các nhiễu loạn hiển thị (trên một số phiên bản Android có những trục trặc đáng chú ý khi cuộn hoặc tạo hiệu ứng động một hình ảnh thu nhỏ). 

Khi một thiết bị di động tải xuống các tệp dành cho màn hình máy tính để bàn, nó thường sẽ tự động thu nhỏ chúng xuống. Với việc xuất nhiều phiên bản cho mỗi độ phân giải, bạn có thể phân phát đúng phiên bản cho thiết bị đích. Kỹ thuật hình ảnh tương thích cho phép tải các tệp hình ảnh khác nhau cho các kích thước màn hình khác nhau. Một số kỹ thuật hình ảnh tương thích:

Thuộc tính srcset trong thẻ <img> cho phép xác định các độ phân giải có thể có mà trình duyệt có thể chọn. Dưới đây là một ví dụ:

Hầu hết các trình duyệt web hiện đại đều hỗ trợ srcset, ngoại trừ IE và opera mini.

Lazy-loading với JavaScript. Lazy loading trì hoãn việc tải hình ảnh của một trang cho đến khi trang được hiển thị. Thường thì chúng không được tải cho đến khi người dùng cuộn màn hình đến điểm cần có hình ảnh. JavaScript có thể phát hiện kích thước của thiết bị và có thể tải độ phân giải hình ảnh chính xác. LazySizes là một thư viện JavaScript dung lượng khá nhẹ giúp dễ dàng thực hiện Lazy-loading.

Loại bỏ Metadata

Thông thường, các tệp hình ảnh chứa nhiều thông tin thừa thãi mà trình duyệt web không cần đến. Siêu dữ liệu trong tệp có thể bao gồm tất cả các loại rác, như dữ liệu địa lý và thông tin máy ảnh. Có các chương trình đơn giản để loại bỏ dữ liệu dư thừa này khỏi các tệp hình ảnh và các công cụ nén thông minh để làm cho các tệp thậm chí nhỏ hơn.

Nén file hình ảnh

Nén hình ảnh có thể làm cho hình ảnh của bạn nhẹ hơn nhiều mà không làm giảm chất lượng. Việc tối ưu hình ảnh sau khi thu nhỏ chúng là khá lý tưởng để ngăn chặn nhiễu loạn thị giác. Thông thường, tệp SVG có thể chứa metadata trong khi chỉnh sửa (như các layer, comment và các phần dư khác). 

Một trình tối ưu hóa SVG như svgo có thể loại bỏ dữ liệu thừa này. SVG là một cách gọi của XML, vì vậy tệp có thể chứa khoảng trắng không cần thiết. Thu nhỏ tệp sẽ loại bỏ khoảng trắng và các comment. Bạn có thể nén tệp đã thu nhỏ bằng cách bật nén Gzip trong cài đặt CDN hoặc trên máy chủ gốc của mình để làm cho nó nhỏ hơn nữa mà không làm mất bất kỳ dữ liệu nào. 

Đồ họa raster chứa dữ liệu cho mỗi pixel, được sắp xếp trong một grid. Mỗi pixel có bốn kênh riêng biệt: đỏ, xanh lá cây, xanh dương và alpha (trong suốt). Theo mặc định, mỗi kênh sử dụng 8 bit (một byte) cho tối đa 256 độ đỏ, lục, lam hoặc alpha. Đó là bốn byte cho mỗi pixel. Có thể điều chỉnh điều này, để sử dụng ít bit hơn trên mỗi kênh. Tất nhiên, điều đó có nghĩa là các biến đổi sẽ ít tinh tế hơn giữa các sắc thái trong ảnh. Thông thường, nó có thể giảm xuống còn 7 hoặc 5 bit mà không làm giảm chất lượng hình ảnh đến mức gây chú ý.

Thuật toán JPEG có một số cài đặt bạn có thể sử dụng để đạt kết quả tốt nhất. Hầu hết các trình chỉnh sửa hình ảnh cung cấp cho bạn một chuỗi các tùy chọn để chọn trên thanh trượt, nhưng có những tùy chọn nâng cao khác mà bạn có thể thử nghiệm. Bên cạnh việc thử các tùy chọn khác nhau trong hộp thoại nén, có các kỹ thuật chỉnh sửa hình ảnh nâng cao sẽ giúp tạo ra tệp nhỏ nhất có thể. Hình ảnh PNG có thể được indexed, có nghĩa là mỗi pixel sẽ có một màu từ bảng màu giới hạn. Nếu hình ảnh của bạn không có nhiều biến thể màu hoặc chỉ có một vài màu, thì index là một cách tuyệt vời để thu nhỏ tệp.

Theo Bizfly Cloud tổng hợp

>> Có thể bạn quan tâm: Top 6 công cụ giảm dung lượng ảnh mà vẫn giữ nguyên chất lượng hiển thị trên website