Masukan dari survei pengoptimalan gambar musim panas 2019

Komentar dari responden survei tentang berbagai teknik pengoptimalan gambar

Sam Dutton

Postingan ini mencantumkan masukan bebas yang diterima Google Web DevRel dalam survei teknik pengoptimalan gambar Musim Panas 2019. Respons diminta melalui Dasar-Dasar Web dan @ChromiumDev. Motivasi survei ini adalah untuk mengetahui alasan sebagian besar situs tidak mengikuti praktik terbaik pengoptimalan gambar, meskipun tampaknya merupakan cara yang relatif mudah untuk meningkatkan performa. Data respons tidak tercantum di sini karena ada kekurangan dalam metodologi survei.

Audiens

• Jika Anda adalah developer web, postingan ini mungkin berguna untuk menemukan teknik pengoptimalan gambar baru, atau detail tentang cara developer web lain memecahkan masalah yang Anda hadapi, serta biaya, manfaat, dan batasan setiap teknik.
• Jika Anda adalah penyedia layanan gambar atau CDN gambar, postingan ini dapat membantu Anda menemukan peluang pasar baru.
• Jika Anda adalah developer framework, alat build, atau CMS, postingan ini mungkin memberi Anda ide tentang fitur baru yang dapat diterapkan.

Komentar

WebP

Catatan: Mengapa hal ini penting? Format gambar seperti WebP dapat menghasilkan file yang lebih kecil dan kualitas yang lebih baik daripada format lama seperti JPEG dan PNG. Ada beberapa teknik untuk menggunakan format modern dengan penggantian untuk browser lama.

• "Saya suka WebP, tetapi belum sepenuhnya siap. Selain itu, WordPress kami tidak mendukung WebP. Salah satu aplikasi pengeditan foto paling populer, Photoshop, juga tidak mendukung WebP secara langsung. Jadi, kita tidak bisa mengandalkan aplikasi atau layanan pihak ketiga untuk kompresi gambar."
• "Make WebP usable on Safari."
• "Saya ingin menggunakan WebP jika saya dapat mengekspornya dari Photoshop/Figma/Sketch dan semua browser mendukungnya." [Catatan: Sketch mendukung WebP]
• "Solusi pemformatan generasi berikutnya akan sangat bagus."
• "Jangan terlalu memaksakan penggunaan WebP jika dukungan browser masih buruk, dan pertimbangkan kebutuhan PNG, bukan JPEG, untuk screenshot."
• "Google Dokumen tidak mendukung WebP."
• "Kami ingin menggunakan WebP secara eksklusif, tetapi khawatir dengan kompatibilitas browser."
• "Pertama, perbaiki kompatibilitas browser dan update browser lama atau tambahkan perbaikan lama, lalu orang akan lebih cenderung mengadopsi jenis gambar baru seperti WebP…"
• "Mendorong developer plugin/tema untuk mempertimbangkan memberikan dukungan ke WebP dan jenis gambar generasi berikutnya lainnya, sehingga non-developer tidak perlu repot-repot mengutak-atiknya."

Gambar SVG dan vektor

• "Jika memungkinkan, saya menggunakan SVG (animasi). gatsby-image memperbaiki banyak masalah ini. Namun, jika Anda mempelajari apa yang telah mereka lakukan, sangat tidak realistis jika situs biasa harus membangun sesuatu seperti itu agar gambar berfungsi dengan baik. Browser harus mengambil lebih banyak tanggung jawab ini."
• "Apakah mungkin untuk mendokumentasikan cara membuat animasi SVG dengan lottie.js?"
• "Kami mencoba menggunakan gambar JPEG beresolusi besar dengan ukuran kecil di situs kami hampir sepanjang waktu untuk menghindari waktu pemuatan. Kami juga memastikan untuk menggunakan SVG jika diperlukan guna memberikan kualitas untuk desain responsif."
• "Kami mencoba menggunakan grafik vektor yang dioptimalkan untuk semua hal kecuali gambar jika memungkinkan."

Format gambar lainnya

• "Kita [perlu] mengedukasi orang-orang dengan lebih baik agar berhenti menggunakan GIF."

Pemuatan lambat

Catatan: Mengapa hal ini penting? Meminta file gambar tepat waktu, daripada mendapatkan semua gambar untuk halaman segera setelah dimuat, dapat meningkatkan performa dan mengurangi biaya data.

