Tối ưu hóa JPEG cho Web - Hướng dẫn cơ bản

Nén hình ảnh được tìm thấy trong mọi định dạng phương tiện truyền thông bản địa. Tuy nhiên, sự khác biệt giữa GIF, PNG và JPEG là làm sao thông tin được nén và hiển thị trên màn hình. Có rất nhiều mẹo để soạn thảo phương tiện hình ảnh tuyệt vời được công bố trên web, nhưng nhiều nhà thiết kế vẫn không hiểu một số nguyên tắc cơ bản.

Trong hướng dẫn này, tôi muốn chia sẻ một vài ý tưởng để nén JPEG thích hợp. Bạn muốn tối ưu hóa hình ảnh của mình để giảm thời gian tải trang web trong khi vẫn giữ mức chất lượng khá. Đó là tất cả về việc tìm kiếm sự cân bằng giữa kích thước tập tin và mô tả màn hình. Không có giải pháp hoàn hảo cho các nhà thiết kế để làm theo. Nó cần một số thực hành ban đầu, nhưng một khi bạn hiểu nén JPEG, việc phát triển các trang web sẽ trở nên dễ dàng hơn nhiều trong tương lai.

Tránh luôn luôn tiết kiệm ở mức 100%

Bạn gần như không bao giờ nên lưu hình ảnh JPEG của mình với chất lượng 100%. Điều này sẽ không phải sản xuất nhiều nhất có thể “tối ưu hóa” hình ảnh. Nó thực sự tính toán thông qua một công thức giới hạn tối ưu hóa làm tăng kích thước tệp của bạn một cách cắt cổ. Thậm chí so với chất lượng 90% hoặc 95%, bạn sẽ thấy kích thước tệp giảm đáng kể.

Hầu hết các lần bạn sẽ được đề xuất để lưu hình ảnh thấp hơn nhiều so với chất lượng 90%. Nếu bạn mở hộp thoại Lưu cho Web trong Photoshop, bạn sẽ nhận thấy họ cung cấp các giá trị đặt trước mà bạn có thể chọn. Tôi đã thêm các giá trị JPEG có thể bên dưới - chú ý các quy ước đặt tên vốn có.

Thấp - 10%
Trung bình - 30%
Cao - 60%
Rất cao - 80%
Tối đa - 100%

Ngay cả trong Adobe Photoshop, 60% chất lượng hình ảnh được coi là 'cao'. Nhiều nhà phát triển web sẽ bảo đảm từ 50% - 70% là phạm vi an toàn để gắn bó.

Làm thế nào thấp là quá thấp?

Các giá trị bạn chọn để tối ưu hóa hoàn toàn phụ thuộc vào dự án. Bạn sẽ phải xem xét loại đồ họa nào sẽ xuất kích thước tệp cao nhất - đây là những loại thực sự cần nén.

Tôi sẽ lập luận rằng dưới 30% bạn thực sự đang cắt giảm chất lượng hình ảnh cơ bản. Các nhà thiết kế khác sẽ thề 50% như một “giới hạn” để giảm giá trị tối ưu. Nhưng lời khuyên tốt nhất ở đây là chỉ cần thử các cài đặt khác nhau và xem những gì có vẻ tốt nhất! Bạn không thể sai với một vài nghiên cứu thử nghiệm tối ưu hóa hình ảnh JPEG cho web.

Tùy chọn nén

Trước tiên chúng ta nên làm rõ hai thuật ngữ 'nén' và 'chất lượng' là hai nghịch đảo của nhau. Điều này có nghĩa là nếu bạn lưu JPEG ở mức nén 40%, bạn sẽ nhận được 60% chất lượng (so với chất lượng tối đa 100% không nén).

Đây là những tùy chọn cơ bản nhất để sử dụng - và chúng nên đủ khi tiết kiệm cho web. Người dùng phổ thông không nhận được vào các tùy chỉnh sâu hơn nhiều. Lấy mẫu con vào các vấn đề phức tạp hơn khi bạn chuyển đổi hình ảnh RGB thành YCbCr (Luminance, Chroma Blue, Chroma Red).

