Cách nén hình ảnh: Hướng dẫn của người thiết kế web

Sep 12, 2025

Cách

Tốc độ trung bình của một kết nối internet hiện đại có vẻ rất tương lai với các bậc thầy về web của quá khứ. Quay trở lại vào những ngày đầu của web, số lượng dữ liệu được chuyển giao rất quan trọng, cả về thời gian và chi phí, do đó mọi người tham gia vào việc lưu trữ một cái gì đó trực tuyến đã cố gắng tạo ra hình ảnh nhỏ hơn.

Trớ trêu thay, vấn đề đã không biến mất ngày nay. Mỗi lần bạn truy cập một trang web nặng kịch bản (như tin tức thế giới chính), nó thường kéo một tá megabyte mã JavaScript, hình ảnh, video và không có gì. Nó vẫn có thể rất chậm và thậm chí tốn một xu khá đẹp cho một số người dùng dữ liệu di động (đây không phải là vấn đề nếu bạn sử dụng một đàng hoàng người tạo ra trang web , và tốt web hosting nên theo dõi nó cho bạn).

Trong hướng dẫn này, chúng tôi sẽ tìm ra cách bạn có thể giảm bớt các tệp bitmap cho Web. Miễn là nó sử dụng các định dạng PNG và JPEG cũ tốt (xem thêm về định dạng tập tin hình ảnh. Ở đây, và chắc chắn lưu các tập tin của bạn ở bên phải lưu trữ đám mây Đồng thời), chúng ta sẽ thấy cách chúng ta có thể làm cho chúng nhỏ hơn mà không ảnh hưởng đến chất lượng, sử dụng một số nóng Dự án nguồn mở . Cuối cùng, chúng ta sẽ có các tệp nhỏ hơn đáng kể sẽ vẫn trông tốt nhưng yêu cầu ít thời gian và dữ liệu hơn để nhận được trình duyệt web của người dùng.

Đọc để lặn vào các chi tiết. Đầu tiên, một ghi chú nhanh về phần mềm. Tất cả các công cụ được đề cập ở đây là nguồn mở - nhảy xuống dưới cùng để hướng dẫn Làm thế nào để có được phần mềm bạn cần.

Các chủ đề danh mục đầu tư WordPress tốt nhất

Chọn đúng định dạng

Nó có thể phát ra tầm thường để vẫn được hấp dẫn về kích thước tệp, nhưng có đủ các ví dụ trong đó một hình ảnh quá lớn mà không có mục đích nào hoặc trông khủng khiếp mặc dù nhỏ. Để tránh những sai lầm như vậy, hãy chọn một định dạng để lưu hoặc chuyển đổi một hình ảnh một cách khôn ngoan. Sử dụng JPEG ngụ ý phá vỡ một hình ảnh thành gạch 8x8 pixel, trong đó mỗi ô được nén. Mức nén phụ thuộc vào người dùng (đó là thanh trượt khi bạn lưu hình ảnh) nhưng thông thường JPEG cho phép tăng kích thước tệp 10: 1 với chất lượng chấp nhận được.

Sự khác biệt nhận thức giữa các tệp JPEG được thực hiện với tỷ lệ nén cao (80-100) và thấp (40-60) là tối thiểu cho hình ảnh chụp ảnh nhưng rất đáng chú ý đối với những thứ như tác phẩm nghệ thuật kỹ thuật số, biểu tượng và ảnh chụp màn hình. Do đó, nên chọn JPEG cho ảnh và đi với một thứ khác cho các loại hình ảnh bitmap khác.

PNG là một trong những định dạng phù hợp nhất cho đồ họa mạng (thực tế, đó là những gì chữ viết tắt của nó có nghĩa là). Trong khi định dạng JPEG luôn mất mát (ngay cả với chất lượng được đặt thành 100), định dạng PNG có thể bị mất hoặc không. Hơn nữa, ngay cả khi có, nó nén dữ liệu bằng cách giảm số lượng màu được sử dụng trong hình ảnh, do đó kết quả thường trông vẫn còn sắc nét và rõ ràng. Vì vậy, hãy chọn PNG để mô tả Screengrabs hoặc bất kỳ loại hình ảnh nào khác với sự lấp đầy rắn.

Bắt đầu với các phương pháp thuận tiện