• "Harap pertimbangkan pengguna saat mempertimbangkan fitur seperti pemuatan lambat, karena bagi banyak orang, fitur ini mengganggu."
• "Buat atribut pemuatan lambat berfungsi dengan gambar latar."
• "Framework harus melakukan pemrosesan aset yang lebih baik secara langsung."
• "Kami telah beralih dari pemuatan lambat sejak lama. Laporan pengguna tentang jutaan gambar dan situs yang "TIDAK DIMUAT". Itulah pemahaman yang diringkas oleh tim kami. Sulit bagi pengguna non-teknis untuk menjelaskan masalah."
• "Saya ingin lebih memahami penggunaan Intersection Observer API untuk pemuatan lambat, bukan menggunakan teknik tradisional."
• "Ini berfungsi dengan baik untuk saya: pwafire.org/developer/codelabs/progressive-loading."

Gambar latar

• "Saya biasanya memuat gambar sebagai latar belakang di CSS."
• "Tag <img> bermasalah dan sulit untuk mengontrol detail yang mendetail, terutama dengan konten yang dikirimkan pengguna. Kami lebih sering menggunakan <div> dan gaya visual gambar latar karena memungkinkan kami menggunakan ukuran latar belakang, posisi latar belakang, dan mencegah penyimpanan gambar dengan klik kanan."

Transparansi

• "Sekarang tahun 2019. Bagaimana bisa JPG masih tanpa transparansi alfa?"
• "Saya hanya menggunakan PNG untuk foto saat saya memerlukan latar belakang transparan."

Placeholder gambar berkualitas rendah (LQIP)

• "Kami menggunakan LQIPS dan ini adalah teknik yang bagus untuk membuat pengunjung tetap berinteraksi tanpa memuat gambar berkualitas tinggi terlalu awal."

Performa

• "Baru-baru ini kami mengalami masalah performa terkait gambar. Saat pengguna men-scroll ke bawah di situs kami, kami menampilkan 60 kartu berikutnya yang menyertakan thumbnail. Karena batas 6 koneksi pada domain yang sama, thumbnail diblokir serta permintaan AJAX berikutnya untuk mendapatkan 60 kartu berikutnya jika pengguna terus men-scroll ke bawah."
• "Kami ingin menggunakan HTTP/2, tetapi sebagian besar pelanggan kami menggunakan IE11. Oleh karena itu, kami sedang mempelajari sharding domain/pemuatan permintaan data JSON AJAX dari domain yang berbeda."

Pengaturan ukuran

Catatan: Mengapa hal ini penting? Atribut srcset menyediakan sumber gambar alternatif. Anda menentukan lebar atau kepadatan piksel sehingga browser dapat memilih gambar terkecil tanpa perlu mendownload gambar untuk menghitung dimensi.

• "Maaf untuk intrinsicsize; memanfaatkan tinggi/lebar sepertinya lebih baik bagi saya."
• "Mencari cara untuk menghasilkan lebih sedikit ukuran, saat ini ada sekitar 12."
• "Mengubah ukuran gambar secara dinamis sangat sulit dan tidak mungkin dilakukan tanpa JS."
• "Alat seperti responsivebreakpoints.com cocok untuk web.dev :)."

Gambar berkualitas tinggi dan beresolusi tinggi

• "Bagaimana cara mendownload gambar yang dikompresi tanpa kehilangan kualitas DPI?"
• "Kami adalah perusahaan pengelolaan dokumen. Aplikasi kami menangani JUTAAN gambar yang dipindai dalam resolusi tinggi, biasanya TIFF atau PDF."
• "Repot. File gambar resolusi tinggi diperlukan untuk format cetak; harus dioptimalkan untuk web. Memperkecil ukuran gambar untuk web memang merepotkan, tetapi akan menjadi masalah besar jika penulis hanya menyediakan file berukuran kecil untuk gambar yang ditujukan untuk publikasi cetak. Kami akhirnya memberikan pesan yang membingungkan tentang persyaratan pengiriman naskah dengan karya seni. Kemudian, kami akan mendapatkan alur kerja yang kompleks untuk memproses materi tersebut."

Kemampuan browser

