Generator Situs, framework, dan CMS

Cari tahu bagaimana CMS seperti WordPress, dan pembuat situs lainnya dapat membuatnya penggunaan gambar responsif yang lebih mudah.

Meskipun tentu saja peningkatan dari penyimpanan alternatif potongan setiap gambar secara manual dan pengoptimalannya secara manual melalui alat seperti Squoosh.app, otomatisasi kompresi gambar sebagai langkah dalam proses pengembangan memiliki beberapa batasan. Pertama, Anda mungkin tidak selalu memiliki kontrol penuh atas gambar yang digunakan di seluruh situs—sebagian besar gambar di web yang ditampilkan kepada pengguna adalah konten yang lebih daripada masalah pengembangan, yang diupload oleh pengguna atau editor, dan tidak harus berada dalam repositori bersama dengan aset pengembangan seperti JavaScript dan stylesheet.

Ini biasanya akan memerlukan lebih dari satu proses untuk pengelolaan gambar: tugas tingkat pengembangan untuk aset gambar yang digunakan dalam membuat dan memelihara situs—latar belakang, ikon, logo, dan sebagainya—serta situs lainnya yang berkaitan dengan aset gambar yang dihasilkan melalui penggunaan situs Anda, seperti foto yang disematkan dalam postingan oleh tim editorial, atau avatar yang diupload oleh pengguna. Meskipun konteksnya mungkin berbeda, tujuan akhirnya sama: encoding dan kompresi otomatis berdasarkan setelan yang ditentukan oleh tim pengembangan.

Untungnya, library pemrosesan gambar yang telah Anda pahami dari alur kerja pengembangan lokal Anda dapat digunakan di berapa pun konteks tambahan. Dan meskipun tidak pernah ada pendekatan satu ukuran yang cocok untuk semua pada markup gambar responsif Anda, sistem ini memberikan pendekatan yang logis setelan default, opsi konfigurasi, dan hook API untuk memudahkan implementasinya.

Generator Situs Statis

Dibandingkan dengan {i>task-runner<i}, ada beberapa kesamaan dalam cara generator situs statis seperti Jekyll atau Eleventy menangani gambar. Menggunakan alat ini untuk menghasilkan situs web siap pakai membutuhkan pengelolaan aset, termasuk minifikasi atau transpilasi CSS dan pemaketan JavaScript. Seperti yang mungkin Anda bayangkan, ini berarti alat ini memungkinkan Anda memproses aset gambar dengan cara yang sama, menggunakan banyak library yang telah Anda pelajari.

Plugin gambar untuk Eleventy resmi menggunakan Sharp untuk menyediakan pengubahan ukuran, pembuatan berbagai ukuran sumber, encoding ulang, dan kompresi, seperti beberapa tugas yang telah Anda pelajari di sini.

Tidak seperti {i>task-runner<i}, generator situs statis memiliki wawasan langsung tentang konfigurasi dan penggunaan dan markup yang dihasilkan untuk situs produksi—yang berarti situs itu dapat berbuat lebih banyak untuk mengotomatiskan markup. Misalnya, jika dipanggil sebagai bagian dari kode singkat untuk menampilkan gambar, plugin ini akan menghasilkan HTML sesuai dengan opsi konfigurasi yang diteruskan ke 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);
};

Kode singkat ini kemudian dapat digunakan sebagai pengganti sintaksis gambar default:

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

Jika dikonfigurasi untuk menghasilkan beberapa encoding, seperti di atas, markup yang dihasilkan akan menjadi elemen <picture> yang berisi elemen <source>, atribut type, dan atribut srcset yang sesuai sudah terisi penuh dengan daftar ukuran kandidat yang dibuat.

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

Tentu saja, plugin ini tidak akan dapat membuat atribut sizes yang valid, karena tidak dapat mengetahui ukuran dan posisi akhir gambar dalam tata letak yang dirender, tetapi menerima salah satunya sebagai input saat membuat markup—tugas lain untuk RespImageLint.

