Generatory witryn, platformy i systemy CMS

Dowiedz się, jak za pomocą systemów CMS, takich jak WordPress, i innych generatorów witryn. łatwiej korzystać z elastycznych obrazów.

Chociaż z pewnością znacznie lepsze w stosunku do ręcznego zapisywania alternatywnych cięć i ręcznej optymalizacji ich za pomocą takich narzędzi, Squoosh.app, automatyczna kompresja obrazów w procesie programowania podlega pewnym ograniczeniom. W przypadku jednej osoby nie możesz: zawsze mają pełną kontrolę nad obrazami używanymi w witrynie – większość obrazów w internecie dla użytkowników ma problem z treścią niż obawy związane z rozwojem, przesyłane przez użytkowników lub redaktorów. Nie muszą przebywać w repozytorium obok zasobów deweloperskich, JavaScript i arkusze stylów.

Zwykle wymaga to więcej niż jednego procesu zarządzania obrazami. Jest to zadanie na etapie programowania dla zasobów graficznych używanych w tworzenie i utrzymywanie witryny (tła, ikony, logo itp.) oraz inne zasoby graficzne wygenerowane w wyniku korzystania , np. zdjęcia umieszczone w poście przez zespół redakcyjny lub awatar przesłany przez użytkownika. Choć kontekst może różnią się od siebie, końcowe cele są takie same: automatyczne kodowanie i kompresja na podstawie ustawień zdefiniowanych przez zespół programistów.

Na szczęście biblioteki przetwarzania obrazów, które przyjęłaś w ramach lokalnych procesów programowania, mogą być używane w dowolnej liczbie kontekstów. Chociaż nie ma uniwersalnego podejścia do znaczników elastycznych obrazów, systemy te zapewniają ustawienia domyślne, opcje konfiguracji i punkty zaczepienia interfejsu API, aby ułatwić ich implementację.

Generatory statycznej witryn

W porównaniu z generatorami witryn statycznych jest to podobieństwo do sposobu, w jaki generatory witryn statycznych, np. Jekyll czy Eleventy. Zastosowanie Te narzędzia do tworzenia witryn gotowych do wdrożenia wymagają zarządzania zasobami, w tym minifikacji, transpilacji i pakietu CSS JavaScriptu. Jak możesz sobie wyobrazić, oznacza to, że narzędzia te pozwalają przetwarzać komponenty z obrazem w ten sam sposób z wykorzystaniem wielu bibliotek które już znasz.

Oficjalna wtyczka graficzna do Eleventy wykorzystuje Sharp do zmiany rozmiaru, generowania wielu rozmiarów źródeł, ponownego kodowania i kompresji, tak jak w przypadku niektórych opisanych tu zadań.

W przeciwieństwie do narzędzia do uruchamiania zadań generator statycznych witryn zapewnia bezpośredni wgląd zarówno w konfigurację, jak i wykorzystanie tych bibliotek, generowane są znaczniki dla witryny produkcyjnej, co oznacza, że może ona znacznie lepiej zautomatyzować elastyczny obraz. znacznikami. Jeśli na przykład ta wtyczka zostanie wywołana w ramach krótkiego kodu do wyświetlania obrazów, zwróci kod HTML zgodnie z do opcji konfiguracyjnych przekazanych firmie 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);
};

Ten krótki kod może być używany zamiast domyślnej składni obrazu:

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

Jeśli tak jest, jak powyżej, wygenerowanym znacznikiem będzie element <picture> zawierający wiele kodowania odpowiednie elementy <source>, atrybuty type i srcset zostały już w pełni wypełnione listą generowane rozmiary kandydatów.

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

Oczywiście ta wtyczka nie będzie w stanie wygenerować prawidłowego atrybutu sizes, ponieważ nie da się określić ostatecznych rozmiarów ani pozycji ale używa go jako danych wejściowych podczas generowania znaczników. To kolejne zadanie dla RespImageLint.

Platformy