• "Pemangkasan src responsif otomatis dari browser sebagai fitur [bawaan] akan sangat berguna karena memangkas semua gambar menjadi 4 ukuran dan menulis semua markup memerlukan waktu yang lama. Jika kita dapat mengupload satu foto besar dan menulis tag gambar sederhana yang akan otomatis membuat beberapa atribut src di browser, ini akan menjadi fitur yang sangat bagus."
• "Secara pribadi, saya kesulitan menghindari penataan ulang halaman saat lebar gambar ditetapkan oleh CSS untuk gambar responsif (max-width: 100%; height auto atau height: width: 100%; height auto), terutama jika digabungkan dengan arahan seni dari tag gambar/gambar adaptif. Cara terbaik untuk menghindarinya adalah dengan menggunakan "peretasan padding negatif" untuk rasio gambar tetap, lalu memosisikan gambar di dalam kotak rasio ini. Dukungan browser/penanganan gambar responsif yang lebih baik akan sangat membantu."
• "Nonaktifkan "putar otomatis" GIF dengan hanya mengambil frame pertama."

CDN dan layanan gambar

Catatan: Mengapa hal ini penting? Layanan gambar memudahkan pengoptimalan gambar Anda. Anda biasanya hanya mengupload satu versi resolusi tinggi dari setiap gambar, lalu menggunakan API layanan web untuk mengoptimalkan atau mengubah gambar sesuai kebutuhan. Jaringan Penayangan Konten (CDN) mengoptimalkan distribusi dan penayangan gambar serta aset situs lainnya, dan terkadang menyediakan layanan pengoptimalan, seperti otomatis menayangkan gambar WebP ke browser pendukung, bukan PNG atau JPEG, tanpa mengubah ekstensi file.

• "Google harus menyediakan CDN gratis seperti Cloudflare."
• "Mungkin akan lebih baik jika ada lebih banyak alat untuk menyiapkan penskalaan dinamis dan CDN dengan berbagai penyedia."
• "Satu gambar berukuran besar yang dikompresi secara berlebihan adalah solusi yang sangat baik tanpa biaya produksi tambahan. Anda memerlukan gambar dengan lebar sekitar 1.000 piksel untuk perangkat seluler (lebar render 500 piksel) dan ukuran tersebut juga merupakan ukuran yang Anda perlukan untuk layar non-retina besar/desktop. Menurut saya, CDN pengubah ukuran gambar adalah solusi yang sangat buruk, meskipun saya pernah menggunakannya sebelumnya. CMS harus menangani pengubahan ukuran dan jika terlalu rumit untuk disiapkan, satu solusi adalah kompromi yang baik (untuk saat ini)."
• "CloudFlare menskalakan gambar kami secara otomatis agar sesuai dengan tampilan pengguna. Jadi, kita dapat menghemat waktu pemuatan karena gambar dimuat sesuai dengan tampilan pengguna. Misalnya, jika pengguna menggunakan ponsel, latar belakang tidak akan dimuat dalam ukuran desktop."
• "Cloudflare melakukan ini di latar belakang tanpa kita harus melakukan apa pun kecuali mencentang kotak di panel setelan."
• "Sekadar menegaskan, satu-satunya alasan saya berhasil menggunakan srcset, dll. adalah karena kemudahan Cloudinary. Namun, Cloudinary menjadi mahal, sangat cepat. Hal ini terasa seperti celah besar dalam pengalaman pengembangan."
• "Kami memerlukan cara untuk memangkas gambar secara otomatis dengan mudah dan cerdas agar gambar dapat digunakan dengan rasio aspek yang berbeda dalam konteks yang berbeda."
• "Saya juga menggunakan gambar dari penyedia lain seperti Unsplash yang memiliki kontrol sangat sedikit terhadap resolusi, kualitas, dan kompresi."

CMS, platform, dan framework

• "Saya masih kesulitan menemukan cara terbaik untuk menggunakan gambar saat membuat situs menggunakan CMS. Penulis cenderung mengonfigurasi gambar dengan dimensi yang berbeda dan mengharapkan gambar tidak menyusut atau diskalakan. Saya tidak yakin apakah boleh menetapkan lebar maksimum atau tinggi maksimum pada gambar"
• "Saya telah menggunakan gatsby-image untuk beberapa project terakhir dan tidak pernah menyesal."
• "Gambar sering kali menjadi bagian yang sulit karena dimasukkan ke CMS oleh pengguna akhir, mereka dapat menggunakan ukuran, format apa pun, terkadang gambar asli dalam format dan dimensi gambar yang ideal tidak tersedia."
• "Gambar sulit dikelola karena sistem kami bersifat layanan mandiri. Menambahkan kontrol akan sulit kecuali jika hal tersebut terjadi secara otomatis tanpa memengaruhi resolusi. Selain itu, gambar tidak terlihat benar di perangkat seluler vs. desktop"
• "Saya membantu orang lain mengoptimalkan situs mereka (WordPress). Masalah terbesar yang saya lihat untuk gambar adalah: Harus bergantung pada CDN atau plugin untuk membuat WebP. srcset/picture harus diberi kode dengan benar oleh developer tema. Sebagian besar plugin pemuatan lambat dimuat dengan lambat sehingga memberikan UX yang buruk. Gambar latar sulit dimuat lambat."

