Eddie Osmani, dalam artikel " Harga JavaScript pada tahun 2018 ", menyuarakan satu ide berharga: waktu yang diperlukan untuk memproses skrip berukuran 200 KB dan untuk memproses gambar dengan ukuran yang sama bervariasi secara signifikan. Faktanya adalah bahwa saat memproses kode, browser perlu melakukan pekerjaan yang lebih luas daripada dalam mempersiapkan penggunaan gambar. Inilah yang dikatakan artikel tentang hal itu:Gambar JPEG perlu diterjemahkan, diraster, dan ditampilkan. Dan bundel JS diperlukan, jika kita anggap simpel, muat, parse, kompilasi, eksekusi. Bahkan, mesin harus menyelesaikan masalah lain dalam proses pemrosesan JS-code. Secara umum, harus diingat bahwa lebih banyak sumber daya sistem dihabiskan untuk memproses kode JavaScript, yang ukurannya, dalam byte, sebanding dengan ukuran bahan lainnya.Kata-kata ini ditulis pada tahun 2018, tetapi masih lebih dari adil. Benar, mengingat situasi saat ini, ide yang diungkapkan di sini dirasakan hari ini sedikit berbeda.
Menimbang bahwa pandemi telah meletus di dunia sekarang, saya perhatikan bahwa koneksi internet saya menjadi tidak stabil. Untungnya, karena fakta bahwa Internet dilindungi oleh spesialis luar biasa yang tidak tahu kelelahan, sebagian besar World Wide Web masih berfungsi dengan baik. Tetapi di Internet, sesuatu pasti terjadi. Saya menggunakan koneksi 100 Mbps, tetapi saya merasa sedang menggunakan modem 3G.Ini membuat beberapa perubahan pada alasan di atas. Faktanya adalah bahwa perangkat kami dapat mem-parsing dan mengkompilasi JavaScript dengan kecepatan yang sama seperti yang mereka lakukan beberapa minggu yang lalu. Tetapi data sekarang berjalan melalui jaringan lebih lambat. Akibatnya, saat ini sangat penting berapa banyak data yang mewakili sumber daya tertentu ditransmisikan melalui jaringan ketika sumber ini dimuat.Dan situs biasanya memiliki lebih dari 200 KB gambar. Halaman dengan beberapa megabita gambar biasanya merupakan kasusnya. Banyak pengembang (dan saya juga!), Sebagai aturan, jangan berpikir sama sekali tentang ukuran bahan media.Tapi, yang sangat bagus, mengoptimalkan gambar yang digunakan pada halaman web tidak begitu sulit. Pada artikel ini kita akan berbicara tentang cara menggunakan format grafik modern seperti WebP. Gambar yang disimpan dalam format seperti itu seringkali berubah menjadi 2-3 kali lebih kecil daripada yang digunakan format lama dan terkenal (seperti JPG dan PNG) digunakan oleh semua orang. Penggunaan format baru dapat secara serius mengubah situasi menjadi lebih baik.Tinjauan umum format grafik modern
Untuk meningkatkan kerja dengan grafis web, kita dapat menggunakan tiga format berikut:- JPEG 2000 adalah format yang merupakan versi yang disempurnakan dari JPG biasa. Format ini dikembangkan pada tahun 1997, terutama untuk digunakan dalam film dan kedokteran. Ini memungkinkan Anda untuk mengompres gambar lebih kuat dari JPEG, tetapi dengan artefak yang lebih sedikit.
- JPEG XR adalah format yang terkait dengan JPEG 2000. Ini dikembangkan oleh Microsoft pada tahun 2009.
- WebP adalah format yang dibuat Google pada 2010 untuk web. Tujuan utama pengembangannya adalah menggunakan metode canggih untuk mengoptimalkan gambar untuk mengurangi ukuran file. WebP mendukung transparansi dan bahkan animasi.
Di sini kita terutama akan berbicara tentang WebP. Format yang terkait dengan JPEG, kami akan membahas di mana masalah kompatibilitas browser akan dinaikkan.Berapa banyak yang bisa Anda menangkan dengan menggunakan format grafis alternatif?
Beberapa bulan yang lalu, saya menggunakan gambar berikut dalam satu materi.Gambar yang digunakan dalam satu bahansaya melakukan beberapa percobaan, mempertimbangkan penggunaan format JPG dan PNG untuk menyimpan gambar asli. Saya mengoptimalkan opsi gambar menggunakan imagemin untuk mengetahui apa yang WebP dapat berikan kepada saya alih-alih format "retro" ini.Hasilnya luar biasa.Saya melakukan eksperimen serupa dengan banyak gambar. Hampir selalu ternyata file WebP 30-70% lebih kecil daripada versi yang dioptimalkan dari file grafik format lain.Ini dapat menimbulkan pertanyaan tentang bagaimana konversi ke WebP dapat memengaruhi gambar SVG. Saya tidak melakukan percobaan seperti itu dengan SVG. SVG adalah format vektor. Ini berarti bahwa gambar di dalamnya dibangun berdasarkan instruksi matematika, dan bukan berdasarkan informasi tentang warna piksel individu. Mengubah gambar SVG ke WebP berarti melepaskan kemampuan untuk skala gambar SVG, yang, saya percaya, tidak dapat diterima. Selain itu, saya menduga bahwa konversi seperti itu, dalam kebanyakan kasus, akan menyebabkan peningkatan ukuran file.Kompatibilitas browser
Untuk mempelajari tentang bagaimana format grafik tertentu didukung oleh browser, lihat di caniuse.com .Format WebP didukung oleh sebagian besar browser.Dukungan untuk format WebP oleh browserMeskipun tingkat dukungan untuk format ini sangat tinggi, sangat buruk bahwa Safari dan Internet Explorer tidak mendukungnya.Dan di sini adalah informasi tentang dukungan JPEG 2000.Dukungan untuk format JPEG 2000 oleh browserJadi, sekarang Safari ada di pihak kita, tetapi Internet Explorer kembali tidak berfungsi.Bagaimana dengan JPEG XR?Dukungan untuk format JPEG XR oleh browserDan di sini Internet Explorer dibedakan. Akibatnya, menggunakan ketiga format ini, kami tumpang tindih dengan semua browser yang ada (KaiOS Browser tidak mendukung format ini, dan saya minta maaf kepadanya karena mengabaikannya, tetapi saya bahkan tidak tahu apa itu browser. )Sekarang mari kita bicara tentang bagaimana memilih format gambar berbeda yang dirancang untuk browser yang berbeda.Elemen gambar untuk menyelamatkan
HTML memiliki dua elemen untuk menghasilkan gambar. Yang pertama dapat dibandingkan dengan bintang pop internasional seperti Madonna. Itu img. Dan yang kedua seperti band baru, yang hanya dikenal di kalangan pecinta musik yang sempit. Ini adalah elemen picture.Elemen picturemuncul dalam HTML lebih lambat dari img. Tujuan utama elemen baru ini adalah untuk memungkinkan pengembang mengunduh berbagai sumber daya grafis tergantung pada resolusi layar, atau bergantung pada apakah browser mendukung format grafis tertentu.Seperti apa bentuk kode HTML yang menggunakan elemen picture:<picture>
<source srcset="/images/cereal-box.webp" type="image/webp" />
<source srcset="/images/cereal-box.jp2" type="image/jp2" />
<img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>
Suatu elemen picturedapat mencakup banyak elemen anak sourcedan satu elemen img. Browser berurutan mem-parsing elemen-elemen ini, memilih, berdasarkan atribut type(s media), salah satu dari mereka yang dapat menggunakannya. Ketika elemen seperti itu ditemukan, browser menemukan alamat gambar menggunakan atribut srcset, dan kemudian menampilkan gambar ini menggunakan elemen tersebut img.Atribut srcsetmemiliki kemampuan yang jauh lebih besar daripada yang biasanya src, tetapi, untungnya, kita dapat menganggapnya sebagai analog src. Secara umum, elemen sourceadalah sesuatu seperti pengaturan yang sesuai dengan gambar yang berbeda. The imgimage yang paling cocok dengan lingkungan di mana halaman dilihat disertakan.Di Chrome, misalnya, setelah memproses markup di atas, browser akan menemukan sesuatu yang kurang lebih sama dengan kode berikut:<picture>
<img src="/images/cereal-box.webp" />
</picture>
Menggunakan serangkaian elemen berurutan sourceberarti bahwa setidaknya satu di antaranya akan cocok di setiap browser. Jadi, sebagian besar browser menggunakan gambar webp, Safari akan memuat gambar jp2, yaitu gambar jxr.Sangat tepat untuk mengingat bahwa Internet Explorer tidak mendukung elemen picture. Item ini terlalu baru untuk browser ini. Namun, meskipun demikian, fragmen markup di atas di IE akan berfungsi seperti yang diharapkan.Faktanya adalah bahwa ketika browser menemukan elemen yang tidak diketahui, browser menganggapnya sebagai elemen div. Akibatnya, ketika menguraikan kode kami, IE melihat banyak elemen div, serta satu tag<img>yang berisi path ke gambar jxr. Dan ini, ternyata, adalah format yang didukung Internet Explorer.Alternatif yang disederhanakan
Fragmen kode di atas sangat baik karena memungkinkan Anda untuk menggunakan format grafik modern di semua browser saat ini. Tetapi penggunaan kode tersebut didasarkan pada asumsi keberadaan gambar-gambar yang memiliki tautan.Jika Anda membuat gambar seperti itu sendiri - Anda harus menginvestasikan banyak tenaga manual di dalamnya. Jika Anda menghasilkan mereka secara otomatis, ini dapat secara signifikan meningkatkan waktu pembangunan proyek. Pemrosesan grafik, seperti yang Anda tahu, menjadi proses yang sangat lambat ketika menyangkut banyak gambar.Hanya sedikit pengunjung di blog saya yang menggunakan Internet Explorer (dalam 7 hari terakhir hanya 3 orang dengan IE yang mencoba melihatnya, yang berjumlah 0,02% dari lalu lintas). Oleh karena itu, saya memutuskan untuk menggunakan versi sederhana dari solusi di atas:<picture>
<source srcset="/images/cereal-box.webp" />
<img src="/images/cereal-box.jpg" />
</picture>
Saya memberikan gambar webp ringkas untuk browser yang mendukung format ini (Chrome, Firefox, Edge), dan untuk browser yang tidak mendukung format ini (IE, Safari), saya menawarkan warisan masa lalu - gambar jpeg.Dari sudut pandang saya, ini adalah contoh peningkatan progresif. Proyek ini tetap beroperasi pada browser lama, walaupun memuat gambar lebih lama. Ini adalah kompromi yang cocok untuk saya. (Benar, saya berharap bahwa dukungan WebP akan segera muncul di peramban Apple).Memeriksa kesehatan solusinya
Alat pengembang akan selalu menganggap bahwa gambar berisi apa yang semula ditulis ke atribut srctag img. Jika Anda memeriksa item menggunakan tab Elements, Anda dapat melihat bahwa halaman tersebut menggunakan gambar jpg.Untuk memeriksa operabilitas semua ini, yang terbaik, menurut saya, klik kanan pada gambar dan pilih item …Di Chrome ketika perintah dijalankan, sistem harus menawarkan untuk menyimpan file dengan ekstensi .webp. Tetapi di Safari itu akan menjadi file jpeg.Untuk mengetahui dengan pasti file grafik mana yang diterima dari server saat halaman dimuat, Anda dapat merujuk ke bilah alat pengembang Network.Konversi file gambar ke format WebP
Google telah menciptakan seperangkat alat yang ditujukan untuk bekerja dengan file-file webp. Salah satu alat tersebut disebut cwebp . Ini memungkinkan Anda untuk mengkonversi file grafik dari format lain ke WebP.Jika Anda menggunakan MacOS, Anda dapat menginstal toolkit ini menggunakan Homebrew:brew install webp
Pada platform lain, saya percaya perlu mengunduh paket libwebp yang sesuai dari repositori.Setelah menginstal alat, Anda dapat menggunakannya seperti ini:cwebp -q 80 cereal.png -o cereal.webp
Pertimbangkan perintah ini:- Bendera
-q 80memungkinkan Anda untuk mengatur kualitas gambar. Nilainya bervariasi dari 1 (kualitas terburuk) hingga 100 (terbaik). Anda dapat bereksperimen dengan nilai yang berbeda. Saya menemukan bahwa yang terbaik adalah menanyakan sesuatu di wilayah 70-80. - Nama file
cereal.jpgadalah gambar asli yang perlu dikonversi ke webp. - Konstruksi
-o cereal.webpmenetapkan path ke file output.
Tidak ada yang mau membuang waktu mengetik perintah seperti itu secara manual. Untungnya, tugas ini dapat diotomatisasi.Menggunakan format gambar modern di Bereaksi aplikasi
Komponen adalah cara yang bagus untuk mengabaikan beberapa keanehan elemen <picture>. Saya menggunakan komponen Bereaksi untuk ini. Menurut pendapat saya, ini sangat nyaman. Begini tampilannya:const ImgWithFallback = ({
src,
fallback,
type = 'image/webp',
...delegated
}) => {
return (
<picture>
<source srcSet={src} type={type} />
<img src={fallback} {...delegated} />
</picture>
);
};
Menggunakan komponen ini ImgWithFallbacksangat mirip dengan bekerja dengan tag biasa img:<ImgWithFallback
src="/images/cereal.webp"
fallback="/images/cereal.png"
alt="A photo showing the expiration date on a box of Lucky Charms"
/>
Penggunaan format grafik modern dengan komponen bergaya
Jika Anda menggunakan perpustakaan styled-componentsatau emotionAnda mungkin terbiasa dengan desain gambar khusus:const FancyImg = styled.img`
whatever: stuff;
`
Hal yang sangat bagus adalah ia bekerja dengan komponen kami ImgWithFallback. Anda dapat membungkusnya dalam pembungkus yang tepat seperti komponen lainnya:const FancyImg = styled(ImgWithFallback)`
whatever: stuff;
`
Alasan untuk operabilitas desain ini adalah bagaimana struktur tambahan bekerja dengan tepat styled. Ini menghasilkan kelas dan menanamkannya di dalam dokumen stylesheet. Kemudian nama kelas yang dihasilkan dilewatkan ke komponen sebagai properti:<ImgWithFallback className="sc-some-generated-thing" />
Kami mendelegasikan semua properti ke tag anak <img>, sebagai akibatnya, gaya yang benar diterapkan pada gambar, seperti yang biasanya terjadi. Semuanya bekerja persis seperti yang Anda harapkan.Menggunakan Paket gatsby-image
Jika Anda menggunakan Gatsby, perlu diketahui bahwa paket tersebut gatsby-image, ketika digunakan secara normal, sudah menggunakan banyak optimisasi gambar. Ini termasuk mengonversi gambar ke format webp (walaupun, untuk ini Anda harus mengaktifkan opsi yang sesuai).Paket gatsby-imagetidak mengklaim sebagai pengganti img. Penggunaannya mungkin tidak sesederhana itu, mekanisme internalnya dapat menyebabkan kejutan yang menyulitkan pengembang.Jika Anda tertarik dengan paket ini, lihat dokumentasinya .Kontra WebP
Satu-satunya kelemahan nyata dari webp yang berhasil saya temukan adalah sangat tidak nyaman untuk bekerja dengan file dalam format ini.Sebagian besar paket gambar desktop belum mendukungnya. Misalnya, saya tidak bisa membuka file webp di Pratinjau di MacOS. Ini artinya, katakanlah jika saya menyimpan gambar webp dari halaman web, saya tidak akan dapat melihatnya di komputer saya!Mengubah file webp menjadi file jpeg adalah proses yang cukup sederhana. Di Internet, Anda dapat menemukan banyak layanan gratis yang melakukan konversi semacam itu. Tetapi, sekali lagi, ini tidak senyaman bekerja dengan format grafik tradisional. Jika situs Anda menawarkan pengguna untuk mengunduh file grafik darinya, Anda dapat memutuskan bahwa Anda tidak perlu beralih ke webp.Ringkasan
Saya sangat menyukai kenyataan bahwa menggunakan webp saya dapat mengurangi ukuran gambar di blog saya sekitar 50%. Selain fakta bahwa di masa-masa sulit kami ini meningkatkan pengalaman pengguna bekerja dengannya, saya juga berharap ini akan memungkinkan saya menghemat sedikit untuk membayar lalu lintas.Tentu saja, gagasan mengkonversi file gambar secara manual ke format webp tampaknya cukup tidak praktis. Saya sudah mempelajari pertanyaan tentang bagaimana secara otomatis mengkonversi file jpg dan png ke format ini. Idealnya, proses ini harus terjadi sepenuhnya tanpa disadari oleh pengembang, selama perakitan situs.Pembuat proyek web biasanya tidak terlalu tertarik dengan fitur menggunakan format gambar baru. Tetapi saya percaya bahwa memahami masalah ini sangat berguna. Lagi pula, menggunakan WebP mungkin merupakan cara termudah untuk mengurangi ukuran proyek web Anda hingga ratusan kilobyte.Pembaca yang budiman! Apakah Anda menggunakan format WebP?