Select Page

Image optimization- Kỹ thuật tối ưu hóa hình ảnh

Image optimization- Kỹ thuật tối ưu hóa hình ảnh

Image Optimization là kỹ thuật tối ưu hóa hình ảnh trên website. Chúng ta đều biết rằng hình ảnh đóng một vai trò quan trọng trong các post, nhằm truyền tải thông tin đến người đọc nhanh chóng và dễ dàng hơn. Hình ảnh chiếm một lượng Byte khá lớn đến web của chúng ta, nếu không tối ưu hóa hình ảnh làm tăng sức nặng của dữ liệu khiến máy chủ quá tải, và hậu quả thì khỏi phải bàn.

Tuy nhiên, image optimization là một kỹ thuật đòi hỏi chúng ta phải am hiểu và xử lý khoa học. Bởi hiện tại, tối ưu hóa hình ảnh không dứt khoát về cách nén là tốt nhất vì có rất nhiều kỹ thuật và thuật toán phát triển tốt giảm đáng kể kích thước của một hình ảnh. Tối ưu cho hình ảnh yêu cầu phân tích cẩn thận theo nhiều hướng rộng hơn: khả năng định dạng, nội dung dữ liệu được mã hóa, chất lượng, kích thước pixel và hơn thế nữa.

Image Optimization là gì?

Phần lớn dữ liệu của trang web thường bao gồm hình ảnh. Tối ưu hóa hình ảnh của trang web sẽ làm sáng các trang, giảm thời gian tải và giảm bớt gánh nặng của tài nguyên mạng, bao gồm cả việc sử dụng dữ liệu trong trường hợp các kế hoạch trên phiên bản di động.

Tối ưu hóa hình ảnh cũng có thể tối ưu công cụ tìm kiếm (SEO) , vì các công cụ tìm kiếm có yêu cầu về tốc độ tải trang khi xếp hạng các trang web. Kết quả là tiết kiệm dung lượng và băng thông, tăng trải nghiệm người dùng và tăng khả năng hiển thị trang web.

Các phương pháp tối ưu hóa hình ảnh

Loại bỏ và thay thế hình ảnh

Là phương pháp loại bỏ các hình ảnh không cần thiết, không cần thiết nghĩa là sao? Một hình ảnh truyền thông điệp đến người dùng có cần quá cầu kỳ và tốn dung lượng? Thiết kế đơn giản là xu hướng tối ưu hóa hình ảnh hiện nay và mang lại hiệu suất tốt hơn.

Nếu chúng ta có thể image optimization bằng thay thế và loại bỏ các hình ảnh này, chúng ta sẽ tiết kiệm một lượng lớn byte cho máy chủ. Bởi các tài nguyên image thường liên quan đến HTML, CSS, JavaScript và các tệp tin liên quan khác. Vậy một hình ảnh được đặt tại vị trí tốt có thể truyền đạt nhiều thông tin hơn một nghìn từ. 

Xét việc loại bỏ và thay thế hình ảnh theo một cách hiệu quả hơn như:

  • Hiệu ứng CSS (gradients. shadows, etc) và hình ảnh động CSS được sử dụng để tạo ra các nguyên độc lập với độ phân giải mà luôn nhìn sắc nét ở mọi mức độ phân giải, thậm chí là mức độ phóng to. Thường ở một phần của các byte yêu cầu bởi một tệp hình ảnh.
  • Phông chữ web cho phép sử dụng các kiểu chữ đẹp trong khi vẫn giữ được khả năng lựa chọn, tìm kiếm và thay đổi kích cỡ văn bản- quả là một cải tiến đáng kể về tính hữu dụng.

Hình ảnh rất quan trọng đối với việc thiết kế, xây dựng thương hiệu và khả năng đọc tốt, nhưng văn bản trong hình ảnh lại mang đến một trải nghiệm kém. Bởi văn bản không thể chọn, không thể tìm kiếm, zoomable, không truy cập và tất nhiên không thân thiện với các thiết bị DPI cao.

