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