Những Kỹ Thuật Thông Minh Nhằm Tối Ưu Hóa JPEG

Khi nói đến tối ưu hóa hình ảnh, người ta chỉ thường xem xét những thông số giới hạn mà các chương trình chỉnh sửa hình ảnh phổ biến chỉ ra, như thanh trượt “Quality”, số lượng màu sắc trong bảng màu, cách phối màu v.v… Ngoài ra, còn có một số chương trình có thể giúp hình ảnh nhẹ và nhỏ lại như OptiPNG và jpegtran. Tất cả đều là những công cụ phổ biến giúp các nhà thiết kế và các nhà phát triển biết được những kỹ thuật đơn giản trong việc tối ưu hóa hình ảnh.

Trong bài viết này, chúng tôi sẽ trình bày một phương pháp tối ưu hình ảnh khác. Phương pháp này khác nhau dựa trên việc dữ liệu của hình ảnh được lưu trữ dưới các định dạng khác nhau. Hãy bắt đầu với định dạng JPEG và kỹ thuật có tên gọi là Grid 8 – Pixel.

Grid 8-PIXEL

Như bạn đã biết, hình ảnh có định dạng JPEG bao gồm các khối 8 x 8 px mà đặc biệt có thể thấy được nếu bạn thiết lập thông số ‘Quality’ thật thấp. Làm thế nào các khối này có thể giúp chúng ta tối ưu hóa hình ảnh. Hãy xem các ví dụ sau:

32×32 pixels, Quality: 10 (in Photoshop), 396 bytes.

Cả hai hình vuông màu trắng đều có cùng kích cỡ 8×8 px. Mặc dù Quality được chỉnh thấp nhưng hình vuông ở góc dưới bên phải vẫn mờ (như bạn thấy) trong khi hình ở trên, bên trái trông đẹp và rõ ràng hơn. Điều này xảy ra như thế nào? Để trả lời câu hỏi này, chúng ta cần xem qua grid:

Như bạn thấy, hình vuông phía trên bên trái được sắp gọn trong grid 8×8 px, đảm bảo cho hình vuông thật sắc nét.

Khi lưu lại, hình ảnh được chia thành các khối 8×8 px, mỗi khối sẽ được tối ưu hóa một cách độc lập. Hình vuông góc dưới bên phải thì không khớp với ô trong grid, vì thế phải tìm chỉ số màu sắc trung bình giữa màu đen và màu trắng cho việc tối ưu hóa (trong JPEG, mỗi khối 8×8 được mã hóa như một đường sóng hình sin). Điều này lý giải tại sao hình ảnh lại bị mờ. Rất nhiều công cụ nâng cao giúp tối ưu hóa JPEG đều có tính năng này, nó được gọi là tối ưu hóa có chọn lọc và kết quả mang lại cùng một hiệu quả cho các vùng ảnh có chất lượng khác nhau và giúp tiết kiệm được nhiều byte hơn.

Kỹ thuật này đặc biệt hữu ích khi lưu các đối tượng có hình chữ nhật. Hãy xem nó hoạt động như thế nào với hình ảnh thực tế bên dưới:

13.51 KB.

12.65 KB

Trong ví dụ đầu tiên, hình chiếc lò vi sóng được đặt ngẫu nhiên. Trước khi lưu tập tin thứ 2, chúng ta sắp xếp hình ảnh grid 8×8 px.Quality cài đặc cho cả hai đều là 55. Hãy cùng xem gần hơn (đường màu đỏ của grid):

Bạn thấy đấy, chúng ta tiết kiệm được 1KB dữ liệu hình ảnh một cách đơn giản bằng cách định vị hình ảnh thật chính xác và vì vậy, hình ảnh cũng trông rõ nét hơn.

Tối ưu hóa màu sắc

Kỹ thuật này khá phức tạp và chỉ có hiệu quả đối với một số định dạng hình ảnh. Nhưng dù sao chúng ta cũng sẽ lướt qua nó không chỉ là trên lý thuyết.