Hình ảnh Vector và Raster

Hình ảnh Vector đại diện cho hình ảnh bao gồm các hình dạng hình học. Vector phóng to và không phân giải. Hình ảnh Raster lại được sử dụng cho những chi tiết phức tạp với nhiều hình dạng khác nhau.

Vector sử dụng các đường thẳng, điểm và đa giác để biểu diễn một hình ảnh. Trong khi đó Raster lại biễu diễn hình ảnh bằng cách mã hóa các giá trị riêng lẻ của mỗi điểm ảnh trong lưới hình chữ nhật. Mỗi loại đều có ưu và nhược điểm riêng của nó.

Vector and Raster Image

Vector rất lý tưởng cho các hình ảnh bao gồm hình học đơn giản( biểu trưng, biểu tượng,…) và mang lại kết quả sắc nét ở mọi góc độ phân giải, mức độ thu phóng. Được xem là định dạng lý tưởng cho màn hình có đọ phân giải cao, các tài nguyên cần được hiển thị ở các kích cỡ khác nhau.

Tuy nhiên, đồ họa vector không phù hợp với bối cảnh phức tạp( image): số lượng SVG để mô tả tất cả các hình dạng có thể rất cao và đầu ra có thể không thấy “photorealistic”. Đây là lúc cần sự có mặt của Raster như GIF, PNG, JPEG, JPEG-XR, WebP.

Khi phóng to đều bị mờ, chúng ta cần lưu nhiều phiên bản của Raster ở các mức phân giải khác nhau để mang lại trải nghiệm tối ưu cho người dùng.

Tối ưu hóa hình ảnh Vector

Đồ họa Vector được định dạng SVG dựa trên XML, được nén bằng GZIP và minified để giảm kích thước. Tất cả trình duyệt đều hỗ trợ SVG (Scalable Vector Graphics), là một định dạng dựa trên XML cho đồ họa hai chiều: chúng ta có thể nhúng các tệp SVG trực tiếp vào trang, hoặc một nguồn từ bên ngoài.

Một tệp SVG được tạo ra bởi phần mềm vẽ hoặc bằng tay hoặc trực tiếp trong trình soạn thảo văn bản của chúng ta.

 
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00
  3. Build 0) -->
  4. <svg version="1.2" baseProfile="tiny" id="Layer_1"
  5. xmlns="http://www.w3.org/2000/svg"
  6. xmlns:xlink="http://www.w3.org/1999/xlink"
  7. x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
  8. <g id="XMLID_1_">
  9. <g>
  10. <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10"
  11. cx="50" cy="50" r="40"/>
  12. </g>
  13. </g>
  14. </svg>

Đoạn code này từ Adobe Illsutrator phác họa hình tròn nền đỏ viền đen đơn giản. Nó chứa rất nhiều siêu dữ liệu, chẳng hạn như class và không gian XML thường không cần thiết để hiển thị nội dung trong trình duyệt. Do đó, cần minified SVG qua công cụ SVGO.

Việc minified tệp SVG ở trên chỉ giảm được phần nào dữ liệu khi duyệt web, nên tốc độ chưa được cải thiện đáng kể. Vì vậy, chúng ta nên nén GZIP để đưa tất cả vào một tệp duy nhất để trình duyệt giảm Roud-Trip Time.

Tối ưu hóa hình ảnh Raster

Hình ảnh Raster là một lưới các điểm ảnh, mỗi pixel mã hóa một thông tin màu sắc. Để Rasterimage optimization sử dụng nhiều kỹ thuật khác nhau để giảm số bit/pixel bắt buộc.

Raster chỉ đơn giản là lưới 2 chiều của pixel riêng, ví dụ hình ảnh có kích thước 100×100 pixel là chuỗi 10.000 pixel. Đổi lại, mỗi điểm ảnh lưu giá trị “RGBA”: (R) kênh màu đỏ, (G) kênh màu xanh, (B) kênh màu xanh lam và (A) kênh alpha.