Biaya/manfaat

• "Praktik baru ini efektif, tetapi meningkatkan waktu pengembangan situs."
• "Kurangnya kepatuhan terhadap standar baru seperti srcset dan WebP lambat diadopsi oleh banyak perusahaan Fortune 500. Melihat hal ini, banyak perusahaan menolak perubahan tersebut karena menganggapnya sebagai biaya pengembangan yang tidak perlu untuk situs saat ini. Peningkatan performa tidak dibahas atau dilaporkan secara luas oleh pengguna akhir (UX). Jika ada, hal ini akan membuat penyimpanan gambar dari web menjadi agak lebih sulit."
• "Memerlukan biaya besar untuk membuat dan mengelola beberapa ukuran dan versi."
• "File tersebut menghabiskan banyak ruang di server kami."

SEO

• "Sulit untuk menyeimbangkan antara kualitas gambar dan ukuran file yang dapat diterima. Di satu sisi, saya ingin pemuatan cepat untuk manfaat SEO, tetapi di sisi lain, gambar berkualitas buruk akan mengurangi kualitas UI/UX."

Peran gambar di web

• "Ada terlalu banyak di web. Berhentilah menggunakan gambar yang tidak berguna dan tidak meningkatkan kualitas konten tertulis."
• "Apakah Anda masih ingat saat web tidak memiliki gambar dan kita membagikan selfie sebagai seni ASCII?"

Alat, panduan, standar, dan praktik terbaik: Frustrasi dan permintaan

• [Seorang peserta menulis postingan blog sebagai respons terhadap survei ini]
• "Persyaratannya sepertinya terus berubah. Sebagai developer web, hal ini sangat menjengkelkan karena menyimpan gambar memerlukan waktu yang lama. Kami mengoptimalkan sebaik mungkin, kami memeriksa situs, lalu beberapa bulan kemudian Google memutuskan bahwa gambar dapat dikompresi lebih lanjut atau perlu dalam format yang berbeda. Hal ini mencegah kita memberikan solusi terbaik yang bertahan lama kepada klien, dan justru menciptakan upaya yang mahal bagi mereka dan kita. Beberapa klien bisnis kecil kami tidak memiliki anggaran untuk terus memperbaiki gambar dan menyimpannya kembali agar sesuai dengan persyaratan. Kami tidak memiliki anggaran untuk melakukan pekerjaan ini dalam paket pengelolaan mereka. Menulis kode untuk memanggil ukuran gambar yang berbeda untuk perangkat yang berbeda juga memerlukan waktu. Akan sangat bagus jika kita dapat membuat sistem penyimpanan gambar yang akan konsisten untuk jangka waktu yang lebih lama."
• "Ya, menurut saya Anda salah memahami "Keep Request Counts Low And File Sizes Small" di Lighthouse. Jika situs ditayangkan melalui HTTP1.x, tentu saja, tetapi jika situs ditayangkan melalui HTTP2, jumlah permintaan menjadi kurang penting atau bahkan tidak menjadi masalah jika berasal dari nama host yang sama. Saya memiliki situs ringan, tetapi saya memuat 30 file WebP kecil dengan total sekitar 35 permintaan, melalui HTTP2 di nama host yang sama. Lighthouse menandai hal ini sebagai masalah "Keep Request Counts Low And File Sizes Small", padahal prosesnya sangat cepat dan karena HTTP2 di nama host yang sama, jumlah permintaan tidak menjadi masalah. Dan ya, file tersebut sudah kecil (sebagian besar antara 1 KB dan 2 KB atau kurang). Saya dapat memuat sprite, tetapi komputasi CSS yang lebih banyak perlu dilakukan. Jadi, perbarui laporan "Keep Request Counts Low And File Sizes Small" di Lighthouse untuk memperhitungkan HTTP2 pada nama host yang sama."
• "Orang-orang kesulitan mengingat untuk mengompresi gambar mereka."
• "Perilaku lintas browser tetap tidak dapat diprediksi, sehingga solusi paling sederhana sering kali merupakan solusi yang paling aman."