Imagine is based on Electron and provides a friendly interface for processing several images at once — Hãy tưởng tượng dựa trên electron và cung cấp giao diện thân thiện để xử lý một số hình ảnh cùng một lúc

Tối ưu hóa các tệp bitmap là có thể với một loạt các công cụ phần mềm miễn phí, do đó bạn không phải dựa vào trình chỉnh sửa hình ảnh đầy đủ. Hãy tưởng tượng là một ứng dụng như vậy và nó cực kỳ dễ sử dụng. Chỉ cần kéo một hình ảnh (hoặc một chồng hình ảnh) qua cửa sổ Tưởng tượng và sử dụng các thanh trượt nhỏ để điều chỉnh tỷ lệ nén.

Tưởng tượng hoạt động với các tệp JPEG, PNG và WebP và đó là lý tưởng cho việc mã hóa mất mát. Ưu điểm lớn nhất là công cụ tương tác; Nó ngay lập tức cho bạn thấy hình ảnh sẽ trông như thế nào với các cài đặt hiện tại và hiển thị kích thước tệp được đề xuất. Hãy tưởng tượng hoạt động tuyệt vời để xử lý hàng loạt - ít nhất nó có thể lưu tất cả các hình ảnh đã mở cùng một lúc nếu bạn cần.

Không cần phải nói, có hàng tá, nếu không hàng trăm, của các trình tối ưu hóa JPEG và PNG khác, bao gồm một số dịch vụ trực tuyến tiện dụng (như Tinyjpg. ). Nhưng đừng vội vã nhưng chúng tôi đã có thứ gì đó tốt hơn với tay áo của chúng tôi.

Kỹ thuật nén nâng cao

For JPEG, we used a test photo of a straw hat on a blurred background; Guetzli reduced file size by 33 per cent and Lepton by another 23 per cent — Đối với JPEG, chúng tôi đã sử dụng một hình ảnh thử nghiệm của một chiếc mũ rơm trên nền mờ; GUETZLI giảm kích thước tệp bằng 33% và Lepton thêm 23% nữa

Ngay từ cái nhìn đầu tiên, có vẻ như chúng ta không thể mất nhiều hơn một vết cắn từ các kích cỡ tệp JPEG thua lỗ, một thứ có thể được chứng minh ngay lập tức bởi các nỗ lực vô ích để lưu trữ thêm hình ảnh bằng cách sử dụng zip hoặc bất kỳ kỹ thuật nén nào khác. Nhưng đây là GuiTzli, một cookie Thụy Sĩ thông minh và bộ mã hóa tri giác tinh vi cho JPEG.

GUETZLI tạo ra một JPEG trung bình nhỏ hơn 20 đến 30% bằng cách tăng mật độ nén của nó. Bí mật là thuật toán nhận thức được cách con người cảm nhận những gì họ nhìn thấy, vì vậy hình ảnh thu được vẫn trông tuyệt vời với mắt. GUETZLI là một công cụ dòng lệnh đa nền tảng, sử dụng cú pháp sau:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

Hình ảnh gốc có thể là PNG hoặc JPEG, trong khi đầu ra luôn là JPEG. Do đó, bạn có thể sử dụng GUETZLI để chuyển đổi PNG sang JPEG nhờ vào nén trạng thái hiện đại. Chất lượng sẽ giảm từ 0-100. GUETZLI là một phần mềm cực kỳ nặng nề; Nó tiêu thụ gần 300 MB bộ nhớ trên 1 megapixel và cũng có rất nhiều công suất CPU. Chúng tôi hy vọng các JPEG siêu được tối ưu hóa của bạn sẽ không tăng cường sự nóng lên toàn cầu ...

Đồ họa mạng di động là một câu chuyện khác nhau, miễn là nó được thiết kế để mã hóa hình ảnh không mất dữ liệu. Khi bạn lưu hình ảnh dưới dạng PNG trong trình chỉnh sửa hình ảnh như GIMP, bạn có một thanh trượt tỷ lệ nén với các giá trị từ 0 đến 9. Ở đây 0 có nghĩa là không nén và nó làm cho hình ảnh cân nhắc như thể nó được lưu dưới dạng TIFF. Ngược lại, 9 dải đi xa hầu hết các thông tin màu sắc không cần thiết và kết quả trong một tệp nhỏ hơn 15-20 lần so với TIFF.