Bên trong, trình duyệt phân bổ 256 giá trị cho từng kênh, có nghĩa là 8bit/kênh (2= 256) và 4 byte/pixel (4 kênh x 8 bit= 32 bit= 4 byte). Kết quả, nếu chúng ta biết kích thước của lưới pixel hoàn toàn có thể tính được kích thước file:

  • Hình ảnh 100 x 100px gồm 10.000px
  • 10.000px x 4 byte = 40.000 byte
  • 40.000 byte/1024 = 39 KB
Kích cỡ ảnhPixel Kích thước tập tin
100 x 10010.00039 KB
200 x 20040.000156 KB
300 x 30090.000351 KB
500 x 500250.000977 KB
800 x 800640.0002500 KB
1000 x 10004.000.0003906 KB

Nếu hình ảnh lớn hơn sẽ khiến tài nguyên máy chủ tốn kém, trở nên chậm chạp và tốn kém khi tải xuống. Vậy làm thế nào để tối ưu hóa hình ảnh Raster? Chúng ta có thể nén hình ảnh raster để giảm “bit-depth”, điều này đồng nghĩa với việc giảm độ phân giải hình ảnh, giảm các kết cấu phức tạp, nhìn kỹ image raster sau khi nén hình ảnh có thể mờ đi nhưng không làm mất giá trị thông tin cần truyền tải đến người đọc.

Nén ảnh Lossy

Nén ảnh Lossy là phương pháp nén ảnh giảm byte ảnh bằng cách thay đổi thông sốbảng mã màu giảm xuống, Từ đó giảm “bit-depth” của mỗi bức ảnh, phương pháp nén lossy có thể giảm đến 90% dung lượng ảnh tùy thuộc vào mức độ mà bạn muốn giảm, tối ưu.

Image Optimization

Nếu một bit dữ liệu thiếu hoặc sai có thể thay đổi hoàn toàn ý nghĩa của nội dung, nếu tệ hơn thì nó sẽ phá vỡ hoàn toàn. Đó là câu chuyện của các tệp tin( chẳng hạn mã nguồn website), còn với image, video và sound có thể chấp nhận để cung cấp một bảo sao gần đúng so với dữ liệu gốc. Vì vậy chúng ta hoàn toàn có thể sử dụng phương pháp nén lossy để image optimization.

Trên thực tế, chúng ta có xu hướng nhìn nhận thông tin từ bức ảnh bằng cách chọn lọc ra các thông tin chính. Nếu bức ảnh chỉ đại diện cho một điều mà bạn cần truyền tải đến người đọc, những thứ liên quan có rõ nét hay chất lượng cuối cùng vẫn một mục đích. Phương pháp tối ưu hóa hình ảnh bằng phương pháp nén lossy được thực hiện trước khi upload hình ảnh vào host.

Lưu giữ hình ảnh

Trên kia là tất cả việc image optimization được thực hiện trước khi đưa hình ảnh vào máy chủ. Tôi sử dụng bức ảnh 39 KB (kích thức 650 x 350px) đã nén vào bài viết này, bạn load trang đọc thông tin mất 2,1s để hiển thị hết. Ngày mai, bạn vẫn đọc bài viết này và vẫn load dữ liệu tốn 39 KB cùng 2,1s, rồi ngày kia cũng vậy.

Tất nhiên, tôi không để bạn phải tốn quá nhiều dữ liệu duyệt web như vậy, tôi sử dụng phương pháp ép trình duyệt của bạn phải lưu một bản sao khi load page trong thời gian 60 ngày. Nghĩa là trong 60 ngày, nếu bạn load lại trang này, trước khi máy chủ của tôi xử lý back-end thì trình duyệt của bạn đã hiển thị một nửa dữ liệu, và bạn cũng tiết kiệm được ½ dữ liệu.