Trước tiên, chúng ta cần phải biết hệ màu nào đang được sử dụng cho các định dạng JPEG. Hầu hết các định dạng hình ảnh đều dùng hệ màu RGB, nhưng JPEG cũng có thể dùng YcbCr- hệ màu được sử dụng rộng rãi cho truyền hình.

YCbCr cũng tương tự như hệ màu HSV, nghĩa là cả YCbCr và HSV đều được phân chia lightness mà hệ thống thị giác của con người vốn rất nhạy cảm với sắc độ (HSV có thể khá quen thuộc với hầu hết các nhà thiết kế). Nó gồm 3 yếu tố: hệ màu hue (Hue), cường độ màu (Saturation) và độ sáng (Value). Yếu tố quan trọng nhất cho các mục đích của chúng ta ở đây là độ sáng, hay còn gọi là lightness (các công cụ tối ưu hóa hình có xu hướng nén các kênh màu sắc. Nhưng giữ độ phối sắc càng cao thì càng tốt bởi vì con người rất nhạy cảm với màu sắc). Chế độ màu Lab trong Photoshop có thể giúp chúng ta chuẩn bị việc nén hình ảnh bằng công cụ tối ưu hóa định dạng JPEG được tốt hơn.

Trở lại với ví dụ về hình ảnh chiếc lò vi sóng. Có một mạng lưới khá đẹp ở cánh cửa, đây là một ví dụ hoàn hảo cho việc tối ưu hóa màu sắc. Sau thao tác nén đơn giản, với Quality là 55, file nặng 64.39 KB.

990×405 pixels, Quality: 55 (in Photoshop), 64.39 KB

Mở phiên bản hình ảnh lớn hơn bằng Photoshop, bật chế độ màu Lab: Image >> Mode >> Lab Color.

Chế độ Lab cũng gần như HSV và YcbCr, mặc dù không hoàn toàn giống. Kênh chỉnh độ sáng (Lightness) chứa những thông tin về độ sáng của hình ảnh. Kênh A cho thấy có bao nhiêu màu đỏ hoặc màu xanh lá cây. Kênh B quản lý màu xanh và màu vàng. Mặc dù có những khác biệt nhưng chế độ này cho phép chúng ta loại bỏ thông tin của màu sắc dư thừa.

Chuyển sang pallet Channels và xem các kênh A và B. Rõ ràng chúng ta có thể thấy một cấu trúc lưới ở đây, và dường như có ba khối với cường độ sáng khác nhau.

Chúng ta sẽ thay đổi một số màu sắc, vì vậy mở bản gốc ở một cửa sổ khác sẽ có ích khi thực hiện điều này. Mục đích của chúng ta là làm mịn cấu trúc hạt của những khu vực này ở cả hai kênh màu. Điều này sẽ giúp các công cụ tối ưu hóa xử lý các dữ liệu đơn giản hơn. Có lẽ bạn sẽ thắc mắc tại sao chúng ta lại tối ưu hóa đặc biệt ở khu vực cửa lò vi sóng của hình ảnh. Đơn giản là vì khu vực này được hình thành bởi các điểm ảnh màu đen và cam xen kẽ nhau. Màu đen có độ sáng bằng 0, và thông tin này được lưu trữ trong các kênh chỉnh độ sáng. Vì vậy, nếu chúng ta làm cho khu vực này hoàn toàn thành màu dau da cam trong các kênh màu, chúng ta sẽ không mất đi gì cả, bởi các kênh chỉnh độ sáng sẽ xác định điểm ảnh nào cần chỉnh tối và sẽ rất khó để nhận biết được sự khác biệt hoàn toàn giữa màu cam sẫm và màu đen trong cấu trúc này.

Chuyển sang kênh A, chọn mỗi khối riêng biệt và sử dụng bộ lọc Median (Filter>> Noise>> Median). Bán kính càng nhỏ càng tốt (tức là cho đến khi kết cấu biến mất) để không làm sai lệch độ chói quá nhiều. Chọn điểm 4 cho khối đầu tiên, 2 cho khối kế tiếp và 4 cho khối thứ ba. Và khi đó, cánh cửa sẽ trông như thế này:

Vì độ bão hòa thấp nên chúng ta sẽ cần phải khắc phục điều này. Để xem tất cả các thay đổi màu sắc, hãy nhân bản cửa sổ đang hoạt động: Window>> Arrange>> New Window. Trong cửa sổ mới, click vào các kênh Lab để xem ảnh. Kết quả là màn hình làm việc của bạn sẽ trông như thế này:

Chọn cả ba khối trong kênh A tại khu vực làm việc, và mở cửa sổ Level (Ctrl + L hoặc Image>> Adjustments>> Levels). Di chuyển thanh trượt ở giữa sang bên trái để màu sắc bên trong của lò nướng của bản sao khớp với bản gốc (tôi đã tạo ra độ phối màu là 1,08 cho thanh trượt giữa). Thực hiện tương tự với các kênh B và hãy xem nó trông như thế nào:

990×405 pixels, Quality: 55 (in Photoshop), 59.29 KB

Như bạn thấy, chúng ta đã làm giảm 5 KB cho hình ảnh (lúc trước là 64,39 KB). Mặc dù kỹ thuật này được mô tả có vẻ lớn lao và đáng ngại, nhưng chỉ mất khoảng một phút để thực hiện: chuyển sang hệ màu Lab, lựa chọn các khu vực khác nhau của các kênh màu và sử dụng bộ lọc Median, sau đó điều chỉnh độ bão hòa. Như đã đề cập, kỹ thuật này hữu ích hơn rất nhiều so với lý thuyết, và tôi sử thường sử dụng nó để tinh chỉnh các hình ảnh quảng cáo lớn để hình ảnh trông được rõ ràng và sắc nét.

Các thủ thuật tối ưu hóa JPEG phổ biến

Chúng tôi sẽ kết thúc bài viết tại đây bằng cách cung cấp một số các thủ thuật tối ưu hóa hữu ích.

Mỗi khi chọn nén chất lượng hình ảnh, bạn nên cân nhắc lựa chọn chương trình mà bạn sẽ sử dụng để tối ưu hóa hình ảnh. Những tiêu chuẩn của định dạng JPEG rất nghiêm ngặt: chúng chỉ quyết định cách một hình ảnh được chuyển đổi khi đã giảm kích thước của tập tin. Tuy nhiên chỉ developer mới là người quyết định chính xác những gì mà các công cụ tối ưu hóa có thể thực hiện.

Ví dụ, một số maketer quảng bá phần mềm của họ là sản phẩm tối ưu hóa tốt nhất, chúng cho phép bạn lưu các tập tin ở một kích thước nhỏ với chất lượng cao, trong khi đó Photoshop làm cho các tập tin nặng gấp đôi. Đừng nên tin vào những điều đó vì mỗi chương trình có thang Quality riêng và sự phối màu khác nhau sẽ quyết định các thuật toán tối ưu hóa bổ sung.

Tiêu chí duy nhất để so sánh hiệu quả tối ưu hóa là Quality để sắp xếp tỷ lệ. Nếu bạn lưu một hình ảnh với Quality từ 55 đến 60 trong Photoshop, nó sẽ trông như có kích thước tương tự các tập tin được thực hiện với phần mềm khác có Quality là 80.

Đừng bao giờ lưu hình ảnh với Quality là 100. Đây không phải là chất lượng cao nhất có thể, mà chỉ là một giới hạn toán học của việc tối ưu hóa. Bạn sẽ có một tập tin nặng một cách bất hợp lý. Lưu một hình ảnh với Quality 95 là quá đủ để không mấtt chi tiết ảnh.

Hãy nhớ rằng khi bạn thiết lập Quality dưới 50 trong Photoshop, nó sẽ chạy một thuật toán tối ưu hóa bổ sung được gọi là color down-sampling, làm quân bình màu sắc trong các khối 8-pixel lân cận:

48×48 pixels, Quality: 50 (trong Photoshop), 530 bytes

48×48 pixels, Quality: 51 (trong Photoshop), 484 bytes.

Vì vậy, nếu hình ảnh nhỏ nhưng các chi tiết trong hình lại có độ tương phản cao, tốt hơn là hãy thiết lập Quality ít nhất là 51 trong Photoshop.

XEM THÊM >>> dạy thiết kế đồ họa