Lần này chúng ta sẽ cố gắng tạo một tệp PNG đã nhỏ (với tỷ lệ 9) thậm chí còn nhỏ hơn. Với mục đích này, chúng tôi sẽ sử dụng ZOPFLI, một công cụ mã nguồn mở khác có một lần nữa có rễ trong Google Labs. ZOPFLI là một máy nén chất lượng cao để xóa mã hóa dữ liệu GZIP và Zlib.

Phần thú vị là ZOPFLI chứa hai bộ mã hóa trong một gói: Nhị phân đa năng và công cụ 'ZOPFLIPNG' chuyên dụng. Cái sau là chính xác những gì chúng ta cần! ZOPFLIPNG là bộ mã hóa dựa trên Deflate với các thuật toán nhất định được đưa vào từ định dạng WebP. Nó đủ thông minh để tự động chọn chiến lược tốt nhất bằng cách sử dụng mã quét và loại bỏ các khối không cần thiết khác nhau bên trong PNG. Sử dụng nó với cú pháp đơn giản này:

zopflipng original_png output_png

Zopflipng có thể thực hiện công việc tốt hơn nữa với các tùy chọn rõ ràng sau:

 zopflipng: 500 --filters = 01234mepb --lossy_8bit --lossy_transparent Original_png
đầu ra_png

Giá bạn phải trả giống như với GUETZLI: Công cụ mất rất nhiều thời gian để xử lý một hình ảnh, đặc biệt nếu nó lớn. Bạn càng sử dụng nhiều lần lặp lại, sẽ càng mất nhiều thời gian nhưng 500 là một con số hợp lý. Lợi ích kích thước tệp với ZOPFLI nằm trong khoảng từ 8 đến 20 phần trăm, rất tốt cho hình ảnh hoàn hảo trực quan. Tóm lại, đạt được 8 phần trăm là phổ biến cho ảnh chụp màn hình, trong khi 20 phần trăm là có thể với các bức ảnh (khi bạn cần lưu trữ chúng dưới dạng PNG).

Nâng cấp lên các định dạng tệp Gen tiếp theo

The test PNG image was an ordinary 1920x1080 screenshot; consequent compression by Zopflipng and then FLIF gained 14 per cent without reducing the number of colours — Hình ảnh PNG thử nghiệm là một ảnh chụp màn hình 1920x1080 thông thường; do hậu quả nén của zopflipng và sau đó flif tăng 14% mà không giảm số lượng màu sắc

Chính thức, phần này vượt quá phạm vi của PNG và JPEG nhưng nó rất thực tế, vì bạn có thể sắp xếp chuyển đổi tệp khi đang bay. Những gì chúng tôi có nghĩa ở đây là sử dụng các định dạng thay thế và hình ảnh mới vượt trội so với các tiêu chuẩn công nghiệp tốt nhất (đọc WebP).

