Trình tạo trang web, khung và CMS

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 bạn dễ sử dụng hơn.

Mặc dù đây là một điểm cải tiến so với việc lưu các đoạn cắt thay thế của mỗi hình ảnh theo cách thủ công và tối ưu hoá chúng bằng cách thủ công thông qua một công cụ như Squoosh.app, việc tự động hoá tính năng nén hình ảnh như một bước trong quá trình phát triển có một số hạn chế. Thứ nhất, bạn không thể luôn có toàn quyền kiểm soát đối với hình ảnh được dùng xuyên suốt một trang web — hầu hết hình ảnh mà người dùng nhìn thấy trên web là về nội dung đáng quan tâm hơn thay vì các mối lo ngại về việc phát triển (do người dùng hoặc người chỉnh sửa tải lên), thay vì tồn tại trong một kho lưu trữ bên cạnh các tài sản phát triển như JavaScript và biểu định kiểu.

Việc này thường đòi hỏi nhiều quy trình quản lý hình ảnh: một tác vụ cấp phát triển đối với các thành phần hình ảnh được sử dụng trong xây dựng và duy trì một trang web (hình nền, biểu tượng, biểu trưng, v.v.) và một số vấn đề khác liên quan đến thành phần hình ảnh được tạo ra thông qua việc sử dụng về trang web, chẳng hạn như ảnh được nhóm biên tập nhúng trong bài đăng 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 thì mục tiêu cuối cùng đều giống nhau: mã hoá và nén tự động dựa trên chế độ cài đặt do nhóm phát triển xác định.

May mắn thay, các thư viện xử lý hình ảnh mà bạn đã hiểu từ quy trình phát triển cục bộ có thể được sử dụng với bất kỳ số lượng nào ngữ cảnh. Mặc dù không bao giờ có một phương pháp chung để đá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 phương pháp hợp lý mặc định, tuỳ chọn cấu hình và hook API để dễ dàng triển khai.

Máy phát điện tại chỗ

So với 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ư hình ảnh phương pháp tiếp cận của Jekyll hoặc Eleventy. Sử dụng những công cụ này để xây dựng một trang web sẵn sàng triển khai yêu cầu bạn phải quản lý tài sản, bao gồm cả việc giảm thiểu hoặc chuyển đổi mã hoá và nhóm các dịch vụ so sánh giá (CSS) JavaScript. Như bạn có thể hình dung, điều này có nghĩa là các công cụ này cho phép bạn xử lý thành phần hình ảnh theo cách tương tự, thông qua 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 để đổ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 có 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 đó, và mã đánh dấu được tạo cho trang web sản xuất – tức là mã đánh dấu có thể làm được nhiều hơn để tự động hoá hình ảnh thích ứng của chúng tôi mã đánh dấu. Ví dụ: khi được gọi như 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 vào các lựa chọn cấu hình được chuyển cho 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 đó, bạn có thể dùng mã ngắn này 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 kiểu mã hoá, như ở trên, mã đánh dấu được tạo sẽ là phần tử <picture> chứa các phần tử <source>, thuộc tính type và thuộc tính srcset tương ứng đã được điền đầy đủ danh sách kích thước ứng viên đã 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ể tạo thuộc tính sizes khả thi vì trình bổ trợ này không thể biết kích thước và vị trí cuối cùng của hình ảnh trong bố cục được kết xuất, nhưng chấp nhận một công việc 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ẽ cần có một trình chạy tác vụ hoặc trình gói như Webpack để chỉnh sửa, mã hoá và nén các thành phần hình ảnh chính họ. Ví dụ: Trình tải thích ứng cũng sử dụng thư viện Sharp để lưu lại thành phần hình ảnh. Sau đó, công cụ này cho phép bạn sau đó import hình ảnh của bạn 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ể sử dụng các 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 để điền sẵn các hình ảnh đáp ứng của bạn đánh dấu hình ảnh trực tiếp:

<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 kết xuất phía máy khách là một lựa chọn thích hợp cho Lazysizesizes="auto", cung cấp cho bạn gần như đầy đủ hình ảnh đáp ứng tự động.

Hệ thống quản lý nội dung

WordPress là một trong những công cụ đầu tiên sử dụng mã đánh dấu hình ảnh thích ứng gốc và API đã 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ế để sử dụng tiện ích PHP ImageMagick (hoặc nếu 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 giao diện người dùng trên máy chủ, theo cách giống 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 do WordPress xuất ra sẽ bằng 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ể định cấu hình cho những hình ảnh được tạo là chất lượng nénloại mime đầu ra.

Ví dụ: để đặt chất lượng nén mặc định thành 70 cho tất cả hình ảnh được tạo, hãy sử dụng hàm sau:

add_filter( 'wp_editor_set_quality', function() { return 70; } );

Để nén hiệu quả hơn nữa, hãy chuyển đổi đị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 nắm rõ tất cả các phiên bản thay thế và mã hoá được tạo từ một hình ảnh được tải lên, công cụ này có thể cung cấp các chức năng trợ giúp như wp_get_attachment_image_srcset() thành truy xuất giá trị srcset đầy đủ được tạo của tệp đính kèm hình ảnh.

Như bạn có thể đã đoán đến thời điểm này, việc làm việc với thuộc tính sizes sẽ phức tạp hơn một chút. Không có bất kỳ thông tin nào về cách sử dụng hình ảnh trong một bố cục, WordPress hiện đang mặc định sử dụng giá trị sizes cho biết "hình ảnh này" sẽ chiếm 100% khung nhìn có sẵn, lên tới 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, nhưng không chính xác cho mọi ứng dụng thực tế. 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ợ của WordPress được thiết kế để giúp các nhóm phát triển cũng như người dùng làm cho quy trình làm việc liên quan đến hình ảnh hiện đại trở nên nhanh hơn. 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à "Photon") có thể cung cấp quá trình thương lượng phía máy chủ cho việc mã hoá, đảm bảo rằng người dùng sẽ nhận được mã hoá nhỏ nhất, hiệu quả nhất mà trình duyệt có thể hỗ trợ mà không cần mẫu đánh dấu <picture>type. Thông qua việc sử dụng nội dung hình ảnh mạng phân phối—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ả đ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ơ chế sẽ khác nhau đôi chút: cung cấp các giải pháp tương tự các hook để tạo nguồn hình ảnh thay thế và các thuộc tính srcset tương ứnghướng nghệ thuật thông qua phần tử <picture>.