Hình ảnh kỹ thuật số là một phần vốn có của web và thật khó để tạo bất kỳ nội dung nào mà không có một số phương tiện. Hình ảnh tĩnh khiêm tốn là một cách tuyệt vời để cung cấp thêm bối cảnh cho bài viết của bạn.

Tuy nhiên, một hình ảnh có thể có kích thước tệp rất lớn nếu không được tối ưu hóa. Nén mất dữ liệu và không mất dữ liệu là một cân nhắc phổ biến vì mỗi loại có thể làm giảm kích thước của hình ảnh, mặc dù cũng có những đánh đổi về chất lượng.

Bạn hầu như luôn cần áp dụng một số nén cho hình ảnh. Điều này giữ cho chất lượng ở mức bạn chỉ định là có thể chấp nhận được trong khi vẫn giảm kích thước tệp. Việc chọn mức nén phù hợp sẽ phụ thuộc vào mục tiêu và yêu cầu cuối cùng của bạn.

Đối với bài đăng này, chúng tôi sẽ xem xét nén mất dữ liệu và không mất dữ liệu. Xuyên suốt, chúng ta sẽ nói về quá trình một hình ảnh thực hiện để “thành hình”, nén là gì và nhiều khía cạnh khác của việc tối ưu hóa hình ảnh của bạn.

Sự khác biệt giữa Lossy và Lossless

Khi nói đến bất kỳ nén hình ảnh kỹ thuật số nào, có một số định dạng khác nhau để bạn lựa chọn. Đôi khi chúng sẽ có những tên khác tùy thuộc vào nhiều yếu tố. Tuy nhiên, ở cấp độ cốt lõi, bạn sẽ tìm thấy hai loại:

  • Nén mất dữ liệu: Mục đích ở đây là cung cấp kích thước tệp nhỏ nhất có thể cho một hình ảnh. Do đó, chất lượng hình ảnh thường thấp hơn trong danh sách ưu tiên.
  • Nén không mất dữ liệu: Bạn vẫn sẽ thấy kích thước tệp giảm đáng kể với định dạng nén này, nhưng hình ảnh sẽ không bị các lỗi tạo tác và các vấn đề khác.

Trong hầu hết các trường hợp, quyết định của bạn về việc sử dụng định dạng nào sẽ đi đến mục tiêu cuối cùng của bạn: Bạn muốn các tệp nhỏ hay bạn tập trung vào việc duy trì chất lượng?

Nén mất dữ liệu sẽ xóa dữ liệu mà nó cho là không cần thiết khỏi ảnh vĩnh viễn. Nó sử dụng nhiều kỹ thuật khác nhau để đạt được điều này, dẫn đến kích thước tệp nhỏ hơn nhiều.

Nén không mất dữ liệu cũng loại bỏ dữ liệu, nhưng nó có thể khôi phục lại bản gốc nếu cần. Mục đích là giữ chất lượng cao nhưng giảm kích thước tệp.

Có một số cách để đạt được điều này, nhưng kết quả thường giống nhau. Để tìm ra tùy chọn phù hợp với nhu cầu của bạn, trước tiên chúng ta hãy lùi lại một bước và xem lại những điều cơ bản về hình ảnh và nén nói chung.

Các yếu tố của một hình ảnh kỹ thuật số

Giống như phát triển phần mềm và web, thường có một “ngăn xếp” để đưa hình ảnh từ máy ảnh lên web.

Hình ảnh bắt đầu dưới dạng dữ liệu “thô” (do đó có tên RAW). Đây giống như mã của một ứng dụng: Các đoạn mã, dòng và giá trị chuyển thành nền với màu sắc, trình giữ chỗ hình ảnh, yếu tố động và hơn thế nữa.

Đối với hình ảnh, tệp RAW thể hiện hình ảnh hơi khác dựa trên nhà sản xuất máy ảnh, phần mềm chỉnh sửa, thuật toán không gian màu, v.v. Từ đó, bạn chỉnh sửa hình ảnh và xuất nó dưới dạng một trong số các định dạng tệp (sẽ tìm hiểu thêm về các định dạng này sau):