Một là Flif, một định dạng hình ảnh không mất mát mới dựa trên phương pháp nén số nguyên số nguyên số PANIAC (COUNTER-ZERO "có thể vượt trội hơn PNG, FFV1, Wutless WebP, BPG không mất dữ liệu và JPEG 2000 lossless về tỷ lệ nén. Flif có sẵn cho tất cả các nền tảng và một số người xem hình ảnh đã hỗ trợ nó nhưng nó có một chặng đường dài để đi đến dòng chính. Ngay bây giờ, nó có ý nghĩa bằng cách sử dụng flif để lưu trữ hoặc ở phía máy chủ. Nó có thể hoạt động như một định dạng lưu trữ hiệu quả. Bạn sẽ cần lấy mã từ trang GitHub của dự án và biên dịch nó. Một khi bạn có flif. Binary đã cài đặt, sử dụng lệnh sau để mã hóa hình ảnh PNG:

 flif -e Original_png unut_flif

Thay thế -pe. với -d và đặt các tệp theo thứ tự ngược lại để 'uncompress' hình ảnh của bạn trở lại PNG. Về các công cụ, ngay bây giờ có thành phần API WIC Flif cho Windows, Plugin QT flif cho Linux và trình xem hình ảnh PHEW và plugin Quicklook cho MacOS (xem phần Liên kết để biết chi tiết). So với hình ảnh đã bị tra tấn trước đó bởi zopflipng, flif làm giảm kích thước tệp của nó xuống thêm ~ 10 phần trăm. Kết quả ấn tượng!

Anh hùng cuối cùng của chúng tôi là Lepton, một định dạng nguồn mở khác được phát hành một cách hào phóng bởi các nhà phát triển Dropbox. Lepton làm với JPEG những gì flif làm với PNG. LEPTON có thể giảm xuống JPEG lên tới 22% ở chế độ lo thua lỗ, có nghĩa là bộ mã hóa không gây ra bất kỳ tổn thất nào về chất lượng so với tệp JPEG ban đầu. Dưới Hood Lepton ngụ ý các kỹ thuật thông minh nén các khối JPEG 8x8 đó. Thay vì viết Zeros và Ones, Lepton mã hóa dữ liệu bitmap bằng bộ mã hóa số học VP8, tôn trọng bối cảnh xung quanh mỗi khối.

Bài kiểm tra của chúng tôi đã chứng minh Lepton rất hiệu quả và nhanh chóng. Lệnh trông như sau:

 Lepton Original.jpg Output.YP

Và trong một hoặc hai giây, công cụ đã tạo ra tệp .lep nhỏ hơn gần một phần tư bản gốc. So với GuiTzli tốn thời gian, Lepton rất nhanh. Bạn có thể sử dụng Lepton cùng cách Dropbox làm. Định dạng cho phép bạn giảm 20 đến 25% và vì nó rất linh hoạt, bạn có thể thực hiện các chuỗi mã hóa / giải mã ruồi mà không bị nhược điểm lớn. Nhân tiện, lệnh giải mã đơn giản không kém, nó chỉ cần trao đổi hai tệp và tệp kết quả giống hệt với JPEG gốc:

 Lepton Original.lep Output.jpg

Sử dụng các kỹ thuật được mô tả để tối ưu hóa lưu trữ dữ liệu người dùng hoặc cải thiện hơn nữa tốc độ tải của các dự án web của bạn.

Làm thế nào để có được phần mềm

Mỗi phần mềm được mô tả trong hướng dẫn này là nguồn mở, vì vậy bạn có thể sử dụng nó một cách tự do. Không cần phải bận tâm để biên dịch mọi thứ từ các nguồn, vì hầu hết các công cụ dưới đây có tải xuống nhị phân. Đây là cách để có được phần mềm lên và chạy.

Lấy nhị phân GUETZLI đây . Đó là điều dễ nhất để làm. Zopfli chỉ cung cấp mã (xây dựng nó với 'thực hiện') tại GitHub. . Tuy nhiên, nó có thể là khôn ngoan hơn để bạn có được nó thông qua Trình quản lý gói Node.js:


    npm cài đặt nút-zopfli

Một số liên kết hữu ích cho flif:

Flif-hub. : Thực hiện tham khảo, nguồn và nhị phân Windows
Xnview mp. : Trình xem ảnh đa nền tảng với hỗ trợ FLIC tích hợp
QT-Flif-plugin : Một thiên đường cho người dùng Linux
Phew. : Trình xem và trình cắm Quicklook cho MacOS
Lepton. : Mã nguồn và nhị phân Windows

Bài viết này ban đầu được xuất bản trong số phát hành 316 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. MUA ĐĂNG KÝ 316 TẠI ĐÂY hoặc là Đăng ký tại đây .

Những bài viết liên quan:

Hướng dẫn tối ưu về độ phân giải hình ảnh
Cách tạo hiệu ứng văn bản và hình ảnh trục trặc trong CSS
Hướng dẫn sử dụng hình ảnh của nhà thiết kế hiệu quả hơn
4 mẹo tối ưu hóa hình ảnh thiết yếu

Cách nén hình ảnh: Hướng dẫn của người thiết kế web

Chọn đúng định dạng

Bắt đầu với các phương pháp thuận tiện

Kỹ thuật nén nâng cao

Nâng cấp lên các định dạng tệp Gen tiếp theo

Làm thế nào để có được phần mềm

Cách - Các bài báo phổ biến nhất

Bắt đầu với Adobe Dimension CC

Xây dựng một blog với Lưới và Flexbox

Thêm bộ lọc SVG bằng CSS

Animate SVG với JavaScript

Biến hình minh họa 2D thành nghệ thuật 3D

Tạo các kiểu và bố cục CSS cụ thể

Làm thế nào để điêu khắc kỹ thuật số trong zbrushcore

Cách chụp chuyển động trong kết xuất 3D của bạn

Thể loại