Các bức ảnh thường chiếm phần lớn dung lượng tải về trên trang web và cũng thường chiếm không gian thị giác đáng kể. Vì lý do đó, tối ưu hóa ảnh sẽ giúp giảm một lượng lớn dữ liệu và nâng cao hiệu năng, cải thiện tốc độ cho website của bạn:
Số lượng dữ liệu trình duyệt cần tải về càng ít thì có càng ít cạnh tranh cho băng thông của máy khách, thêm vào đó trình duyệt có thể tải và render nội dung hữu ích nhanh hơn trên màn hình.
Tối ưu hóa ảnh là sự kết hợp của cả nghệ thuật và khoa học: là nghệ thuật bởi vì không có một câu trả lời hoàn chỉnh cho việc tỉ lệ nén nào là tốt nhất cho từng ảnh cụ thể, và là khoa học bởi vì có nhiều kỹ thuật và thuật toán được phát triển tốt có thể giảm dung lượng ảnh đáng kể.
Để tìm ra thiết lập tối ưu cho các hình ảnh của bạn cần phân tích cẩn thận trên nhiều khía cạnh: định dạng có thể cung cấp, nội dung của dữ liệu mã hóa, chất lượng, kích thước tính ra pixel, và nhiều cái khác nữa.
Mục lục
- Loại bỏ và thay thế hình ảnh
- Ảnh Vector và Raster
- Tác động của màn hình có độ phân giải cao
- Tối ưu ảnh vector
- Tối ưu hóa ảnh raster
- Nén ảnh mất dữ liệu và không mất dữ liệu
- Lựa chọn đúng định dạng ảnh
- Các công cụ và điều chỉnh tham số
- Phân phối các ảnh thu nhỏ
- Danh sách kiểm tra tối ưu hóa hình ảnh
Loại bỏ và thay thế hình ảnh
- Loại bỏ các ảnh nguồn không cần thiết
- Tận dụng các hiệu ứng CSS3 khi có thể
- Sử dụng font web thay vì phải mã hóa văn bản lên hình ảnh
Câu hỏi đầu tiên mà bạn phải tự hỏi bản thân mình là một hình ảnh có thực sự là yêu cầu cần thiết để đạt được hiệu quả bạn trông đợi hay không. Thiết kế tốt thường là đơn giản và cũng đem lại hiệu suất tốt nhất.
Nếu bạn có thể loại bỏ ảnh, cái thường yêu cầu lượng lớn byte dữ liệu khi so sánh với HTML, CSS, JavaScript và các thành phần khác trên trang, điều đấy luôn là chiến lược tối ưu hóa tốt nhất.
Nhưng cũng cần phải nói, một hình ảnh đẹp ở đúng chỗ có thể truyền đạt được nhiều thông tin hơn cả một ngàn từ, vì vậy điều đó tùy thuộc vào bạn để tìm ra được điểm cân bằng.
Tiếp theo, bạn phải xem xét nếu có công nghệ thay thế có thể đem lại kết quả như mong muốn, nhưng theo cách hiệu quả hơn:
- Các hiệu ứng CSS (gradients, đổ bóng, vân vân) và hiệu ứng động của CSS có thể hữu ích trong việc tạo ra các sản phẩm độc lập với độ phân giải, nó luôn luôn trông sắc nét (sharp) ở mọi độ phân giải và mức độ phóng to (zoom level), thường là một phân mảnh của dữ liệu yêu cầu bởi file ảnh.
- Web fonts cho phép sử dụng các kiểu font đẹp mắt trong khi vẫn giữ được khả năng chọn lựa, tìm kiếm và thay đổi kích cỡ văn bản – cái cải thiện đáng kể tính khả dụng.
Nếu bạn từng thấy bản thân mã hóa văn bản trên ảnh, hãy dừng và xem xét lại. Typography đẹp là yếu tố quan trọng cho thiết kế, thương hiệu, và khả năng đọc tốt, nhưng văn bản nằm đông cứng trên hình tạo ra trải nghiệm người dùng nghèo nàn: văn bản không thể được lựa chọn, không thể tìm kiếm, không thể phóng to, không tiện dụng và thân thiện cho thiết bị có độ phân giải cao (hight-DPI devices). Việc sử dụng font chữ web yêu cầu thiết lập tối ưu hóa riêng, nhưng nó giải quyết tất cả các lo ngại này và luôn là lựa chọn tốt hơn để hiển thị văn bản.
Ảnh Vector và Raster
- Ảnh vector là lý tưởng cho các ảnh chứa các hình dạng hình học (geometric shapes)
- Ảnh vector có khả năng phóng to và không phụ thuộc độ phân giải
- Ảnh raster nên sử dụng cho cảnh phức tạp với nhiều hình dạng bất thường và chi tiết cao
Một khi bạn đã xác định được ảnh là gì, trong thực tế cần tối ưu hóa định dạng để nhận được hiệu ứng mong muốn, lựa chọn quan trọng tiếp theo là chọn định dạng thích hợp:
- Ảnh vector sử dụng các đường thẳng, điểm và các hình đa giác để đại diện cho hình ảnh.
- Ảnh raster đại diện cho ảnh được mã hóa riêng giá trị của từng pixel với lưới chữ nhật.
Mỗi định dạng có những điểm mạnh và yếu riêng. Định dạng vector thích hợp lý tưởng cho các hình ảnh bao gồm các hình dạng hình học đơn giản (lấy thí dụ như logos, văn bản, icons và các loại khác), và kết quả là độ sắc nét không bị suy chuyển tại bất cứ độ phân giải và mức độ phóng to nào, cái giúp chúng trở thành định dạng lý tưởng cho màn hình độ phân giải cao và các thành phần cần hiển thị trên nhiều kích cỡ khác nhau.
Tuy nhiên, định dạng vector không thích hợp khi cảnh phức tạp (lấy thí dụ ảnh chụp): số lượng đánh dấu SVG dùng để mô tả tất cả các khối có thể cao khủng khiếp và đầu ra có thể trông vẫn không giống “ảnh thực / photorealistic“. Trong trường hợp đó, bạn nên sử dụng ảnh định dạng raster như GIF, PNG, JPEG hoặc một định dạng mới hơn như JPEG-XR và WebP.
Ảnh raster không có thuộc tính hấp dẫn như ảnh vector, đấy là độ phân giải và thu phóng độc lập – khi bạn phóng to ảnh raster bạn sẽ thấy hình đồ họa bị rách và mờ vỡ (jagged and blurry). Vì lý do đó, bạn có thể cần lưu nhiều phiên bản của ảnh raster ở các độ phân giải màn hình khác nhau để tạo ra trải nghiệm tối ưu cho người dùng (WordPress thường chủ động làm điều này, khi bạn up một ảnh lớn lên nó sẽ tạo ra nhiều phiên bản ảnh nhỏ hơn cho các kích cỡ màn hình bé để hiển thị tối ưu dung lượng).
Tác động của màn hình có độ phân giải cao
- Màn hình độ phân giải cao có nhiều pixel của thiết bị trên mỗi pixel CSS
- Hình ảnh có độ phân giải cao yêu cầu số lượng pixel và bytes cao hơn đáng kể
- Kỹ thuật tối ưu hóa ảnh là như nhau bất kể độ phân giải
Khi chúng ta nói về ảnh pixel, chúng ta cần phân biệt giữa các loại điểm ảnh khác nhau: CSS pixel và pixel của thiết bị. Một pixel CSS riêng có thể bao gồm nhiều pixel thiết bị – lấy thí dụ, pixel CSS riêng có thể tương ứng trực tiếp (correspond directly) với một điểm ảnh thiết bị, hoặc có thể được hỗ trợ bởi nhiều điểm ảnh của thiết bị. Vậy vấn đề ở đây là gì? Vâng, càng nhiều điểm ảnh thiết bị có, các chi tiết hiển thị nội dung tốt hơn trên màn hình.
Màn hình độ phân giải cao (HiDPI) tạo ra kết quả trông đẹp hơn, nhưng có một sự đánh đổi rõ ràng: hình ảnh của chúng ta cần nhiều chi tiết hơn để tận dụng lợi thế của thiết bị có số lượng pixel cao hơn. Tin tốt là, ảnh vector hoàn toàn lý tưởng cho nhiệm vụ này, khi chúng có thể xuất ra bất cứ độ phân giải nào mà ảnh vẫn sắc nét – chúng ta có thể phải chịu chi phí xử lý cao hơn để xuất chi tiết ảnh có chi tiết tốt hơn, nhưng ảnh cơ bản vẫn vậy và không bị phụ thuộc vào độ phân giải.
Tuy nhiên ngược lại, các ảnh raster đặt ra thử thách lớn hơn, bởi vì chúng mã hóa dữ liệu ảnh dựa trên từng pixel cơ bản. Vì thế, số lượng pixel lớn hơn, dung lượng cho ảnh raster cũng lớn hơn. Lấy thí dụ, hãy xem xét sự khác biệt giữa các bức hình hiển thị ở 100 x 100 (CSS) pixel:
| Độ phân giải màn hình | Tổng số pixel | File chưa nén (4 byte mỗi pixel) |
| 1x | 100 x 100 = 10 000 | 40 000 bytes |
| 2x | 100 x 100 x 4 = 40 000 | 160 000 bytes |
| 3x | 100 x 100 x 9 = 90 000 | 360 000 bytes |
Khi độ phân giải của màn hình vật lý tăng gấp đôi, tổng số lượng pixel sẽ tăng gấp bốn: nhân đôi số lượng pixel theo chiều rộng, cũng là gấp đôi số lượng pixel theo chiều cao. Vì vậy, màn hình gấp đôi không chỉ là nhân hai, số lượng pixel yêu cầu là gấp bốn lần!
Vậy thì điều này có ý nghĩa gì trong thực tế? Màn hình độ phân giải
cao cho phép chúng ta tạo ra các ảnh đẹp hơn, cái có thể là tính năng
quan trọng của sản phẩm. Dầu vậy, màn hình độ phân giải cao cũng yêu cầu
ảnh có độ phân giải cao: lựa chọn ảnh vector bất cứ khi nào có thể để
chúng độc lập với độ phân giải màn hình và luôn luôn tạo ra ảnh sắc nét,
và nếu yêu cầu ảnh raster, tạo và tối ưu đa dạng kích cỡ ảnh với sự
giúp đỡ của srcset và picture.
Tối ưu ảnh vector
- SVG là định dạng ảnh dựa trên XML
- File SVG nên được tối giản để giảm kích cỡ
- File SVG nên được nén bằng GZIP
Tất cả các trình duyệt hiện đại điều hỗ trợ ảnh Scalable Vector Graphics (SVG), là định dạng ảnh dựa trên XML với hai khía cạnh đồ họa: chúng ta có thể nhúng mã đánh dấu SVG trực tiếp trên trang, hoặc như một nguồn bên ngoài. Ngược lại, một file SVG có thể tạo bởi hầu hết các phần mềm vẽ vector, hoặc thủ công và trực tiếp bởi phần mềm soạn thảo ưa thích của bạn.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>Ví dụ trên render một hình tròn đơn giản với màu đường viền là màu đen và màu đỏ cho background và nó được xuất ra từ Adobe Illustrator. Như bạn có thể thấy, nó bao gồm rất nhiều siêu dữ liệu (metadata), như thông tin layer, comments, và không gian tên XML, đây là những cái thường không cần thiết để render trong trình duyệt. Vì vậy, sẽ luôn luôn là ý tưởng tốt để giảm thiểu (minify) file SVG của bạn thông qua công cụ kiểu như svgo.
Trong ví dụ trên, svgo giảm kích cỡ của file SVG được tạo ra bởi Illustrator tới 58%, giảm nó từ 470 xuống còn 199 bytes. Hơn nữa, bởi vì SVG là định dạng dựa trên XML, chúng ta cũng có thể áp dụng nén GZIP để giảm dung lượng truyền tải – hãy chắc chắn máy chủ của bạn được cấu hình để có khả năng nén SVG.
Tối ưu hóa ảnh raster
- Ảnh raster là một dạng lưới các pixels (grid of pixels)
- Mỗi pixel được mã hóa thông tin màu sắc và thuộc tính trong suốt
- Các bộ nén ảnh sử dụng đa dạng các kỹ thuật để giảm số lượng bít yêu cầu cho mỗi pixel để từ đấy giảm dung lượng của cả bức hình
Một ảnh raster đơn giản là lưới 2 chiều của từng “pixels” cụ thể – lấy thí dụ, một ảnh 100 x 100 pixel là chuỗi (sequence) của 10 000 pixel. Ngược lại, mỗi pixel chứa các giá trị RGBA: (R) kênh màu đỏ, (G) kênh màu xanh lá, (B) kênh màu xanh da trời, và (A) kênh alpha (thuộc tính trong suốt).
Bên trong, trình duyệt phân bổ (allocates) 256 giá trị (sắc thái) cho mỗi kênh, cái này sẽ được chuyển dịch sang dạng 8 bít cho mỗi kênh (2 ^ 8 = 256), và 4 byte cho mỗi pixel (4 kênh x 8 bít/kênh = 32 bít/pixel = 4 byte/pixel). Vì lý do đó, nếu chúng ta biết độ phân giải của lưới chúng ta có thể dễ dàng tính toán kích thước file:
- Ảnh 100 x 100px gồm có 10 000 pixel
- 10 000 pixel x 4 bytes = 40 000 bytes
- 40 000 bytes / 1024 = 39 KB
Lưu ý: cho dù định dạng ảnh sử dụng là gì đi chăng nữa khi dùng vào việc truyền tải dữ liệu từ máy chủ tới máy khách, khi ảnh được giải mã bởi trình duyệt, mỗi pixel luôn luôn chiếm 4 bytes của bộ nhớ. Điều này có thể là hạn chế quan trọng cho các bức ảnh lớn và các thiết bị không có khả năng cung cấp bộ nhớ cao – lấy thí dụ như các thiết bị điện thoại cấp thấp (low-end mobile device).
| Độ phân giải | Pixel | Kích cỡ file |
| 100 x 100 | 10 000 | 39 KB |
| 200 x 200 | 40 000 | 156 KB |
| 300 x 300 | 90 000 | 351 KB |
| 500 x 500 | 250 000 | 977 KB |
| 800 x 800 | 640 000 | 2500 KB |
39KB cho ảnh có độ phân giải 100 x 100 pixel có vẻ như không phải là vấn đề lớn, nhưng kích cỡ file tăng nhanh chóng với các hình lớn hơn và làm thành phần ảnh trở nên chậm và đắt đỏ hơn để tải về (nếu bạn nào dùng 3G để truy cập Internet sẽ hiểu giá tiền không rẻ). Thật may mắn, những gì chúng ta vừa mô tả là định dạng ảnh “chưa được nén”. Chúng ta có thể làm gì để giảm kích cỡ file ảnh?
Một chiến lược đơn giản là giảm “độ sâu bít” của ảnh từ 8 bít mỗi kênh xuống bảng màu nhỏ hơn: 8 bít mỗi kênh cho ta 256 giá trị mỗi kênh và 16 777 216 màu sắc tất cả. Nếu chúng ta giảm bảng màu xuống còn 256 màu thì sao? Thế thì chúng ta sẽ chỉ cần 8 bít tất cả cho kênh RGB và ngay lập tức tiết kiệm được hai byte cho mỗi pixel – tức là 50% giá trị nén tiết kiệm so với định dạng gốc có 4 byte.
Lưu ý: từ trái qua phải (PNG): 32-bít (16 triệu màu), 7-bít (128 màu), 5-bít (32 màu). Các cảnh phức tạp với màu sắc chuyển đổi (gradients, bầu trời, vân vân) yêu cầu bảng màu lớn để tránh cảnh không tự nhiên (visual artifacts) như các pixel hình ảnh bầu trời ở dạng 5 bít. Nói cách khác, nếu ảnh chỉ sử dụng vài màu, thì bảng màu lớn đơn giản là đang phí phạm những bít quý giá!
Tiếp theo, một khi chúng ta đã tối ưu hóa dữ liệu lưu trong từng pixel cụ thể, chúng ta có thể thông minh hơn và chú ý vào các pixels gần đó: hóa ra, rất nhiều bức ảnh, và đặc biệt là ảnh chụp, các pixel gần kề có màu tương tự nhau – lấy thí dụ, bầu trời là lặp lại kết cấu. Sử dụng thông tin này để trình nén có thể áp dụng lợi thế “mã hõa delta” thay vì lưu giữ từng giá trị cụ thể cho mỗi pixel, chúng ta có thể lưu trữ sự khác biệt giữa các pixel kề nhau: nếu các pixel liền kề giống y nhau, thì delta là “zero”, và chúng ta chỉ cần lưu duy nhất một bít! Nhưng tại sao lại chỉ dừng ở đây thôi…
Mắt người có mức độ nhạy cảm khác nhau với các màu khác nhau: chúng ta có thể tối ưu việc mã hóa màu sắc để dung lượng cho nó giảm xuống hoặc tăng lên cho từng màu. Các pixel “kế cận” có mẫu là lưới hai chiều, nghĩa là mỗi pixel có nhiều hàng xóm: chúng ta có thể sử dụng thực tế này để nâng cao khả năng mã hóa delta. Thay vì nhìn vào ngay lập tức những người hàng xóm của mỗi pixel, chúng ta có thể nhìn vào các khối lớn hơn của pixel kế cận và mã hóa các khối khác nhau với các thiết lập khác nhau. Và cứ tiếp tục như vậy…
Bạn có thể nói, tối ưu hóa ảnh ngày càng phức tạp (hoặc ở khía cạnh hài hước, phụ thuộc vào quan điểm của bạn), và đây là lĩnh vực hoạt động của học thuật và nghiên cứu thương mại. Các bức hình chiếm nhiều dữ liệu, do vậy sẽ rất đáng giá nếu phát triển được các kỹ thuật nén ảnh tốt hơn! Trong trường hợp bạn đang tò mò, hãy đi đến trang này trên Wikipedia, hoặc kiểm tra các kỹ thuật nén ảnh WebP để tìm kiếm các ví dụ thực hành.
Vì thế, một lần nữa, tất cả chúng đều tuyệt vời, nhưng cũng rất hàn lâm: làm thế nào nó giúp chúng ta tối ưu các ảnh trên trang web? Đúng vậy, chúng ta chắc chắn không có nhiệm vụ sáng tạo ra các kỹ thuật nén mới, nhưng điều quan trọng là hiểu các vấn đề liên quan: các pixel RGBA, độ sâu của bít, và nhiều kỹ thuật tối ưu khác nhau. Tất cả các ý tưởng này rất quan trọng để hiểu và giữ trong đầu trước khi chúng ta đi sâu vào thảo luận các định dạng ảnh raster khác nhau.
Nén ảnh mất dữ liệu và không mất dữ liệu
- Do cách thức làm việc của mắt, ảnh là ứng viên tuyệt vời cho nén ảnh mất dữ liệu
- Nén ảnh có hai kiểu là mất dữ liệu và không mất dữ liệu
- Sự khác biệt trong định dạng ảnh là lý do dẫn đến sự khác biệt trong cách các thuật toán mất và không mất dữ liệu được sử dụng để tối ưu hóa ảnh
- Không có định dạng duy nhất nào tốt nhất hoặc “thiết lập chất lượng” cho tất cả các ảnh: mỗi sự kết hợp giữa các kiểu nén cụ thể và nội dung ảnh tạo ra một đầu ra duy nhất
Đối với một số loại dữ liệu nhất định, như kiểu mã nguồn của trang, hoặc một tệp tin thực thi, điều quan trọng là nén không được thay đổi hoặc mất bất kỳ thông tin gốc nào: chỉ cần một bít dữ liệu bị mất hoặc sai có thể thay đổi toàn bộ ý nghĩa của nội dung hoặc tệ hơn, phá vỡ nó hoàn toàn. Với một số định dạng dữ liệu khác, như ảnh, âm thanh và video, nó có thể vẫn được chấp nhận hoàn toàn khi phân phối đại diện “gần đúng” của dữ liệu gốc ban đầu.
Trong thực tế, do cách thức làm việc của mắt, chúng ta có thể loại bỏ một số thông tin của mỗi pixel để giảm dung lượng kích cỡ ảnh – lấy ví dụ, mắt của chúng ta có mức độ nhạy cảm khác nhau với các màu khác nhau, điều đấy có nghĩa là chúng ta có thể sử dụng số lượng bít ít hơn để mã hóa một số màu sắc. Vì vậy, chương trình tối ưu hóa ảnh thông thường bao gồm hai bước tối ưu:
- Ảnh được xử lý lọc “mất dữ liệu” nghĩa là loại bỏ một số dữ liệu pixel
- Ảnh được xử lý lọc “không mất dữ liệu” để nén các dữ liệu của pixel
Bước đầu tiên là tùy chọn, và thuật toán chính xác sẽ phụ thuộc vào định dạng ảnh cụ thể, nhưng điều quan trọng cần hiểu là bất kỳ ảnh nào cũng có thể trải qua bước nén mất dữ liệu để giảm dung lượng. Trong thực tế, sự khác biệt giữa nhiều định dạng ảnh, như GIF, PNG, JPEG và các loại khác, là sự kết hợp của các thuật toán cụ thể chúng sử dụng (hoặc bỏ qua) khi áp dụng các bước nén mất dữ liệu và không mất dữ liệu.
Vì vậy, đâu là tùy chỉnh “tối ưu” cho việc tối ưu hóa mất dữ liệu và không mất dữ liệu? Câu trả lời phụ thuộc vào nội dung bức ảnh và tiêu chuẩn riêng của bạn về sự đánh đổi giữa kích cỡ file và sự mất tự nhiên do nén mất dữ liệu gây ra:
Trong một số trường hợp bạn có thể muốn bỏ qua tối ưu mất dữ liệu để truyền đạt các chi tiết phức tạp để có được sự trung thực đầy đủ của nó, và trong trường hợp khác bạn có thể muốn áp dụng tối ưu hóa mất dữ liệu tăng cường để giảm dung lượng file ảnh xuống. Đây là phần mà bạn cần phán đoán và sử dụng tùy theo nhu cầu bối cảnh – không có thiết lập nào là chung cho tất cả.
Như là ví dụ thực hành, khi sử dụng định dạng mất dữ liệu cho JPEG, chương trình nén sẽ thường trưng ra tùy chọn thiết lập “chất lượng” (lấy thí dụ, thanh chất lượng đưa ra chức năng “Save for Web” trong Adobe Photoshop), thường là một số nằm giữa 1 và 100, được dùng để điều chỉnh hoạt động bên trong của các nhóm thuật toán mất và không mất dữ liệu cụ thể. Để có được kết quả tốt nhất, thử nghiệm với vài thiết lập chất lượng cho ảnh của bạn, và đừng lo lắng chất lượng sẽ bị suy giảm – thực tế chất lượng hình ảnh thường vẫn rất tốt và dung lượng thì tiết kiệm được khá nhiều.
Lưu ý: mức độ chất lượng cho các định dạng ảnh khác nhau không trực tiếp so sánh được vì sự khác biệt trong thuật toán sử dụng để mã hóa ảnh: chất lượng 90 cho JPEG sẽ tạo ra kết quả rất khác biệt so với chất lượng 90 của WebP. Trong thực tế, ngay cả cùng mức độ chất lượng cho cùng bức ảnh vẫn có thể tạo ra ảnh đầu ra trông khác nhau khi sử dụng công cụ nén!
Lựa chọn đúng định dạng ảnh
- Bắt đầu bằng việc lựa chọn đúng định dạng ảnh tổng thể: GIF, PNG, JPEG
- Thử nghiệm và lựa chọn thiết lập tốt nhất cho mỗi định dạng: chất lượng, kích cỡ bảng màu, vân vân
- Xem xét việc bổ sung định dạng WebP và JPEG XR cho những khách hàng hiện đại
Ngoài các thuật toán nén mất dữ liệu và không mất dữ liệu khác nhau, các định dạng ảnh khác nhau hỗ trợ các tính năng khác nhau như ảnh động và thuộc tính trong suốt (kênh alpha). Vì lý do đó, lựa chọn được “định dạng chính xác” cho bức ảnh cụ thể là sự kết hợp của kết quả đồ họa mà bạn mong muốn và các chức năng cần thiết.
| Định dạng | Trong suốt | Ảnh động | Trình duyệt |
| GIF | Có | Có | Tất cả |
| PNG | Có | Không | Tất cả |
| JPEG | Không | Không | Tất cả |
| JPEG XR | Có | Có | IE |
| WebP | Có | Có | Chrome, Opera, Android (*) |
(*): Cập nhật 2019, hiện trình duyệt Firefox và Edge Microsoft đã hỗ trợ WebP trên phiên bản máy bàn.
Có ba định dạng ảnh được hỗ trợ phổ biến: GIF, PNG và JPEG. Ngoài các định dạng này, một số trình duyệt cũng hỗ trợ các định dạng mới hơn như WebP và JPEG XR, những định dạng nhìn chung có khả năng nén tốt hơn và có nhiều tính năng hơn. Vậy thì, định dạng nào bạn nên sử dụng?
A. Bạn cần ảnh động? Nếu vậy, GIF là lựa chọn tổng thể duy nhất.
GIF giới hạn bảng màu (color palette) tối đa 256 màu, điều đấy làm cho nó là lựa chọn nghèo nàn cho hầu hết các bức hình. Thêm nữa, định dạng ảnh PNG-8 tạo ra hệ số nén tốt hơn cho ảnh có bảng màu nhỏ. Vì lý do đó, GIF là câu trả lời đúng duy nhất khi bạn cần ảnh động.
B. Bạn cần bảo quản chi tiết tốt với độ phân giải cao nhất? Sử dụng PNG.
- PNG không sử dụng thuật toán nén mất dữ liệu nằm ngoài sự lựa chọn kích cỡ của bảng màu. Vì lý do đó, nó sẽ tạo ra ảnh chất lượng cao nhất, nhưng cái giá phải trả là kích cỡ file cao hơn đáng kể so với các định dạng khác. Hãy khôn ngoan.
- Nếu nội dung ảnh chứa các hình dạng hình học, xem xét việc chuyển đổi nó sang định dạng vector (SVG)!
- Nếu ảnh bao gồm văn bản, dừng lại và xem xét. Văn bản trên ảnh không có khả năng lựa chọn, tìm kiếm cũng như phóng to được. Nếu bạn cần sử dụng nó cho mục đích đồ họa tùy chỉnh (vì lý do thương hiệu hoặc các lý do khác), sử dụng web font để thay thế.
C. Nếu bạn tối ưu ảnh chụp, chụp màn hình hoặc các ảnh tương tự? Sử dụng JPEG.
JPEG là sự kết hợp giữa việc tối ưu mất dữ liệu và không mất dữ liệu để giảm dung lượng file của ảnh. Hãy thử vài mức độ chất lượng JPEG để tìm ra mức độ đánh đổi tốt nhất giữa chất lượng & dung lượng cho bức hình của bạn.
Cuối cùng khi bạn đã xác định được định dạng ảnh tối ưu và thiết lập được nó cho các bức hình, xem xét việc bổ sung thêm các dạng mã hóa khác như WebP và JPEG XR. Cả hai định dạng này đều mới và không may là hiện vẫn chưa được hỗ trợ toàn bộ bởi tất cả các trình duyệt, nhưng chúng dù sao có thể tiết kiệm đáng kể cho người dùng mới – lấy thí dụ, tính theo trung bình, WebP tạo ra file có dung lượng giảm 30% so với cùng ảnh JPEG.
Vì cả WebP và JPEG XR hiện đều không được hỗ trợ bởi tất cả các trình duyệt, bạn sẽ cần thêm logic bổ sung cho ứng dụng hoặc máy chủ của bạn để phục vụ các nguồn lực thích hợp:
- Một số dịch vụ CDN (mạng phân phối nội dung) cung cấp tối ưu hóa ảnh như một phần dịch vụ của họ, bao gồm cả việc phân phối JPEG XR và WebP (ví dụ Cloudflare).
- Một số công cụ nguồn mở (lấy ví dụ như PageSpeed cho Apache hoặc Ngnix) tự động tối ưu, chuyển đổi và phục vụ các thành phần thích hợp.
- Bạn có thể thêm các ứng dụng logic bổ sung để phát hiện máy khách, kiểm tra xem định dạng nào họ hỗ trợ, và phục vụ định dạng ảnh tốt nhất có thể.
Cuối cùng, lưu ý là nếu bạn sử dụng Webview để hiển thị nội dung trong ứng dụng gốc của mình, thì bạn có thể toàn quyền điều khiển máy khách và có thể chỉ cần sử dụng WebP! Facebook, Google+ và nhiều ứng dụng khác sử dụng WebP để phân phối hình ảnh của họ trong các ứng dụng tương ứng – dung lượng tiết kiệm được chắc chắn có giá trị của nó. Để biết thêm về WebP, hãy xem Video WebP: Triển khai hình ảnh nhanh hơn, dung lượng nhỏ hơn và đẹp hơn được trình bày từ Google I/O 2013.
Các công cụ và điều chỉnh tham số
Không có định dạng ảnh, công cụ hoặc một thiết lập thông số tối ưu nào hoàn hảo áp dụng cho tất cả các bức hình. Để có kết quả tốt nhất bạn chọn lấy một định dạng và thiết lập nó phụ thuộc vào nội dung của bức hình, và chất lượng hình cũng như các kỹ thuật yêu cầu khác.
| Công cụ | Mô tả |
| gifsicle | tạo và tối ưu hóa ảnh GIF |
| jpegtran | tối ưu hóa ảnh JPEG |
| optipng | tối ưu không mất dữ liệu với ảnh PNG |
| pngquant | tối ưu mất dữ liệu với ảnh PNG |
Đừng lo sợ thử nghiệm với các thông số của mỗi trình nén. Thử giảm chất lượng, xem nó trông như thế nào, sau đó bỏ đi làm lại từ đầu. Một khi bạn tìm được nhóm thiết lập tốt, bạn có thể áp dụng chúng lên các bức hình tương tự khác trên trang của bạn, nhưng đừng mong chờ tất cả bức hình phải được nén với cùng thiết lập.
P/S: Nếu bạn dùng WordPress, cách đơn giản nhất để tối ưu hóa là sử dụng các plugin nén ảnh tự động. Các plugin đó đều cố gắng sử dụng các công nghệ nén tốt nhất, trong đó có một số công cụ vừa đề cập ở trên.
Phân phối các ảnh thu nhỏ
- Phân phối các ảnh thu nhỏ là một trong các cách tối ưu đơn giản và hiệu quả nhất
- Hãy chú ý hơn vào các ảnh dung lượng lớn khi ảnh hưởng của chúng thường cao
- Giảm số lượng pixel không cần thiết bằng cách sao chép các ảnh theo kích cỡ hiển thị của nó
Tối ưu hóa ảnh rút ngắn xuống hai thuộc tính: tối ưu hóa số lượng byte được dùng để mã hóa mỗi pixel của ảnh và tối ưu hóa tổng lượng pixel: dung lượng của ảnh đơn giản là tổng số lượng pixel nhân với tổng số byte được dùng đễ mã hóa mỗi pixel. Không hơn, không kém.
Vì lý do đấy, một trong các kỹ thuật đơn giản và hiệu quả nhất để tối ưu hóa ảnh là đảm bảo chúng ta không tải nhiều pixel hơn cần thiết để hiển thị ảnh trên kích thước biết trước của trình duyệt. Nghe đơn giản phải không? Không may là hầu hết các trang đều thất bại trong bài kiểm tra có nhiều ảnh: thông thường, họ chuyển tải bức ảnh lớn hơn và dựa vào trình duyệt để thay đổi kích cỡ của chúng – điều này cũng làm tiêu thụ thêm CPU – và hiển thị chúng ở độ phân giải thấp hơn.
Lưu ý: đưa con trỏ chuột hover qua thành phần ảnh trong Chrome DevTools sẽ tiết lộ cả kích cỡ “hiển thị” và kích cỡ “tự nhiên” của ảnh. Trong ví dụ trên ảnh có kích cỡ 300 x 260 pixel được tải về nhưng sau đó được giảm tỷ lệ xuống 245 x 212 cho người dùng khi được hiển thị.
Khi bạn tải về Pixel dư thừa không cần thiết, rồi sau đó để trình duyệt thay đổi kích thước ảnh thay mặt chúng ta, là đánh mất cơ hội lớn để giảm và tối ưu tổng lượng bytes cần thiết để render trang. Thêm vào đó, lưu ý là thay đổi kích thước không đơn giản là chức năng của số lượng pixel mà hình ảnh được giảm bớt, mà còn là kích thước tự nhiên của nó.
| Độ phân giải màn hình | Kích cỡ tự nhiên | Size hiển thị (CSS px) | Pixel không cần thiết |
| 1x | 110 x 110 | 100 x 100 | 110 x 110 – 100 x 100 = 2100 |
| 1x | 410 x 410 | 400 x 400 | 410 x 410 – 400 x 400 = 8100 |
| 1x | 810 x 810 | 800 x 800 | 810 x 810 – 800 x 800 = 16 100 |
| 2x | 220 x 220 | 100 x 100 | 210 x 210 – (2 x 100) x (2 x 100) = 8400 |
| 2x | 820 x 820 | 400 x 400 | 820 x 820 – (2 x 400) x (2 x 400) = 32400 |
| 2x | 1620 x 1620 | 800 x 800 | 1620 x 1620 – (2 x 800) x (2 x 800) = 64400 |
Lưu ý là trong tất cả các trường hợp ở trên, kích thước hiển thị “chỉ 10 pixel CSS nhỏ hơn” so với ảnh yêu cầu cho mỗi độ phân giải màn hình. Dầu vậy, số lượng pixels tăng thêm và các chi phí liên quan tăng lên nhanh chóng khi kích thước hiển thị của hình ảnh tăng!
Vì lý do đó, trong khi bạn có thể không đảm bảo được mỗi ảnh sẽ được phân phối chính xác kích cỡ hiển thị, bạn phải đảm bảo số lượng pixel không cần thiết là tối thiểu, và các ảnh lớn cụ thể của bạn cần phân phối gần nhất có thể với kích cỡ hiển thị.
Danh sách kiểm tra tối ưu hóa hình ảnh
Một số mẹo và kỹ thuật bạn cần ghi nhớ khi làm công việc tối ưu hóa hình ảnh:
- Ưa tiên định dạng vector: ảnh vector là độc lập với độ phân giải và tỉ lệ thu phóng, điều này làm cho chúng khớp hoàn hảo với thế giới đa thiết bị và độ phân giải cao.
- Tối giản hóa và nén định dạng SVG: mã đánh dấu XML tạo ra bởi hầu hết các ứng dụng vẽ thường bao gồm các siêu dữ liệu không cần thiết – cái có thể loại bỏ; hãy đảm bảo rằng máy chủ của bạn được cấu hình để áp dụng nén GZIP cho ảnh SVG.
- Chọn lấy định dạng raster tốt nhất: xác định yêu cầu chức năng của bạn và chọn lấy một cái phù hợp với từng loại cụ thể.
- Thử nghiệm với thiết lập chất lượng tối ưu cho định dạng raster: đừng sợ hãi với cài đặt suy giảm “chất lượng”, các kết quả thường rất tốt và số lượng byte tiết kiệm được là đáng kể.
- Loại bỏ các siêu dữ liệu không cần thiết của ảnh: nhiều ảnh raster bao gồm siêu dữ liệu không cần thiết về ảnh: thông tin địa lý, thông tin máy chụp ảnh và nhiều thứ khác. Sử dụng công cụ thích hợp để loại bỏ dữ liệu này.
- Phục vụ hình ảnh thu nhỏ: thay đổi kích cỡ các ảnh trên máy chủ và đảm bảo rằng kích cỡ “hiển thị” gần nhất có thể với kích cỡ “tự nhiên” của ảnh. Hãy đặt sự chú ý vào các ảnh lớn cụ thể, bởi vì chúng chiếm chi phí lớn nhất khi thay đổi kích thước!
- Tự động hóa, tự động hóa, tự động hóa: Đầu tư vào các thiết bị và cơ sở hạ tầng tự động sẽ đảm bảo cho tất cả hình ảnh của bạn luôn luôn được tối ưu.
(Dịch từ bài viết Image Optimization – Web Fundamentals – tác giả: Ilya Grigorik – Google)