Framework

Framework rendering sisi klien akan memerlukan task-runner atau pemaket seperti Webpack untuk mengedit, mengenkode, dan mengompresi aset gambar itu sendiri. Misalnya, Responsive-loader juga menggunakan library Sharp untuk menyimpan ulang aset gambar. Kemudian memungkinkan Anda untuk lalu import gambar Anda sebagai objek:

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

Gambar yang diimpor ini kemudian dapat digunakan melalui abstraksi seperti Komponen Gambar React atau untuk mengisi gambar responsif markup gambar secara langsung:

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

Framework yang melakukan rendering sisi klien adalah kandidat kuat untuk Lazysizes dan sizes="auto", sehingga memberi Anda hampir sepenuhnya gambar responsif otomatis.

Sistem Pengelolaan Konten

WordPress adalah salah satu pengguna paling awal markup gambar responsif native, dan API ini telah ditingkatkan secara bertahap sejak diperkenalkan di WordPress 4.4 dengan dukungan untuk WebP dan kontrol atas jenis mime output. WordPress core dirancang untuk menggunakan ekstensi PHP ImageMagick (atau, jika tidak, library GD).

Ketika gambar diupload melalui antarmuka admin WordPress, gambar sumber tersebut digunakan untuk membuat file yang ditampilkan kepada pengguna di server, dengan cara yang sama seperti yang Anda lakukan di komputer lokal Anda. Secara default, output gambar apa pun oleh WordPress akan tersedia dengan atribut srcset yang dihasilkan berdasarkan ukuran gambar yang dikonfigurasi di tema Anda.

Dua setelan utama yang dapat dikonfigurasi untuk gambar yang dihasilkan adalah kualitas kompresi dan jenis mime output.

Misalnya, untuk menetapkan kualitas kompresi default ke 70 untuk semua gambar yang dihasilkan, gunakan perintah berikut:

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

Untuk kompresi yang lebih baik, alihkan format output untuk gambar JPEG yang diupload ke WebP dengan hal berikut:

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

Mengingat WordPress memiliki pemahaman penuh tentang semua potongan alternatif dan encoding yang dihasilkannya dari gambar yang diupload, fitur ini dapat memberikan fungsi bantuan seperti wp_get_attachment_image_srcset() ke mengambil nilai srcset penuh yang dihasilkan dari lampiran gambar.

Seperti yang mungkin sudah Anda duga di tahap ini, menggunakan atribut sizes sedikit lebih sulit. Tidak ada informasi apa pun tentang cara gambar akan digunakan dalam tata letak, WordPress saat ini ditetapkan secara default ke nilai sizes yang secara efektif menyatakan "gambar ini harus menempati 100% area pandang yang tersedia, hingga ukuran intrinsik sumber terbesar"—setelan default yang dapat diprediksi, tetapi bukan satu untuk aplikasi di dunia nyata. Pastikan untuk menggunakan wp_calculate_image_sizes() untuk menetapkan atribut sizes yang sesuai secara kontekstual dalam template Anda.

Tentu saja, ada banyak plugin WordPress yang dikhususkan untuk mempercepat alur kerja gambar modern bagi tim pengembangan dan pengguna. Mungkin yang paling menarik, plugin seperti Akselerator Situs Jetpack (sebelumnya "Photon") dapat menyediakan negosiasi sisi server untuk encoding, yang memastikan bahwa pengguna akan menerima encoding terkecil dan paling efisien yang browser dapat memberikan dukungan tanpa memerlukan pola markup <picture> dan type. Hal ini dilakukan melalui penggunaan konten gambar jaringan pengiriman, yakni teknologi yang dapat Anda manfaatkan sendiri, terlepas dari CMS Anda.

Semua ini juga berlaku untuk solusi CMS yang dihosting seperti Shopify, meskipun mekanismenya sendiri agak berbeda: menawarkan hook untuk membuat sumber gambar alternatif dan atribut srcset yang sesuai dan arah gambar melalui elemen <picture>.