Phương pháp mà tôi sử dụng là phương pháp sử dụng bộ nhớ đệm hình ảnh. Đó là quá trình lưu trữ image trong bộ nhớ cache từ CDN hoặc sử dụng plugin để tạo bộ nhớ cache và ép trình duyệt khách truy cập phải lưu. Tất nhiên tôi sử dụng cả hai.

Caching làm giảm yêu cầu tải xuống của các ứng dụng và kích thước tải xuống một trang nhất định. Nếu sử dụng CDN, các yêu cầu dữ liệu này được lưu tại proxy cache của PoP, giúp tăng thời gian dựng trang. Đây là phương pháp image optimization đơn giản và hiệu quả được sử dụng nhiều hiện nay.

Tự động image optimization

Đây là thế giới của công nghệ và tự động hóa nên việc image optimization tự động là điều hoàn toàn có thể. Phương pháp này giúp hình ảnh của chúng ta tự động giảm “bit-depth” mà không cần đụng tay. Một số plugin tự động tối ưu hóa hình ảnh, bạn có thể sử dụng:

  1. WP Smuch.it
  2. Bulk Resize Images
  3. EWWW Image Optimizer
  4. Kraken.io Image Optimizer
  5. Optimus
  6. Compress JPEG & PNG images
  7. Hammy
  8. CW Image Optimizer 
  9. Imsanity
  10. Prizm Image

Tuy nhiên, để đạt được hiệu quả tối đa bạn nên nén ảnh trước khi upload vào host và tự động tối ưu hóa lại. Việc này làm giảm kích thước tệp hình ảnh xuống mức thấp nhất.

Tác động của màn hình có độ phân giải cao

Nếu nói đến điểm ảnh, chúng ta cần phải phân biệt giữa: CSS pixel và device pixel. Một CSS pixel có thể chứa nhiều Device pixel. Ví dụ: một CSS pixel có thể được hỗ trợ bởi một Device pixel hoặc được hỗ trợ bởi nhiều điểm ảnh của một thiết bị.

Khi nhắc đến màn hình có độ phân giải cao, cần lưu ý:

  • Màn hình có độ phân giải cao có nhiều Device pixel trên mỗi CSS pixel
  • Image phân giải cao có số lượng pixel và byte cao hơn so với hình ảnh thông thường.

Màn hình DPI (HiDPI) cao tạo ra kết quả tuyệt vời, nhưng có một sự cân bằng rõ ràng: hình ảnh yêu cầu thêm chi tiết để tận dụng số lượng device pixel cao hơn. Như vậy, khó mà sắc nét nếu sử dụng các thiết bị có độ phân giải cao. Nhưng Vector lại phù hợp bởi chúng phù hợp với mọi độ phân giải.

Mặt khác, hình ảnh Raster tạo ra thách thức lớn hơn để phù hợp với màn hình có độ phân giải cao. Từ đó, chúng ta có thể suy ra, số lượng pixel lớn hơn, kích thước file raster lớn hơn. Việc nặng máy chủ là khó tránh khỏi.

Độ phân giải màn hìnhTổng số điểm ảnhFile không nén
1x100 x 100 = 10.00040.000 bytes
2x100 x 100 x 4 = 40.000160.000 bytes
3x100 x 100 x 9 = 90.000360.000 bytes

Khi tăng gấp đôi độ phân giải thì màn hình vật lý thì tổng số điểm ảnh tăng 4 lần: 2 lần số pixel ngang, 2 lần số pixel dọc. Do đó màn hình “2x” không chỉ tăng gấp đôi, mà còn gấp 4 lần số điểm ảnh yêu cầu.

Nếu màn hình có độ phân giải cao cho phép chúng ta cung cấp hình ảnh đẹp, rõ nét. Tuy nhiên, màn hình độ phân giải cao đòi hỏi hình ảnh có độ phân giải độc lập và luôn mang lại kết quả sắc nét.

Các yêu cầu tối ưu Image Optimization

Chọn đúng định dạng hình ảnh