Do edycji, kodowania i kompresowania zasobów graficznych, platformy renderowania po stronie klienta będą wymagały programu uruchamiającego zadania lub narzędzia do tworzenia pakietów, takiego jak Webpack. się dowiedzieć. Na przykład Elastyczne-loader również wykorzystuje bibliotekę Sharp do ponownego zapisywania komponentów z obrazem. Pozwala to na: a następnie import Twoje obrazy jako obiekty:

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

Zaimportowane obrazy można następnie wykorzystać w abstrakcjach, np. w komponencie Obraz React, lub do wypełnienia elastycznych reklam. bezpośrednio:

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

Platforma obsługująca renderowanie po stronie klienta dobrze sprawdza się w przypadku Lazysizes i sizes="auto". Dzięki temu prawie w pełni z automatycznymi elastycznymi obrazami.

Systemy zarządzania treścią

WordPress był jednym z pierwszych sposobów wdrożenia znaczników natywnych obrazów elastycznych, a interfejs API był stopniowo udoskonalony od wprowadzone w WordPressie 4.4 z obsługą protokołu WebP i kontrolą nad wyjściowym typem MIME. Podstawowe oprogramowanie WordPressa wykorzystuje rozszerzenie ImageMagick PHP. (lub, jeśli jej nie ma, jest to biblioteka GD).

Kiedy obraz jest przesyłany przez interfejs administratora WordPress, obraz źródłowy jest używany do generowania plików widocznych dla użytkowników w serwera – w taki sam sposób, w jaki robisz to na swoim komputerze lokalnym. Domyślnie wszystkie obrazy wyjściowe obrazów WordPress zostaną z atrybutem srcset wygenerowanym na podstawie rozmiarów obrazu skonfigurowanych w motywie.

Dwa najważniejsze ustawienia, które można skonfigurować dla generowanych obrazów, to jakość kompresji i wyjściowy typ MIME.

Aby na przykład ustawić domyślną jakość kompresji na 70 w przypadku wszystkich wygenerowanych obrazów, użyj tego:

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

Aby uzyskać jeszcze lepszą kompresję, zmień format wyjściowy przesłanych obrazów JPEG na format WebP, stosując:

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

Biorąc pod uwagę, że WordPress w pełni rozumie wszystkie alternatywne cięcia i kodowania generowanego na podstawie przesłanego obrazu, może zapewnić funkcje pomocnicze, takie jak wp_get_attachment_image_srcset() na pobierz pełną, wygenerowaną wartość srcset załącznika graficznego.

Jak się pewnie domyślasz, praca z atrybutem sizes jest nieco bardziej skomplikowana. Brak informacji sposobu wykorzystania obrazów w układzie. Obecnie WordPress domyślnie ustawia wartość sizes, która brzmi „ten obraz” powinny zajmować 100% dostępnego widocznego obszaru, aż do wewnętrznego rozmiaru największego źródła” – jest to przewidywalne ustawienie domyślne, ale niepoprawne do zastosowań w praktyce. Upewnij się, że korzystasz z wp_calculate_image_sizes() aby ustawić w szablonach odpowiednie do kontekstu atrybuty sizes.

Oczywiście istnieje niezliczone wtyczki WordPress, które przyspieszają nowoczesne przepływy pracy związane z obrazami zarówno dla zespołów programistycznych, jak i użytkowników. Najciekawsze są chyba wtyczki takie jak Jetpack's Site Accelerator (dawniej „Photon”) umożliwia negocjacje kodowania po stronie serwera, dzięki czemu użytkownicy otrzymują najmniejsze i najwydajniejsze kodowanie przeglądarka obsługuje bez konieczności użycia wzorców znaczników <picture> i type. Jest to możliwe dzięki wykorzystaniu treści graficznych sieć dostarczania treści – technologia, z której możesz korzystać samodzielnie, niezależnie od swojego CMS.

Wszystko to dzieje się też w przypadku rozwiązań hostowanych w systemach CMS, takich jak Shopify. Jednak same mechanizmy nieco się od siebie różnią. Oferują podobne rozwiązania. punkty zaczepienia do generowania alternatywnych źródeł obrazów i odpowiadających im atrybutów srcset i kierunek sztuki w elemencie <picture>.