(Nguồn hình ảnh: Kara Monroe)

Các độ chói hoặc cài đặt độ sáng luôn được giữ ở giá trị cao nhất có thể trong nén JPEG. Với giá trị độ sáng này trên một kênh riêng biệt, việc tối ưu hóa các giá trị màu riêng lẻ của Đỏ và Xanh lam sẽ dễ dàng hơn. Điều này còn được gọi là mẫu phụ sắc độ. Các nhà thiết kế quan tâm đến việc bị bẩn tay sẽ thích đọc thêm một chút về thuật toán nén này. Kiểm tra bài đăng blog tuyệt vời này về lấy mẫu sắc độ tập trung đặc biệt vào hình ảnh JPEG.

(Nguồn hình ảnh: Derek Hatfield)

Là một lưu ý phụ thú vị, Adobe Photoshop không phải lúc nào cũng sử dụng mẫu con để nén. Bất kỳ hình ảnh được lưu thông qua “Tiết kiệm cho web” hộp thoại sẽ chỉ sử dụng mẫu phụ sắc độ dưới giá trị chất lượng 50%.

Truyền thông web khác biệt

Web cũng có đầy đủ các loại phương tiện hình ảnh khác nhau. Bạn có thể có hình ảnh, biểu tượng, nút, huy hiệu và hàng tấn đồ họa khác. Nhưng đáng chú ý là việc so sánh chất lượng giữa một nút và một bức ảnh chỉ không có ý nghĩa.

Khi sử dụng ảnh hoặc hình ảnh chi tiết, hãy xem xét liên kết đến một tệp JPEG ít nén hơn. Sau đó, bạn có thể thiết lập hình thu nhỏ trên trang web của mình với tỷ lệ nén cao hơn và kích thước tệp nhỏ hơn nhiều. Nhược điểm duy nhất là bạn sẽ cần cung cấp hai bộ hình ảnh cho một bộ sưu tập phương tiện. Hãy chú ý đến nhiều đồ họa khác nhau mà bạn đã khâu trên một trang web và xem xét các kỹ thuật tối ưu hóa cho từng trang riêng lẻ.

Lập kế hoạch cho một mô hình đồ họa

Bạn muốn có một hệ thống tệp có tổ chức đủ dễ để lục lọi. Một số quản trị web sẽ chọn lưu trữ ảnh của họ ở nơi khác trên web - chẳng hạn như Flickr hoặc Picasa. Tuy nhiên, bạn vẫn sẽ muốn sử dụng một số công cụ nén để giảm kích thước hình ảnh, nhưng cách bạn hiển thị chúng trên trang web của bạn sẽ khác nhau. Điều này đặc biệt đúng với sự gia tăng phổ biến của các thiết bị di động có quyền truy cập Internet.

Tôi tìm thấy một bài viết thú vị thảo luận về mã hóa JavaScript JPEG sẽ xảy ra trong mã frontend của bạn. Không có nhiều lợi ích cho các phòng trưng bày hình ảnh chất lượng cao nhưng nó có thể giảm thời gian tải cho khách truy cập di động của bạn. Nó cũng sẽ là một kỹ thuật hữu ích khi liên kết hình ảnh nóng hoặc cắt xén lại hình thu nhỏ một cách linh hoạt.

Một công cụ ưa thích khác để kiểm tra là Yahoo! Mỉm cười.it. Đây là một ứng dụng web dựa trên trình duyệt nơi bạn có thể tải lên một hình ảnh và Smush.it sẽ xóa tất cả các byte bổ sung không cần thiết để tối ưu hóa kích thước tệp. Đó là 100% lossless có nghĩa là chất lượng hình ảnh sẽ không suy giảm chút nào. Và thậm chí tốt hơn, bạn có thể tải lên hàng loạt hình ảnh từ các URL trực tiếp nếu bạn có chúng được lưu trữ trên trang web của bạn hoặc máy chủ của bên thứ 3.

Công cụ bổ sung