Bắt đầu kỹ thuật image optimization, chúng ta nên chọn đúng định dạng của hình ảnh: GIF, PNG, JPEG, BMP,… Ngoài ra chọn cài đặt tốt nhất cho từng định dạng hình ảnh như: chất lượng bảng màu, kích thước bảng màu, thông số bảng mã màu,.. Và xem xét có nên thêm các tài nguyên WebP và JPEG XR mới cho xu hướng hiện nay không.

Ngoài việc sử dụng các thuật toán lossy và lossless khác nhau, định dạng hình ảnh khác nhau hỗ trợ các tính năng khác nhau như độ sắc nét và tính linh hoạt. Do đó, việc chọn đúng định dạng cho một hình ảnh cụ thể là việc kết hợp các kết quả hình ảnh và các yêu cầu chức năng.

Định dạngĐộ sắc nétTính linh hoạtTrình duyệt hỗ trợ
GIFAll
PNGKhôngAll
JPEGKhôngKhôngAll
JPEG XRInternet Explorer
WebPChrome, Opera, Android

Có ba định dạng hình ảnh được hỗ trợ hầu hết trình duyệt: GIF, PNG, JPEG. Ngoài các định dạng này, một số trình duyệt hỗ trợ các định dạng mới như WebP và JPEG XR nhưng chưa phổ biến.

Nếu cần sự linh hoạt, nên chọn GIF: GIF giới hạn bảng màu tối đa 256 màu, biến GIF trở thành định dạng không sắc nét với hầu hết hình ảnh. Đổi lại GIF linh hoạt hơn với các biến thể trong mọi điều kiện.

Nếu cần sắc nét, nên chọn PNG: PNG không áp dụng bất kỳ thuật toán lossy tối ưu hóa hình ảnh vượt quá kích thước của bảng màu. PNG tạo ra hình ảnh chất lượng cao nhất đồng nghĩa với các chi phí liên quan cũng cao hơn so với các định dạng khác.

Nếu tối ưu hóa ảnh chụp màn hình, nên chọn JPEG: JPEG kết hợp thuật toán nén lossy và lossless để giảm dung lượng ảnh và vẫn như nguyên thông tin cần thiết.

WebP và JPEG XR là hai định dạng mới có nhiều ưu điểm vượt trội cộng thêm các biến thể bổ sung được mã hóa. Theo ước tính WebP có thể giảm 30% dung lượng so với JPEG cùng một hình ảnh. Tuy nhiên, là chưa được hỗ trợ bởi nhiều trình duyệt web.

Trong tương lai gần, WebP và JPEG XR sẽ được hỗ trợ bởi nhiều tính năng vượt trội hơn và :

  • Một số CDN đã cung cấp image optimization với WebP và JPEG XR
  • Một số mã nguồn mở đã tự động tối ưu hóa , chuyển đổi và phân phối WebP và JPEG XR, đơn cử PageSpeed cho Apache hoặc Nginx

Dù chọn định dạng nào, bạn nên cân nhắc việc lựa chọn của mình bởi nó ảnh hưởng không nhỏ đến thời gian tải trang và tính linh hoạt của website. Với tôi, tôi chọn các định dạng tùy từng trường hợp cụ thể để phân phối tốt hơn, truyền tải thông điệp đến độc giả tốt hơn

Công cụ Image Optimization

Dù định dạng hình ảnh thế nào, để có kết quả tốt nhất chúng ta nên chọn công cụ điều chỉnh thích hợp để có các hình ảnh đạt yêu cầu về kỹ thuật.

  1. Gifsicle: Tối ưu hóa GIF
  2. Jpegtran: Tối ưu hóa JPEG
  3. Optipng: Lossless PNG
  4. Pngquant: Lossy PNG

Ngoài ra, một số trang web trực tuyến giúp chúng ta tối ưu hóa hình ảnh có các chức năng tương tự như:

  1. Dynamic Drive
  2. Image Optimizer
  3. Web Resizer
  4. Smush.it
  5. Kraken
  6. Online Image Compression
  7. PunyPNG
  8. JPEG Optimizer
  9. Ranking Easy
  10. Shrink Pictures