An example of editing a RAW file in Capture One, open to an image of two standing blocks of driftwood on a beach at sunset.
Một ví dụ về chỉnh sửa tệp RAW trong Capture One.

Có một số yếu tố khác nhau tạo nên một hình ảnh kỹ thuật số tiêu chuẩn:

  • Loại tệp: Các loại khác nhau sẽ cung cấp chất lượng có thể phù hợp hoặc không phù hợp với hình ảnh cuối cùng của bạn. Điều quan trọng là chọn loại tệp phù hợp nhất cho ứng dụng.
  • Độ phân giải: Bạn sẽ thường thấy điều này được biểu thị bằng megapixel (MP), nhưng bạn cũng sẽ sử dụng pixel trên inch (PPI) hoặc chấm trên inch (DPI). Độ phân giải cao hơn cung cấp chất lượng tốt hơn, nhưng chúng cũng làm tăng kích thước tệp ban đầu
  • Độ sâu bit: Khía cạnh này xác định thông tin màu sắc trong hình ảnh. Độ sâu bit thấp sẽ chỉ hiển thị một vài màu, trong khi độ sâu bit cao có thể hiển thị hàng triệu màu cùng một lúc. Nói chung, cao hơn là tốt hơn.
  • Kích thước: Đây là không gian vật lý mà một hình ảnh chiếm dụng. Ví dụ: 1.000 pixel x 500 pixel có thể xác định tổng kích thước của hình ảnh.
  • Không gian màu: Đây là một thuật toán xác định cách màu sắc hiển thị. Mỗi không gian màu được thiết lập khác nhau, và nó thường phụ thuộc vào sở thích của nhiếp ảnh gia.

Những yếu tố này kết hợp để cung cấp hình ảnh cuối cùng có chất lượng khác nhau. Ví dụ: một bức ảnh JPEG lớn, độ phân giải cao, độ sâu bit cao sẽ mang lại chất lượng và độ sắc nét cao nhất:

 

An image with high quality, showing the final product of the image shown in the previous screenshot of two standing blocks of driftwood on a beach at sunset, with high color contrast and object definition.
Một hình ảnh với chất lượng cao.

Ngược lại, ngay cả một hình ảnh có kích thước lớn và khả năng hiển thị nhiều màu sắc cũng có thể trông kém ở độ phân giải thấp:

An image with low quality, showing the same image of driftwood on a beach, but with lower color intensity and object definition.
Một hình ảnh có chất lượng thấp.

Sự cân bằng này là cách bạn phát triển hình ảnh cốt lõi trước khi áp dụng nén. Tuy nhiên, định dạng bạn sử dụng cho hình ảnh có một phần quan trọng trong chất lượng cuối cùng.

Cách tối ưu hóa hình ảnh web hoạt động

Bởi vì nén hình ảnh theo nghĩa chung, bạn có thể áp dụng các quy tắc tiêu chuẩn cho cách bạn tối ưu hóa hình ảnh cho web.

Chúng tôi đề cập đến rất nhiều khái niệm này ở những nơi khác trên blog Kinsta, nhưng đáng để đưa ra một bản tóm tắt nhanh để tham khảo:

  • Sử dụng độ phân giải 72 PPI, vì đây là tiêu chuẩn cho web. Bạn có thể sử dụng PPI / DPI cao hơn vì lý do lưu trữ, nhưng chúng tôi cho rằng bạn đang xuất bản lên web.
  • Đặt “cạnh dài” của hình ảnh thành 2048px, vì điều này là tối ưu cho nhiều ứng dụng khác nhau.
  • Sử dụng độ sâu màu 8 bit nếu bạn có tùy chọn.
  • Chạy một hình ảnh thông qua một công cụ nén và tối ưu hóa trước khi bạn xuất bản.

Đó là một định dạng đơn giản có thể cung cấp cho bạn kết quả nhất quán, mặc dù nén và tối ưu hóa là thứ mà chúng tôi sẽ mở rộng trong phần còn lại của bài viết này.

