Khám phá cách các CMS (như WordPress và các trình tạo trang web khác) có thể giúp việc sử dụng hình ảnh thích ứng trở nên dễ dàng hơn.
Mặc dù chắc chắn là một sự cải tiến so với việc lưu thủ công các đoạn cắt thay thế của từng hình ảnh và tối ưu hoá chúng thông qua một công cụ như Squoosh.app, nhưng việc tự động nén hình ảnh trong quá trình phát triển vẫn có một số hạn chế. Thứ nhất, không phải lúc nào bạn cũng có toàn quyền kiểm soát hình ảnh dùng trên toàn bộ trang web. Hầu hết hình ảnh giao diện người dùng trên web liên quan đến nội dung nhiều hơn vấn đề về phát triển (do người dùng hoặc người chỉnh sửa tải lên), thay vì lưu trữ cùng với các thành phần phát triển như JavaScript và biểu định kiểu.
Thông thường, quy trình này sẽ yêu cầu nhiều quy trình quản lý hình ảnh: nhiệm vụ ở cấp độ phát triển đối với thành phần hình ảnh dùng để xây dựng và duy trì trang web (nền, biểu tượng, biểu trưng, v.v.) và một quy trình khác liên quan đến thành phần hình ảnh được tạo thông qua việc sử dụng trang web, chẳng hạn như ảnh chụp trong bài đăng của nhóm biên tập hoặc hình đại diện do người dùng tải lên. Mặc dù bối cảnh có thể khác nhau, nhưng mục tiêu cuối cùng đều giống nhau: mã hoá và nén tự động dựa trên các chế độ cài đặt do nhóm phát triển xác định.
May mắn là các thư viện xử lý hình ảnh mà bạn đã hiểu rõ từ quy trình phát triển cục bộ có thể được dùng trong nhiều ngữ cảnh. Ngoài ra, tuy không thể có phương pháp chung cho tất cả mã đánh dấu hình ảnh thích ứng, nhưng các hệ thống này vẫn cung cấp các giá trị mặc định hợp lý, tuỳ chọn cấu hình và hook API để dễ dàng triển khai.
Trình tạo trang web tĩnh
So với những trình chạy tác vụ, có một số điểm tương đồng trong cách trình tạo trang web tĩnh, chẳng hạn như cách tiếp cận hình ảnh của Jekyll hoặc Eleventy. Để sử dụng các công cụ này để tạo một trang web sẵn sàng triển khai, bạn phải quản lý các nội dung, bao gồm cả việc giảm thiểu CSS hoặc chuyển đổi mã và nhóm JavaScript JavaScript. Như bạn có thể tưởng tượng, điều này có nghĩa là các công cụ này hỗ trợ bạn xử lý các thành phần hình ảnh theo cùng một cách, sử dụng nhiều thư viện mà bạn đã tìm hiểu.
Trình bổ trợ hình ảnh chính thức cho Eleventy sử dụng Sharp để cho phép đổi kích thước, tạo nhiều kích thước nguồn, mã hoá lại và nén, giống như một số tác vụ bạn đã tìm hiểu ở đây.
Không giống như trình chạy tác vụ, trình tạo trang web tĩnh cung cấp thông tin chi tiết trực tiếp về cả cấu hình và cách sử dụng các thư viện đó, cũng như mã đánh dấu đang được tạo cho trang web chính thức. Điều này có nghĩa là trình tạo trang web có thể làm được nhiều việc hơn để tự động hoá mã đánh dấu hình ảnh thích ứng. Ví dụ: khi được gọi dưới dạng một phần của mã ngắn để hiển thị hình ảnh, trình bổ trợ này sẽ xuất HTML theo các tuỳ chọn cấu hình được chuyển tới Sharp.
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
async function imageShortcode(src, alt, sizes="100vw") {
let metadata = await Image(src, {
formats: ["avif", "webp", "jpeg"],
widths: [1000, 800, 400],
outputDir: "_dist/img/",
filenameFormat: function( id, src, width, format, options ) {
const ext = path.extname( src ),
name = path.basename( src, ext );
return `${name}-${width}.${format}`
}
});
let imageAttributes = {
alt,
sizes,
loading: "lazy"
};
return Image.generateHTML(metadata, imageAttributes);
}
eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};
Sau đó, đoạn mã ngắn này có thể được dùng thay cho cú pháp hình ảnh mặc định:
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
Nếu được định cấu hình để xuất nhiều chế độ mã hoá như trên, thì mã đánh dấu được tạo sẽ là phần tử <picture> chứa các phần tử <source> tương ứng, thuộc tính type và thuộc tính srcset đã được điền đầy đủ danh sách các kích thước đề xuất được tạo.
<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
Tất nhiên, trình bổ trợ này sẽ không thể generate thuộc tính sizes khả thi vì không thể biết kích thước và vị trí sau cùng của hình ảnh trong bố cục được kết xuất, nhưng lại chấp nhận giá trị này làm dữ liệu đầu vào khi tạo mã đánh dấu — một công việc khác cho RespImageLint.
Khung
Khung hiển thị phía máy khách sẽ yêu cầu một trình chạy tác vụ hoặc trình gói như Webpack để tự chỉnh sửa, mã hoá và nén các thành phần hình ảnh. Ví dụ: Trình tải đáp ứng cũng sử dụng thư viện Sharp để lưu lại các thành phần hình ảnh. Sau đó, phương thức này cho phép bạn
import hình ảnh dưới dạng đối tượng:
import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
Sau đó, bạn có thể dùng những hình ảnh đã nhập này thông qua các thành phần trừu tượng như Thành phần hình ảnh của React, hoặc trực tiếp điền sẵn mã đánh dấu hình ảnh thích ứng:
<picture>
<source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
<source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
<img
src={imageDefault.src}
srcSet={imageDefault.srcSet}
width={imageDefault.width}
height={imageDefault.height}
sizes='…'
loading="lazy"
/>
Khung có khả năng hiển thị phía máy khách là một ứng cử viên mạnh mẽ cho Lazysizes và sizes="auto" – cung cấp cho bạn các hình ảnh thích ứng gần như tự động hoàn toàn.
Hệ thống quản lý nội dung
WordPress là một trong những công ty đầu tiên sử dụng mã đánh dấu hình ảnh thích ứng gốc. API này đã dần được cải thiện kể từ khi được giới thiệu trong WordPress 4.4 với khả năng hỗ trợ WebP và kiểm soát loại MIME đầu ra. Lõi WordPress được thiết kế để tận dụng tiện ích PHP ImageMagick (hoặc không có thư viện GD).
Khi một hình ảnh được tải lên thông qua giao diện quản trị viên của WordPress, hình ảnh nguồn đó sẽ được dùng để tạo các tệp dành cho người dùng trên máy chủ, tương tự như cách bạn làm trên máy cục bộ. Theo mặc định, mọi kết quả hình ảnh đầu ra của WordPress sẽ đi kèm với thuộc tính srcset được tạo dựa trên kích thước hình ảnh được định cấu hình trong giao diện của bạn.
Hai chế độ cài đặt chính có thể được định cấu hình cho hình ảnh được tạo là chất lượng nén và loại MIME đầu ra.
Ví dụ: để đặt chất lượng nén mặc định thành 70 cho mọi hình ảnh được tạo, hãy dùng đoạn mã sau:
add_filter( 'wp_editor_set_quality', function() { return 70; } );
Để nén tốt hơn nữa, hãy chuyển định dạng đầu ra của hình ảnh JPEG đã tải lên sang WebP bằng cách làm như sau:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
Vì WordPress có hiểu biết đầy đủ về tất cả các đoạn cắt thay thế và phương thức mã hoá được tạo từ một hình ảnh đã tải lên, nên WordPress có thể cung cấp các chức năng trợ giúp như wp_get_attachment_image_srcset() để truy xuất toàn bộ giá trị srcset đã tạo của hình ảnh đính kèm.
Có lẽ bạn đã đoán ra điểm này, nên việc xử lý thuộc tính sizes sẽ khó khăn hơn một chút. Nếu không có thông tin nào về cách sử dụng hình ảnh trong bố cục, WordPress hiện mặc định sử dụng giá trị sizes để cho biết hiệu quả là "hình ảnh này nên chiếm 100% khung nhìn có sẵn, tối đa kích thước nội tại của nguồn lớn nhất" — một giá trị mặc định có thể dự đoán được, nhưng không phải giá trị chính xác cho bất kỳ ứng dụng thực tế nào. Hãy nhớ sử dụng wp_calculate_image_sizes() để đặt các thuộc tính sizes phù hợp với ngữ cảnh trong mẫu của bạn.
Tất nhiên, có vô số trình bổ trợ WordPress dành riêng cho việc tăng tốc quy trình làm việc cho hình ảnh hiện đại cho cả nhóm phát triển cũng như người dùng.
Có lẽ điều thú vị nhất là các trình bổ trợ như Trình tăng tốc trang web của Jetpack (trước đây là "Ảnh)") có thể cung cấp quy trình thương lượng phía máy chủ để mã hoá, đảm bảo người dùng sẽ nhận được phương thức mã hoá nhỏ nhất, hiệu quả nhất mà trình duyệt của họ có thể hỗ trợ mà không cần mẫu mã đánh dấu <picture> và type. Để thực hiện việc này, bạn cần sử dụng mạng phân phối nội dung hình ảnh – một công nghệ mà bạn có thể tự sử dụng, độc lập với CMS của bạn.
Tất cả những điều này cũng đúng với các giải pháp CMS được lưu trữ như Shopify, mặc dù bản thân các cơ chế sẽ khác nhau đôi chút: cung cấp các hook tương tự để tạo nguồn hình ảnh thay thế và các thuộc tính srcset tương ứng cũng như hướng nghệ thuật thông qua phần tử <picture>.