Hình ảnh đường quét

Hình ảnh đường quét có thể được coi là một tập hợp các lệnh theo từng pixel để hiển thị lưới hai chiều. Các định dạng hình ảnh đường quét phổ biến bao gồm GIF (.gif), JPEG (.jpg), PNG (.png) và WebP (.webp). Cách mỗi định dạng hình ảnh nén và mã hoá các hướng dẫn này sẽ khác nhau, dẫn đến sự khác biệt lớn giữa các kích thước tệp: một hình ảnh được mã hoá dưới dạng JPEG có thể chỉ vài trăm kilobyte, trong khi cùng một hình ảnh được mã hoá dưới dạng PNG có thể lên tới vài megabyte mà không có sự khác biệt rõ ràng nào về chất lượng đối với người dùng cuối.

Nguồn hình ảnh đường quét bị thu nhỏ vượt quá kích thước vốn có sẽ bị méo hình, khối hoặc mờ:

Đối với những hình minh hoạ chi tiết ở mức thực tế, hình ảnh đường quét là công cụ phù hợp để thực hiện việc này.

Cũng giống như việc chọn giữa ảnh đường quét và ảnh vectơ, việc chọn loại hình ảnh đường quét thích hợp cuối cùng sẽ phụ thuộc vào trường hợp sử dụng. Khi chúng tôi chia nhỏ hình ảnh đường quét thành các mã hóa, điều chúng tôi thực sự nói đến là các phương thức dùng để mô tả nội dung và các phương thức nén (hoặc thiếu các phương thức đó) mà chúng tôi đang áp dụng. Hãy nhớ rằng máy chủ không gửi hình ảnh qua dây đến trình duyệt, mà là luồng byte mô tả lưới pixel tạo nên hình ảnh đó để ứng dụng kết hợp lại.

Do đó, để hình dung rõ hơn quá trình mã hoá lưới pixel dưới dạng dữ liệu luồng byte, tôi muốn bạn hình dung rằng bạn đang hoạt động như trình duyệt web. Bạn có một tờ giấy vẽ biểu đồ milimet và một gói bút sáp màu cụ thể có tên thương hiệu. Là máy chủ web, tôi cũng có những thứ tương tự – nhưng tôi đã dùng bút sáp màu để điền hình ảnh nguồn vào giấy biểu đồ. Nếu gửi cho bạn tin nhắn văn bản thuần tuý, tôi không thể gửi hình ảnh đó cho bạn, nhưng tôi có thể truyền tải thông tin về nguồn hình ảnh bằng ngôn ngữ mà cả hai chúng ta đều hiểu bằng cách sử dụng tiêu chuẩn chung cho lưới và màu "pixel":

Hãy bắt đầu ở góc trên cùng bên trái. Hàng một, cột một có màu xanh dương. Hàng một, cột hai có màu xanh dương. Hàng một, cột 3 có màu xanh dương. Hàng một, cột bốn có màu đỏ.

Sử dụng thông tin dạng văn bản này, bạn có thể tái tạo hình ảnh tôi có trên tờ giấy biểu đồ một cách hoàn hảo.

3 hộp màu xanh dương nằm ngang, theo sau là 1 hộp màu đỏ.

Sự khác biệt về định dạng hình ảnh và cách chúng được mã hóa dưới dạng dữ liệu có thể được hiểu đơn giản là cách thông tin này được định dạng. Ví dụ: thông tin tôi đã gửi cho bạn có thể được diễn đạt dễ dàng như sau:

Hãy bắt đầu ở góc trên cùng bên trái. Hàng một, cột từ 1 đến 3 có màu xanh dương. Hàng một, cột bốn có màu đỏ.

Một trong hai nội dung mô tả này sẽ tạo ra cùng một hình ảnh, nhưng nội dung mô tả thứ hai quản lý để mô tả cùng một hình ảnh có ít ký tự hơn. Đây là phương pháp nén dữ liệu hình ảnh không mất dữ liệu: tất cả các thông tin đều giống nhau và do đó, không làm giảm độ trung thực hình ảnh, nhưng có ít byte được truyền từ tôi tới bạn hơn từ máy chủ đến công cụ kết xuất. Đây là ngôn ngữ thuần tuý tương đương với "mã hoá thời lượng chạy" cho dữ liệu hình ảnh, trong đó dữ liệu được mã hoá dưới dạng giá trị lặp lại và giá trị đếm, thay vì lặp lại giá trị đầy đủ nhiều lần.

Định dạng nén mất có vẻ như không phải là phương pháp mới bắt đầu — tại sao bạn lại muốn hình ảnh của mình trông tệ hơn? Tuy nhiên, không phải lúc nào cũng vậy và bạn cần lưu ý rằng mắt của chúng ta không có độ chân thực hoàn hảo. Chọn định dạng và chế độ cài đặt phù hợp để nén hình ảnh là một bài tập trong việc tìm ra sự cân bằng giữa mức độ chi tiết hình ảnh mà chúng ta có thể nhận biết và lượng dữ liệu được gửi đến trình duyệt. Cả hai yếu tố này đều được xác định bởi nội dung hình ảnh nguồn của chúng tôi.

Định dạng hình ảnh đường quét là những định dạng có thể bạn quen thuộc nhất với vai trò là nhà phát triển, chẳng hạn như GIF, JPEG, PNG, WebP và các định dạng khác. Bạn sẽ tìm hiểu về chức năng của từng công cụ trong vài học phần tiếp theo.