Tối ưu hóa hình ảnh (Image optimization) là một khoa học liên quan đến việc giảm kích thước của 1 hình ảnh trong khi vẫn duy trì được chất lượng hình ảnh đó với sự trợ giúp của các kỹ thuật cũng như các thuật toán khác nhau. Trong bài nayfm chúng ta sẽ xem xét làm thế nào để thực hiện và cài đặt việc tối ưu hóa hình ảnh trong Ruby. Tuy nhiên trước khi bắt đầu, chúng ta hãy tìm hiểu xem lý do tại sao việc tối ưu hóa hình ảnh là rất quan trọng.

Tầm quan trọng của việc tối ưu hóa hình ảnh

Có rất nhiều lý do để bạn muốn tối ưu hóa hình ảnh. Nhưng ở đây, chúng ta hãy nhìn vào 3 lý do chính dưới đây:

1. Băng thông: Người sử dụng thực sự rất quan tâm đến lưu lượng dữ liệu họ mất khi lướt các trang Web khác nhau. Băng thông càng lớn càng tốn tiền. Việc tối ưu hóa hình ảnh của bạn sẽ tiết kiệm được rất nhiều băng thông, giúp làm giảm chi phí của người dùng khi lướt trang web của bạn và đồng thời cũng giảm thiểu chi phí cho host của chính bạn.
2. Thời gian tải ảnh: Việc người dùng phải đợi vài giây hoặc thậm chí vài phút để tải xuống trang của bạn có thể dẫn đến việc họ sẽ không bao giờ truy cập vào trang web đó lần thứ hai. Vấn đề này liên quan đến trải nghiệm người dùng. Bên cạnh đó, việc không tối ưu hóa hình ảnh của bạn sẽ làm cho trang web của bạn tải xuống mất nhiều thời gian hơn rất nhiều
3. Không gian lưu trữ: Giảm kích thước hỉnh ảnh sẽ giúp tự động giảm số lượng không gian lưu trữ bạn cần. Xem xét 1 trường hợp điển hình này: người dùng tải lên hình ảnh có kích thước 5MB và trang Web cvuar bạn tối ưu hóa hình ảnh bằng cách giảm kích thước xuống còn 2MB mà vẫn không làm giảm chất lượng hình ảnh. Làm phép tính đơn giản thì thấy việc lưu trữ 100 hình ảnh có kích thước sẽ chỉ cần 200MB bố nhớ so với 500MB với kích thước ban đầu. Như vậy, bạn vừa có thêm 300MB không gian để lưu trữ Ngoài ra, bạn cũng phải giải quyết 1 số yêu cầu về mỗi hình ảnh, bao gồm:

• Chất lượng (Quality)
• Định dạng (Format)
• Kiểu dữ liệu (Metadata)
• Kích thước và thay đổi kích thước (Size & resizing)

Tối ưu hóa hình ảnh trong Ruby

1. Piet Piet là gem dùng để tối ưu hóa hình ảnh. Về bản chất, thì nó dùng các tiện ích optipng và jpegoptim. Cách cài đặt và sử dụng nó như sau

gem install piet

Bạn có thể sự nó:

Piet.optimize("/images/dog.png", verbose: true)

Output sẽ được tạo ra trông như sau:

Processing: dog.png
340x340 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 157369 bytes
Input file size = 157426 bytes

Trying:
  zc = 9  zm = 9  zs = 0  f = 1   IDAT size = 156966
  zc = 9  zm = 8  zs = 0  f = 1   IDAT size = 156932

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 1   IDAT size = 156932

Output IDAT size = 156932 bytes (437 bytes decrease)
Output file size = 156989 bytes (437 bytes = 0.28% decrease)

Bạn có thẻ sử dụng Piet để chuyển đổi các ảnh PNG 24/32-bit sang PNG (paltted) (8-bit). Việc chuyển đổi làm giảm đáng kể kích thước tệp nhưng vẫn bảo toàn sự đầy đủ giá trị alpha transparency

Piet.pngquant "/a/path/where/you/store/the/file/to/convert"

Bạn có thể tìm hiểu sâu hơn về gem ở đây

2. Image_optim Đây là một gem tối ưu hóa toàn diện, giúp tận dụng được nhiều tiện ích như jhead, jpegoptim, jpeg-recompress, jpegtran, optipng, pngcrush, pngout, pngquant và những 1 vài thứ khác nữa, Cách cài đặt và sử dụng Gem:

gem install image_optim

