Pelajari cara CMS seperti WordPress dan generator situs lainnya dapat mempermudah penggunaan gambar yang responsif.
Memang terdapat peningkatan dibandingkan menyimpan potongan alternatif setiap gambar secara manual dan mengoptimalkannya secara manual melalui alat seperti Squoosh.app, tetapi mengotomatiskan kompresi gambar sebagai langkah dalam proses pengembangan memiliki beberapa keterbatasan. Alasannya, Anda mungkin tidak selalu memiliki kontrol penuh atas gambar yang digunakan di seluruh situs—sebagian besar gambar yang ditampilkan kepada pengguna di web lebih memperhatikan konten daripada masalah pengembangan, yang diupload oleh pengguna atau editor, bukan berada di repositori bersama aset pengembangan seperti JavaScript dan stylesheet.
Hal ini biasanya memerlukan lebih dari satu proses untuk pengelolaan gambar: tugas tingkat pengembangan untuk aset gambar yang digunakan dalam membangun dan memelihara situs—latar belakang, ikon, logo, dan sebagainya—dan hal lainnya yang berkaitan dengan aset gambar yang dihasilkan melalui penggunaan situs, seperti foto yang disematkan dalam postingan oleh tim editorial, atau avatar yang diupload oleh pengguna. Meskipun konteksnya mungkin berbeda, sasaran akhirnya tetap 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 dapat digunakan dalam sejumlah konteks. Dan meskipun tidak ada satu pendekatan yang cocok untuk semua kondisi markup gambar responsif Anda, sistem ini menyediakan default yang logis, opsi konfigurasi, dan hook API untuk memudahkan implementasinya.
Generator Situs Statis
Dibandingkan dengan task-runner, ada beberapa kesamaan dalam cara generator situs statis seperti Jekyll atau Eleventy mendekati gambar. Pengelolaan aset diperlukan untuk menggunakan alat ini guna menghasilkan situs yang siap untuk deployment, termasuk minifikasi CSS, transpilasi, dan pemaketan JavaScript. Seperti yang dapat Anda bayangkan, ini berarti alat ini memungkinkan Anda memproses aset gambar dengan cara yang sama, menggunakan banyak library yang telah Anda pelajari.
Plugin gambar resmi untuk Eleventy menggunakan Sharp untuk memberikan pengubahan ukuran, pembuatan berbagai ukuran sumber, encoding ulang, dan kompresi, seperti beberapa tugas yang telah Anda pelajari di sini.
Tidak seperti task-runner, generator situs statis memiliki insight langsung mengenai konfigurasi dan penggunaan library tersebut, serta markup yang dihasilkan untuk situs produksi—yang berarti generator dapat melakukan lebih banyak hal untuk mengotomatiskan markup gambar responsif kami. Misalnya, saat 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 terkait yang sudah terisi sepenuhnya dengan daftar
ukuran kandidat yang dihasilkan.
<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 generate atribut sizes yang layak, karena tidak dapat mengetahui ukuran dan posisi akhir
gambar dalam tata letak yang dirender, tetapi menerima satu sebagai input saat membuat markup—tugas lain untuk RespImageLint.
Framework
Framework rendering sisi klien akan memerlukan task-runner atau bundler seperti Webpack untuk mengedit, mengenkode, dan mengompresi aset gambar
sendiri. Responsive-loader, misalnya, juga menggunakan library Sharp untuk menyimpan ulang aset gambar. Selanjutnya, Anda dapat
melakukan import gambar 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 selanjutnya dapat digunakan melalui abstraksi seperti komponen Image React, atau untuk mengisi markup gambar responsif 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 gambar
responsif yang hampir sepenuhnya otomatis.
Sistem Pengelolaan Konten
WordPress adalah salah satu pengguna paling awal dari 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. Inti WordPress didesain untuk menggunakan ekstensi PHP ImageMagick (atau, jika tidak, library GD).
Saat gambar diupload melalui antarmuka admin WordPress, gambar sumber tersebut digunakan untuk menghasilkan file yang ditampilkan kepada pengguna di
server, dengan cara yang sama seperti yang Anda lakukan di komputer lokal. Secara default, setiap output gambar oleh WordPress akan disertai
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 opsi 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 kode berikut:
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
Mengingat bahwa WordPress memiliki pemahaman penuh tentang semua potongan alternatif
dan encoding yang dihasilkannya dari gambar yang diupload, WordPress dapat menyediakan fungsi bantuan seperti
wp_get_attachment_image_srcset() untuk
mengambil nilai srcset penuh yang dihasilkan dari lampiran gambar.
Seperti yang mungkin sudah Anda duga pada tahap ini, bekerja dengan atribut sizes sedikit lebih sulit. Karena tidak ada informasi
tentang bagaimana 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"—default yang dapat diprediksi, tetapi bukan
yang benar untuk aplikasi dunia nyata apa pun. Pastikan untuk menggunakan wp_calculate_image_sizes()
untuk menyetel atribut sizes yang sesuai secara kontekstual di template Anda.
Tentu saja, ada banyak plugin WordPress yang dikhususkan untuk membuat alur kerja gambar modern lebih cepat bagi tim pengembangan dan pengguna.
Mungkin yang paling menarik, plugin seperti Akselerator Situs Jetpack (sebelumnya disebut "Photon") dapat memberikan negosiasi sisi server untuk encoding, yang memastikan pengguna akan menerima encoding terkecil dan paling efisien yang dapat didukung browser mereka tanpa memerlukan pola markup <picture> dan type. Sistem ini melakukannya melalui penggunaan jaringan
penayangan konten gambar, yaitu teknologi yang dapat digunakan sendiri, terlepas dari CMS Anda.
Semua ini juga berlaku untuk solusi CMS yang dihosting seperti Shopify, meskipun mekanismenya sendiri akan sedikit berbeda: menawarkan hook serupa untuk menghasilkan sumber gambar alternatif serta atribut srcset yang sesuai dan arah gambar melalui elemen <picture>.