Cuối cùng, chúng ta hãy xem xét những lợi ích và hạn chế của nén mất dữ liệu và không mất dữ liệu.

Nén hình ảnh có thể giúp hình ảnh web của bạn như thế nào

Nói chung, “nén” ép mức tối thiểu và tối đa gần nhau hơn. Ví dụ: tính năng nén làm tăng âm lượng nhạc thấp nhất và giảm âm lượng cao nhất. Điều này làm cho mức trung bình to hơn đến tai.

Đối với hình ảnh, nén là một quá trình giảm thiểu. Điều này có nghĩa là chúng ta sẽ tập trung nhiều hơn vào việc loại bỏ dữ liệu khỏi hình ảnh của bạn để giảm kích thước tệp, trong khi vẫn giữ chất lượng cao nhất có thể.

Có rất nhiều thuật toán độc quyền khác nhau để giúp giảm kích thước tệp hình ảnh. Trong nhiều trường hợp, chúng thuộc quyền sở hữu của một công ty cụ thể. Bạn sẽ tìm thấy rất nhiều tiêu chuẩn nén “mất dữ liệu” và “không mất dữ liệu”, mỗi tiêu chuẩn có các bộ mô tả duy nhất:

The compressions options within ShortPixel, showing the options to choose a compression level of "Lossy," "Glossy," or "Lossless."
Các tùy chọn nén trong ShortPixel.

Tất cả những gì đã nói, có rất nhiều lợi ích khi áp dụng tính năng nén hình ảnh không dành riêng cho một định dạng cụ thể:

  • Bạn có thể giữ kích thước tệp ở mức thấp, điều này giúp cải thiện hiệu suất trang web của bạn.
  • Theo phần mở rộng, máy chủ của trang web của bạn sẽ có ít việc phải làm hơn, ảnh hưởng đến hiệu suất.
  • Kích thước tệp nhỏ giúp cắt giảm lượng phát thải của máy chủ. Như vậy, bạn sẽ góp phần vào một tương lai bền vững và có đạo đức.
  • Bạn có thể hiển thị chất lượng gần như hoàn hảo và có thể so sánh được tùy thuộc vào thuật toán và chất lượng nén mà bạn chọn.

Giống như việc tạo một hình ảnh có thể chia sẻ, chơi với các giá trị nén khác nhau, sử dụng một công ty cụ thể và chọn thuật toán chính xác là rất quan trọng trong việc tìm kiếm kết quả phù hợp với bạn.

Ưu và nhược điểm của nén Lossy

Nén Lossy làm giảm kích thước tệp của hình ảnh, gần như loại trừ tất cả các khía cạnh khác. Cách thức hoạt động của thuật toán là xóa dữ liệu vĩnh viễn. Điều này có thể phá hủy như nó âm thanh.

Mặc dù chúng ta sẽ không đi sâu vào các vấn đề và bu lông quá nhiều, nhưng hãy biết rằng một số thao tác nén mất dữ liệu bị loại bỏ có thể nhìn thấy trong hình ảnh. Ý tưởng là cung cấp sự thể hiện tốt nhất của hình ảnh gốc, chất lượng cao với trọng lượng nhẹ hơn – và điều này có nghĩa là một số dữ liệu sẽ không được thực hiện.

Đăng kí để nhận thư mới

Nói chung, có một số lợi ích khi sử dụng nén mất dữ liệu:

  • Kích thước tệp sẽ nhỏ – trong một số trường hợp, dưới 10 kilobyte (KB).
  • Việc giảm chất lượng sẽ có thể chấp nhận được trong nhiều trường hợp, mặc dù hiện vật.

Điều này đưa chúng ta đến tiêu cực của việc sử dụng nén mất dữ liệu – chất lượng hình ảnh sẽ giảm với bất kỳ lượng nén nào:

A compression slider for a JPEG image, showing an "Export" dialog with the "Format" set to "JPEG" and the "Quality" bar set to approximately 70%, along with the reduced file size (716 KB).
Thanh trượt nén cho ảnh JPEG.

Bạn sẽ thấy dải màu đó – nơi các sắc độ màu không hiển thị theo đúng cách – và sự mất rõ ràng của các cạnh sẽ có thể nhìn thấy trong một số trường hợp. Hình ảnh có ít màu hơn sẽ ít hiển thị điều này hơn, nhưng vẫn có hiện tượng giảm độ rõ nét.

Ngoài ra, sự suy giảm hình ảnh là một tính năng thường trực của quá trình nén. Điều này có nghĩa là không có cách nào để đảo ngược tác động vào một ngày sau đó.

Mặc dù có những hạn chế, việc nén mất dữ liệu là rất tốt cho web và hiệu suất trang web của bạn. Kích thước tệp nhỏ không phải lúc nào cũng dẫn đến hình ảnh nhiễu hạt, mặc dù bạn (tất nhiên) có thể đưa mọi thứ đến mức cực đoan:

A portrait of a stuffed cat toy, with obvious artifacts of over-compressing, such as banding, un-sharp elements, and degradation.
Ví dụ về hình ảnh bị nén quá mức.

Tuy nhiên, thua lỗ không phải là lựa chọn duy nhất. Nén không mất dữ liệu là một giải pháp thay thế cho chủ sở hữu trang web có ý thức về chất lượng.

Ưu và nhược điểm của nén không mất mát

Nén không mất dữ liệu thực hiện những gì ghi trên nhãn: Nó nén kích thước tệp của hình ảnh nhiều nhất có thể mà không ảnh hưởng đến chất lượng hiển thị. Nó thực hiện điều này bằng cách xóa siêu dữ liệu hình ảnh, có thể chiếm dung lượng không cần thiết:

A metadata panel with photo details, overlaying an image of a brown squirrel sitting on grass at the base of a tree.
Siêu dữ liệu của hình ảnh.

Thuật toán nén không mất dữ liệu cũng tìm kiếm các chuỗi pixel lặp lại, sau đó mã hóa một phím tắt để hiển thị chúng. Ví dụ: lấy “Giao diện dòng lệnh”. Bạn thường sẽ xác định từ viết tắt của nó một lần, sau đó sử dụng “CLI” (hoặc từ viết tắt bạn đã chọn) để tham chiếu nó với tốc độ cực nhanh

Nén không mất dữ liệu hoạt động theo cách tương tự ở chỗ nó ít phá hủy hơn. Mặc dù việc xóa siêu dữ liệu sẽ không thể hoàn nguyên, nhưng một số nén sẽ được thực hiện, khiến nó trở thành một thuật toán linh hoạt cho nhiều mục đích sử dụng.

Ưu điểm của việc sử dụng nén không mất dữ liệu xoay quanh việc giữ lại chất lượng:

  • Nén không mất dữ liệu giữ được chất lượng hình ảnh tốt nhất so với tất cả các thuật toán khác.
  • Lossless là tuyệt vời cho mục đích lưu trữ. Ví dụ, một nhiếp ảnh gia có thể cân bằng tài nguyên lưu trữ với một hình ảnh lưu giữ nhiều dữ liệu nhất.
  • Lossless là thuật toán nén ưa thích cho nghệ thuật thị giác: nhiếp ảnh, thiết kế đồ họa, nghệ thuật kỹ thuật số, v.v. Kết hợp thuật toán không mất dữ liệu với độ sâu và độ phân giải thích hợp có thể đạt được gần như một bản sao “một-một”.

Tuy nhiên, có một số điều cần lưu ý về việc nén không mất dữ liệu phục vụ các ngách cụ thể như thế nào: Phạm vi ứng dụng nhỏ. Điều này làm giảm tính khả dụng tổng thể của nó.