Cung cấp hình ảnh thu nhỏ

Tại sao lại phải cung cấp hình ảnh thu nhỏ? Hình ảnh thu nhỏ sẽ giảm số lượng điểm ảnh không cần thiết bằng cách phóng to hình ảnh lên kích thước hiển thị.

Image Optimization sẽ giảm hai tiêu chuẩn: 1-số byte được sử dụng để mã hóa từng pixel, 2-tổng điểm ảnh. Kích thước ảnh bằng tổng điểm ảnh và bằng số byte mã hóa từng pixel. Ngoài ra, không còn gì.

Giải pháp để đảm bảo không tải thừa số số pixel trong khi hiển thị hình ảnh trên trình duyệt, đó là cung cấp ảnh thu nhỏ. Giảm tiêu tốn tài nguyên CPU và hiển thị với độ phân giải thấp hơn.

Độ phần giảiKích thước tụ nhiênKích thước hiển thị( CSS px)Tổng điểm ảnh không cần thiết
1x110 x 110100 x 100(110 x 110) – (100 x 100) = 2100
1x810 x 810800 x 800(810 x 810) – (800 x 800) = 16100
2x220 x 220100 x 100(220 x 220) – (100 x 100) = 8400
2x820 x 820400 x 400(820 x 820) – (400 x 400) = 32400

Trong tất cả các trường hợp trên, chúng ta đang làm tiêu tốn tài nguyên CPU bằng cách lưu trữ quá nhiều điểm ảnh không cần thiết. Pixel tăng ⇒ chi phí tăng ⇒ tài nguyên CPU tăng. Dù chúng ta không thể đảm bảo rằng mọi nội dung được phân phối chính xác, chúng ta nên đảm bảo rằng số lượng điểm ảnh thừa ở mức thấp nhất.

Lời kết

Image Optimization là một nghệ thuật chắc chắn bạn phải học, bởi không một web hay blog nào mà chẳng có hình ảnh. Nếu không thực hiện việc tối ưu hóa hình ảnh, lâu dài bạn sẽ nhận ra hậu quả lớn từ vấn đề nhỏ, rất mất thời gian.

Sau đây là một số mẹo và kỹ thuật khi làm việc với hình ảnh:

  • Định dạng Vector thích hợp: Vector được phân giải và quy mô độc lập, hoàn hảo cho thế giới đa thiết bị và độ phân giải cao.
  • Minified và Compression SVG: Vector là định dạng chứa nhiều siêu dữ liệu thừa mà chúng ta hoàn toàn có thể xóa đi. Hãy đảm bảo nén GZIP cho tệp SVG trước khi upload trực tiếp vào máy chủ.
  • Chọn định dạng Raster tốt nhất: tùy từng trường hợp cụ thể, việc chọn đúng định dạng mang lại sự thích ứng cao của website.
  • Sử dụng bộ nhớ caching: đảm bảo hình ảnh được lưu trữ trong thời gian nhất định sau lần duyệt web đầu tiên. Giảm thời gian dựng trang cũng như giảm dữ liệu duyệt web của visitor.
  • Tự động image optimization: sử dụng công cụ để tự động tối ưu hình ảnh với dung lượng thấp nhất.
  • Hình ảnh thu nhỏ: đảm bảo không chứa quá nhiều điểm ảnh thừa tốn CPU.

About The Author

Rain Nguyen

Tôi là Rain, người sáng lập và là biên tập viên của blog RN DOT COM. Tôi làm việc để xây dựng một cộng đồng vững mạnh bằng cách hướng dẫn mọi người viết blog kiếm tiền, xây dựng hệ thống kinh doanh của chính mình qua hệ thống bài viết của tôi. Nếu bạn thấy bài viết nào đó hay, hãy chia sẻ nó như một cách giúp tôi hỗ trợ những ai đang khao khát như bạn. I love all my friends!

Leave a reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

"