Có rất nhiều phần mềm để thử liên quan đến thao tác hình ảnh. Bất kỳ byte bổ sung nào bạn có thể tắt kích thước của mỗi tệp là rất quan trọng. Không có nhiều phần mềm ngoài đó, nhưng các tùy chọn có sẵn thật tuyệt vời.

IrfanView

Phần mềm miễn phí này cho Windows cho phép bạn xem và tối ưu hóa mọi tập hợp hình ảnh lớn. Tôi đặc biệt thích phần mềm này vì nó hỗ trợ chuyển đổi hàng loạt từ hình ảnh trong nhiều thư mục. Bạn có thể tự động áp dụng các chức năng tương tự trên hàng trăm hình ảnh JPEG.

Điều tuyệt vời hơn nữa là sự hỗ trợ plugin từ các nhà phát triển bên thứ 3. Một ví dụ như vậy là RIOT (Công cụ tối ưu hóa hình ảnh cấp tiến). Plugin này hoạt động cho các trình soạn thảo đồ họa nguồn mở tương tự khác như GIMP. Nó cung cấp chế độ xem hình ảnh kép trong đó bạn có thể điều chỉnh thủ công các tham số nén cho từng hình ảnh của mình.

Hỗ trợ phần mềm rất tuyệt vời và các tính năng RIOT rất dễ sử dụng. Cùng với nén hình ảnh, bạn cũng có quyền truy cập để xóa siêu dữ liệu bổ sung như EXIF và Adobe XMP. Những bit dữ liệu bổ sung này chỉ có thể thêm vào tổng kích thước tệp của bạn và chúng hiếm khi cần.

ImageOptim cho máy Mac

Nếu bạn đang chạy OS X và cần một ứng dụng nén mạnh mẽ thì không cần tìm đâu xa. ImageOptim là một công cụ mạnh mẽ để nén hình ảnh cho web - đôi khi còn tốt hơn cả Photoshop.

Toàn bộ ứng dụng hỗ trợ chức năng kéo và thả để dễ dàng tối ưu hóa các bộ ảnh lớn. Bạn có thể chạy các lệnh tương tự ngay từ bên trong Terminal và thiết lập các tập lệnh shell. Kiểm tra trang mã Google để biết thêm thông tin và hỗ trợ kỹ thuật.

Đã có một số vấn đề nhỏ với bản phát hành ổn định 1.3.3 mới nhất trong việc hiển thị hình ảnh JPEG pixelated trong Opera. Hãy thử kiểm tra tất cả các hình ảnh được tối ưu hóa của bạn trong 4 trình duyệt chính - Chrome, Safari, Firefox và Opera (và có thể cả IE). Nếu bất cứ điều gì có vẻ sai lệch, bạn có thể thử tải xuống ImageOptim 1.3.0 để chuyển đổi sạch hơn một chút.

Tài nguyên hữu ích

JPEG 101: Hướng dẫn khóa học sự cố trên JPEG
Cài đặt nén phải để lưu hình ảnh JPG cho WordPress
Kỹ thuật tối ưu hóa JPEG thông minh
Cách tối ưu hóa hình ảnh JPEG cho trang web
Mọi thứ bạn cần biết về nén ảnh

Phần kết luận

Nén JPEG là khó khăn vì bạn cần tìm sự cân bằng hợp lý giữa chất lượng và chất. Ngay cả khi tốc độ kết nối Internet hiện đại của chúng ta đang tăng lên, vẫn cần phải giảm kích thước của các trang web. Các khung công tác mới như jQuery và Typekit có thể giải quyết hàng trăm kilobyte bổ sung, ngay cả trên một thiết kế được tối ưu hóa tốt.

Tôi vẫn phải giới thiệu Adobe Photoshop làm phần mềm chỉnh sửa ảnh ra mắt. Có những ví dụ khác có thể tốt hơn cho quá trình tối ưu hóa JPEG. Nhưng các nhà thiết kế web có thể nhận được bằng các giải pháp nguồn mở ít được biết đến hơn. Nếu bạn có các thủ thuật hoặc ý tưởng tương tự về nén JPEG, vui lòng chia sẻ với chúng tôi trong khu vực thảo luận bên dưới.