Ở, ứng dụng Ruby của bạn, bạn có thể gọi nó như sau

image_optim = ImageOptim.new
image_optim = ImageOptim.new(:pngout => false)
image_optim = ImageOptim.new(:nice => 20)

Và tối ưu hóa hình ảnh:

image_optim.optimize_image "dog.png"

Tìm hiểu thêm ở đây để sử dụng Gem

3. Mini_magick Gem Ruby này là 1 wrapper cho ImageMagick. Nó cho phép bạn truy cập vào tất cả các tùy chọn ImageMagick. Cài đặt và sử dụng Gem:

gem "mini_magick"

Resize hình ảnh:

image = MiniMagick::Image.open("dog.jpg")
image.path #=> "/var/folders/k7/6zx6dx6x7ys3rv3srh0nyfj00000gn/T/magick20140921-75881-1yho3zc.jpg"
image.resize "300x300"
image.format "png"
image.write "output.png"

Nó tạo ra 1 bản sao thay đổi kích cỡ của hình ảnh. Bạn có thể sửa đổi ngay trên hình ảnh ban đầu bằng cách không gọi phương thức write. Tìm hiểu thêm tài liệu để thêm các tùy chọn tối ưu hóa sử dụng gem mini_magick

4. Cloudinary: 1 lựa chọn tối ưu hóa dễ dàng Sử dụng Cloudinary, bạn có thể nhanh chóng và dễ dàng tối ưu hóa hình ảnh, bất kể ngôn ngữ lập trình nào, không riêng gì Ruby. Cloudinary tự động thực hiện 1 tối ưu hóa nhất định trên tất cả các hình ảnh cần chuyển đổi theo mặc định. Việc phân phối CDN tích hợp và nhanh chóng của nó cũng giúp lấy được tất cả các tài nguyên hình ảnh cho người dùng 1 cách nhanh chóng. Cloudinary cung cấp:

• Tự động mã hóa chất lượng: sử dụng thống số q_auto, mức nén chất lượng tối ưu và các thiết lập mã hóa tối ưu được chọn để sử dụng sẽ dựa trên hình ảnh, định dạng cụ thể và trình duyệt bạn đang sử dụng. Kết quả trả về là hình 1 ảnh có chất lượng tốt và kích thước tệp giảm

cl_image_tag "cat.jpg", quality: "auto"

Ngoài thông số q_auto để nén tự tự động, bạn có thể sử dụng q_auto:best, q_auto:low, q_auto:good hoặc q_auto:eco để điều chỉnh chất lượng hình ảnh của hình ảnh cần tối ưu

• Tự động chuyển đổi: thông số f_auto cho phép Cloudinary phân tích nội dung hình ảnh và chọn định dạng tốt nhất để phân phối. Ví dujL nó có thể tự động phân phối hình ảnh như WebP cho trình duyệt Chrome hoặc JPEG-XR cho IE, trong khi lại sử dụng định dạng gốc cho tất cả các trình duyệt khác. Sử dụng cả f_auto và q_auto, Cloudinary sẽ vẫn cung cấp WebP và JPEG-XR cho các trình duyệt có liên quan, nhưng có thể cung cấp các hình ảnh được chọn là PNG-8 và PNG-24 nếu thuật toán chất lượng xác định là tối ư

• Thay đổi kích thước và cắt hình ảnh với tham số w & h: Sử dụng tham số chiều rộng và chiều cao trong URL, bạn có thể thay đổi kích thước hình ảnh bằng Cloud

cl_image_tag("sample.jpg", :width=>0.5, :crop=>"scale")

Cloudinary hỗ trợ các chế độ cắt dưới đâyL scale, fit, mfit, fill, lfill, limit, pad, Ipad, mpad, crop, thumb, imagga_crop và imagga_scale

Tổng kết

Một trong những cách tốt nhất để tăng hiệu suất trang là thông qua tối ưu hóa hình ảnh, do đó bạn sẽ cần 1 khoảng thời gian để đảm bảo rằng tất cả các hình ảnh của bạn đã được tối ưu hóa và lưu trữ đúng cách. Bài viết này mình đã cố gắng làm nổi bất làm thế nào để tối ưu hóa hình ảnh trong Ruby, nhưng đó chỉ quan điểm cá nhân, bạn có thể tìm kiếm thêm các phương tối ưu hóa hình ảnh của bạn để tìm ra cách tốt nhất cho ứng dụng của mình

Tài liệu tham khảo

http://cloudinary.com/documentation/image_optimization