Tất cả các gói dịch vụ lưu trữ của Kinsta đều bao gồm sự hỗ trợ 24/7 từ các nhà phát triển và kỹ sư WordPress kỳ cựu của chúng tôi. Trò chuyện với cùng một nhóm hỗ trợ khách hàng trong danh sách Fortune 500 của chúng tôi. Kiểm tra các kế hoạch của chúng tôi!

Dưới đây là một số nhược điểm khác của nén không mất dữ liệu cần xem xét:

  • Nếu một trang web sử dụng nhiều hình ảnh, nén không mất dữ liệu có thể không tối ưu để hiển thị chúng. Điều này là do bạn sẽ muốn đánh giá kích thước tệp nhỏ hơn trong các loại tình huống này trong hầu hết các trường hợp.
  • Mặc dù nén làm giảm kích thước tệp, các thuật toán không mất dữ liệu không làm thay đổi dữ liệu hình ảnh nhiều như bị mất. Do đó, bạn có thể chỉ thấy kích thước giảm nhẹ hơn là kết quả giảm béo.

Tiếp theo, chúng ta sẽ xem xét cách nhanh nhất (và có thể là tốt nhất) để làm như vậy.

Làm thế nào để lựa chọn giữa Lossy và Lossless

Đến đây, bạn đã hiểu sự khác biệt giữa nén mất dữ liệu và nén không mất dữ liệu. Tuy nhiên, bạn vẫn có thể không biết thuật toán nào tốt nhất để sử dụng trên trang web của mình.

Có hai tình huống cần xem xét:

  1. Đối với hầu hết các trường hợp sử dụng trên web, việc nén mất dữ liệu được chấp nhận để sử dụng.
  2. Nếu bạn muốn hiển thị nhiếp ảnh hoặc nghệ thuật được chụp, tính năng nén không mất dữ liệu sẽ phục vụ bạn tốt hơn.

Những cân nhắc này dựa trên việc sử dụng một trong các định dạng hình ảnh web tiêu chuẩn, chẳng hạn như JPEG, PNG hoặc GIF. Tuy nhiên, nhu cầu nén của bạn có thể khác với các định dạng hiện đại hơn như HEIC và WebP.

Chúng tôi muốn nói rằng trừ khi bạn hiển thị hình ảnh trên trang web của mình, thì nén mất dữ liệu sẽ là lựa chọn mặc định của bạn. WordPress nén hình ảnh theo mặc định, điều này giúp minh chứng rằng việc nén mất dữ liệu phù hợp với hầu hết mọi ứng dụng.

Sử dụng dịch vụ nén trực tuyến để tối ưu hóa hình ảnh của bạn

Có nhiều cách bạn sẽ nén hình ảnh của mình trước khi hiển thị trên trang web của mình. Ví dụ: bạn có thể chọn áp dụng nén ở giai đoạn chỉnh sửa. Đây có thể là sản phẩm phụ của việc chuyển đổi từ các định dạng RAW.

Tuy nhiên, một lựa chọn phổ biến là một trong nhiều dịch vụ trực tuyến. Mỗi cái sẽ cung cấp một lựa chọn các thuật toán và một giao diện người dùng (UI) mẫu mực. Hơn nữa, hầu hết đều có một số dịch vụ miễn phí, ít nhất là để thử ứng dụng trước khi bạn cam kết.

Chúng tôi đề cập đến một số tùy chọn trong bài viết của chúng tôi về tối ưu hóa hình ảnh, mặc dù đây là các plugin dành riêng cho WordPress kết nối với giao diện lập trình ứng dụng (API). Tin tốt là rất nhiều plugin này cũng cung cấp giao diện trực tuyến. Ví dụ: hãy xem xét ShortPixel:

The ShortPixel interface, showing the ShortPixel logo at the top, above the words "Online image compression & optimization: Compress JPG, PNG, and GIF online".
Giao diện ShortPixel.

Tại đây, bạn sẽ kéo hình ảnh vào trình tải lên, sau đó đợi ứng dụng nén và xử lý chúng. Tuy nhiên, bạn sẽ muốn chọn thuật toán trước, vì quá trình sẽ bắt đầu ngay lập tức.

