사이트 생성기, 프레임워크, CMS

WordPress와 같은 CMS, 기타 사이트 생성기로 어떻게 성공을 거둘 수 있는지 알아보세요. 더 쉽게 사용할 수 있습니다

각 이미지의 대체 컷을 수동으로 저장하고 Squoosh.app에는 개발 프로세스 단계에서 이미지 압축을 자동화하는 데 몇 가지 제한사항이 있습니다. 첫째, 사이트 전체에 사용되는 이미지를 완전히 제어할 수 있음. 웹에서 사용자에게 표시되는 대부분의 이미지는 콘텐츠에 대한 우려보다 더 높음 리포지토리에 상주하는 것이 아니라 사용자나 편집자가 업로드한 JavaScript 및 스타일시트.

이를 위해서는 일반적으로 이미지 관리를 위한 하나 이상의 프로세스가 필요합니다. 즉, 이미지 확장 소재에 사용되는 이미지 애셋을 위한 개발 수준 작업 배경, 아이콘, 로고 등 사이트 구축 및 유지관리에 대해 설명하고 사용을 통해 생성된 이미지 확장 소재와 관련하여 편집팀의 게시물에 삽입된 사진, 사용자가 업로드한 아바타 등과 같은 콘텐츠가 포함됩니다. 상황에 따라 개발팀이 정의한 설정에 기반한 자동 인코딩 및 압축이라는 최종 목표는 동일합니다.

다행히 로컬 개발 워크플로에서 알게 된 이미지 처리 라이브러리는 다양한 위치에 살펴보겠습니다 반응형 이미지 마크업에 획일적인 접근 방식은 있을 수 없지만, 이러한 시스템은 기본, 구성 옵션, API 후크 등이 있습니다.

정적 사이트 생성기

작업 실행자와 비교할 때 Jekyll이나 Eleventy 등의 정적 사이트 생성기가 이미지에 접근하는 방식은 몇 가지 유사성이 있습니다. 사용 배포 준비가 완료된 웹사이트를 제작하려면 CSS 축소, 트랜스파일, 번들링 등의 애셋 관리가 필요합니다. 살펴봤습니다 이는 이러한 도구를 통해 이미지 애셋을 동일한 방식으로 처리할 수 있게 해주며, 살펴보겠습니다.

Eleventy용 공식 이미지 플러그인은 여기에서 배운 일부 작업과 마찬가지로 Sharp를 사용하여 크기 조절, 여러 소스 크기 생성, 재인코딩, 압축을 제공합니다.

작업 실행기와 달리 정적 사이트 생성기는 이러한 라이브러리의 구성과 사용에 대해 직접적인 통찰력을 가지고 있습니다. 프로덕션 사이트에 대해 생성되는 마크업에 따라 다릅니다. 즉, 반응형 이미지를 자동화하는 데 훨씬 더 많은 작업을 할 수 있습니다. 마크업 예를 들어 이미지 표시를 위한 단축 코드의 일부로 호출되면 이 플러그인은 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);
};

그러면 기본 이미지 구문 대신 이 단축 코드를 사용할 수 있습니다.

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

위와 같이 여러 인코딩을 출력하도록 구성된 경우 생성된 마크업은<picture> 해당하는 <source> 요소, type 속성 및 srcset 속성이 이미 생성된 후보 크기를 보여줍니다.

<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>

물론 이 플러그인은 최종 크기와 위치를 알 수 없으므로 실행 가능한 sizes 속성을 생성할 수 없습니다. 이미지를 렌더링해야 하지만, 마크업을 생성할 때 RespImageLint의 또 다른 작업인 이미지 하나를 입력으로 허용합니다.

프레임워크

클라이언트 측 렌더링 프레임워크에서는 이미지 애셋을 편집, 인코딩, 압축하기 위해 작업 실행기 또는 Webpack과 같은 번들러가 필요합니다. 있습니다. 예를 들어 반응형 로더는 Sharp 라이브러리를 사용하여 이미지 확장 소재를 다시 저장합니다. 그런 다음 그런 다음 이미지를 객체로 import합니다.

  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';

그런 다음 React의 이미지 구성요소와 같은 추상화를 통해 가져온 이미지를 사용하거나 반응형 이미지를 채우는 데 사용할 수 있습니다. 이미지 마크업을 직접 가져옵니다.

<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"
  />

클라이언트 측 렌더링을 실행하는 프레임워크는 Lazysizessizes="auto"에 가장 적합하며, 자동 반응형 이미지를 사용할 수 있습니다.

콘텐츠 관리 시스템

WordPress는 네이티브 반응형 이미지 마크업을 도입한 얼리 어답터 중 하나였으며, 이 기능은 WebP를 지원하고 출력 MIME 유형을 제어하는 WordPress 4.4에 도입되었습니다. WordPress Core는 ImageMagick PHP 확장 프로그램을 사용하도록 설계되었습니다. (또는 없으면 GD 라이브러리)

WordPress 관리 인터페이스를 통해 이미지가 업로드되면 Google 서비스에서 사용자 대상 파일을 생성하는 데 소스 이미지가 사용됩니다. 로컬 컴퓨터에서와 거의 동일한 방식으로 서버에 대한 연결을 수행합니다. 기본적으로 WordPress를 통해 출력되는 모든 이미지는 테마에 구성된 이미지 크기를 기반으로 생성된 srcset 속성으로 바꿉니다.

생성된 이미지에 구성할 수 있는 두 가지 주요 설정은 압축 품질출력 MIME 유형입니다.

예를 들어 생성된 모든 이미지의 기본 압축 품질을 70로 설정하려면 다음을 사용합니다.

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

더 나은 압축을 위해 다음을 사용하여 업로드된 JPEG 이미지의 출력 형식을 WebP로 전환하세요.

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

WordPress가 모든 대체 컷을 완전히 이해하고 있다는 점을 고려하면 업로드한 이미지로부터 생성한 데이터 및 인코딩을 지원하는 경우 wp_get_attachment_image_srcset()~ 이미지 첨부파일의 생성된 srcset 값 전체를 검색합니다.

이 시점에서 짐작할 수 있겠지만 sizes 속성을 사용하는 것은 좀 더 까다롭습니다. 정보 없음 이미지가 레이아웃에 사용되는 방식에 관해 WordPress는 현재 '이 이미지'를 효과적으로 나타내는 sizes 값을 기본값으로 사용합니다. 는 사용 가능한 표시 영역의 100% 를 소스의 고유한 크기까지 최대로 차지해야 합니다. 이는 예측 가능한 기본값이지만 올바른 사용할 수 있습니다 wp_calculate_image_sizes()를 사용해야 합니다. 을 사용하여 템플릿에서 상황에 맞는 sizes 속성을 설정합니다.

물론 개발팀과 사용자 모두를 위해 최신 이미지 워크플로를 더 빠르게 만드는 전용 WordPress 플러그인이 무수히 많습니다. 가장 흥미로운 점은 Jetpack의 Site Accelerator (이전 명칭: 'Photon')와 같은 플러그인입니다. 사용자가 인코딩을 위한 서버 측 협상을 제공하여 사용자가 브라우저는 <picture>type 마크업 패턴이 없어도 지원할 수 있습니다. 이미지 콘텐츠인 전송 네트워크—CMS와는 별개로 자체적으로 활용할 수 있는 기술

Shopify와 같은 호스팅 CMS 솔루션에도 이 모든 내용이 적용되지만 메커니즘 자체는 약간 다릅니다. 대체 이미지 소스 및 상응하는 srcset 속성을 생성하기 위한 후크 및 <picture> 요소를 통한 아트 디렉션을 사용합니다.