Sự lựa chọn rất đơn giản: Hai hình thức nén mất dữ liệu (“Lossy” và “Glossy”) và một tùy chọn không mất dữ liệu. Giao diện của ShortPixel thực hiện tốt công việc giải thích sự khác biệt giữa từng thuật toán và bạn có thể tải xuống các hình ảnh trong vòng vài giây.

Mặc dù cả hai đều có thể đáp ứng nhu cầu của bạn, nhưng giao diện của Imagify trông bóng bẩy và chuyên nghiệp hơn so với giao diện của ShortPixel. Ngoài ra còn có ba “mức nén” ở đây – Bình thường, Linh hoạt và Siêu:

The Imagify interface, showing a large "Upload" box to the right and options to the left, including selections for "Compression Level" and other "Output Options" like resizing.
Giao diện Tưởng tượng.

Sự khác biệt nhỏ ở đây là Imagify bắt đầu với tính năng nén không mất dữ liệu và hoạt động theo cách của nó theo thuật toán mất dữ liệu với các hiện vật nặng. Tuy nhiên, có một số tùy chọn khác mà bạn sẽ không tìm thấy trong các giải pháp khác.

Đối với người mới bắt đầu, bạn có thể giữ nguyên dữ liệu EXIF cho hình ảnh của mình và thậm chí thay đổi kích thước chúng sau khi chuyển đổi. Đôi khi, điều này là vô giá, đặc biệt nếu bạn muốn áp dụng mức nén có thể loại bỏ dữ liệu EXIF hoặc hạn chế cách bạn thay đổi kích thước hình ảnh.

Giống như tên gọi thần thoại của nó, Kraken có thể quấn hình ảnh của bạn và áp dụng nhiều loại nén khác nhau. Hầu hết người dùng sẽ chọn loại Lossy hoặc Lossless.

The Kraken interface, showing an ordered list of steps to upload an image, the second of which includes "Lossy" and "Lossless" options.
Giao diện Kraken.

Tuy nhiên, cũng có một chế độ Chuyên gia:

The Kraken Expert mode options under the "Expert" tab, showing options to resize the image, preserve its metadata, and alter its orientation.
Các tùy chọn chế độ Chuyên gia Kraken.

Điều này cho phép bạn điều chỉnh độ nén theo nhu cầu của riêng mình, trong số các tùy chọn khác. Ví dụ: bạn có thể điều chỉnh cả mức độ nén JPEG và PNG, chọn bảo toàn siêu dữ liệu khỏi hình ảnh và thậm chí làm việc với lấy mẫu con sắc độ để thay đổi màu sắc hơn nữa.

Bản tóm tắt

Hình ảnh có thể giống như một khía cạnh đơn giản của trang web của bạn: Bạn lấy một tệp, tải nó lên WordPress, sau đó thêm một Khối hình ảnh để hiển thị nó.

Tuy nhiên, còn rất nhiều điều khác trong quá trình chuẩn bị hình ảnh cho web mà bạn có thể nhận ra. Định dạng nén bạn chọn có thể ảnh hưởng đến kích thước tệp, chất lượng hình ảnh và hơn thế nữa.

Bài đăng này đã xem xét việc nén mất dữ liệu và không mất dữ liệu và tóm tắt bạn nên chọn cái nào. Mặc dù đi bộ giữa chất lượng và kích thước, nhưng nén mất dữ liệu là hoàn hảo cho hầu hết các trường hợp sử dụng trên web. Các nhiếp ảnh gia hoặc những người lo ngại về việc làm giả chất lượng hình ảnh sẽ muốn sử dụng tính năng nén không mất dữ liệu, mặc dù có ít lợi ích hơn liên quan đến kích thước tệp.

Bạn đứng về phía nào trong cuộc chiến giữa nén mất dữ liệu và nén không mất dữ liệu? Hãy cho chúng tôi biết suy nghĩ của bạn trong phần bình luận bên dưới!


Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
  • Tích hợp Cloudflare Enterprise.
  • Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
  • Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.

Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.