Komentar dari responden survei tentang berbagai teknik pengoptimalan gambar
Postingan ini mencantumkan masukan bentuk bebas yang diterima Google Web DevRel dalam survei teknik pengoptimalan gambar Musim Panas 2019. Respons diminta melalui Web Fundamentals dan @ChromiumDev. Motivasi survei ini adalah untuk mencari tahu alasan sebagian besar situs tidak mengikuti praktik terbaik pengoptimalan gambar meskipun praktik tersebut tampaknya 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 bermanfaat bagi Anda untuk menemukan teknik pengoptimalan gambar baru, atau detail tentang cara developer web lain memecahkan masalah yang Anda hadapi, serta biaya, manfaat, dan batasan dari setiap teknik.
- Jika Anda adalah layanan gambar atau penyedia CDN gambar, postingan ini mungkin membantu Anda menemukan peluang pasar baru.
- Jika Anda adalah framework, alat build, atau developer CMS, postingan ini mungkin memberikan ide tentang fitur baru untuk diterapkan.
Komentar
WebP
- "Saya memang 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 kami tidak dapat mengandalkan aplikasi atau layanan pihak ketiga untuk kompresi gambar."
- "Jadikan WebP dapat digunakan di 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."
- "Berhentilah mendorong WebP begitu keras saat dukungan browser buruk, dan pertimbangkan perlunya PNG, bukan JPEG untuk screenshot."
- "Google Dokumen tidak mendukung WebP."
- "Kami hanya menggunakan WebP, tetapi khawatir dengan kompatibilitas browser."
- "Pertama-tama, perbaiki kompatibilitas browser dan update browser lama atau tambahkan perbaikan lama, maka orang-orang akan lebih cenderung mengadopsi jenis gambar baru seperti WebP..."
- "Dorong developer plugin/tema untuk mempertimbangkan penyediaan dukungan untuk WebP dan jenis gambar generasi berikutnya lainnya, sehingga non-developer tidak perlu mengutak-atiknya."
SVG dan gambar vektor
- "Jika memungkinkan, saya menggunakan SVG (animasi). gatsby-image memperbaiki banyak hal ini. Tetapi ketika Anda menggali apa yang telah mereka lakukan, sangatlah tidak realistis jika {i>website<i} biasa harus membuat sesuatu seperti itu agar gambar berfungsi dengan baik. Browser harus mengemban lebih banyak tanggung jawab ini."
- "Apakah mungkin mendokumentasikan cara membuat animasi SVG dengan lottie.js?"
- "Kami sering mencoba menggunakan gambar JPEG resolusi besar dengan ukuran rendah di situs web kami untuk menghindari waktu pemuatan. Kami juga memastikan untuk menggunakan SVG saat diperlukan untuk memberikan kualitas bagi desain yang responsif."
- "Kami mencoba menggunakan grafik vektor yang dioptimalkan untuk semua selain foto jika memungkinkan."
Format gambar lainnya
- "Kami [perlu] mengedukasi orang-orang dengan lebih baik untuk berhenti menggunakan GIF."
Pemuatan lambat
- "Harap diingat pengguna saat mempertimbangkan fitur seperti pemuatan lambat, karena bagi banyak orang, hal ini menjengkelkan."
- "Buat atribut pemuatan lambat berfungsi dengan gambar latar."
- "Framework harus melakukan pemrosesan aset yang lebih baik secara langsung."
- "Kami telah melakukan konversi dari pemuatan lambat sejak lama. Laporan pengguna dari jutaan gambar dan situs "TIDAK MEMUAT". Maka, tim kami telah merangkumnya. Sulit bagi pengguna non-teknis untuk menggambarkan masalahnya."
- "Saya ingin mendapatkan pemahaman yang lebih baik tentang penggunaan Intersection Observer API untuk pemuatan lambat daripada menggunakan teknik tradisional."
- "Kode ini cocok untuk saya: pwafire.org/developer/codelabs/progressive-loading."
Gambar latar
- "Saya biasanya memuat gambar sebagai latar belakang di CSS."
- "Tag
<img>
bermasalah dan sulit mengontrol detail yang sangat terperinci, terutama dengan konten yang dikirim pengguna. Kami menggunakan<div>
dan gaya visual gambar latar lebih sering karena memungkinkan kami menggunakan ukuran latar belakang, posisi latar belakang, dan mencegah penyimpanan gambar dengan klik kanan."
Transparansi
- "Tahun 2019. Bagaimana JPG masih tanpa transparansi alfa?"
- "Saya hanya benar-benar menggunakan PNG untuk foto ketika saya membutuhkan latar belakang transparan."
Placeholder Gambar Berkualitas Rendah (LQIP)
- "Kami menggunakan LQIPS dan ini merupakan teknik yang bagus untuk membuat pengunjung tetap terlibat tanpa memuat gambar berkualitas tinggi sejak awal."
Performa
- "Kami sebenarnya mengalami masalah performa terkait gambar baru-baru ini. Saat pengguna men-scroll ke bawah di situs, kami menampilkan 60 kartu berikutnya yang menyertakan thumbnail. Karena adanya 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 kebanyakan pelanggan kami menggunakan IE11! Oleh karena itu, kami mempelajari sharding domain / pemuatan permintaan data JSON AJAX dari domain yang berbeda."
Ukuran
- "Maaf untuk ukuran intrinsik; memanfaatkan tinggi/lebar tampaknya lebih baik bagi saya."
- "Mencari cara untuk menghasilkan lebih sedikit ukuran, saat ini ~12".
- "Pengubahan 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 kompresi tanpa kehilangan kualitas DPI?"
- "Kami adalah perusahaan pengelolaan dokumen. Aplikasi kami menangani JUTAAN gambar dengan resolusi tinggi, biasanya TIFF atau PDF."
- "Merepotkan. File img resolusi tinggi diperlukan untuk format cetak; harus dioptimalkan untuk web. Memang merepotkan untuk memperkecil ukuran gambar di web, tetapi akan menjadi hambatan jika penulis hanya menyediakan file ringan untuk gambar yang ditujukan untuk publikasi cetak. Kami akhirnya memberikan beragam pesan tentang persyaratan pengiriman naskah dengan karya seni. Kemudian kami menciptakan alur kerja yang kompleks untuk memproses bahan-bahan tersebut."
Kemampuan browser
- "Pemangkasan src responsif otomatis dari browser sebagai fitur [bawaan] akan sangat berguna karena memakan waktu untuk memangkas semua gambar menjadi 4 ukuran dan menulis semua markup. Jika kami dapat mengupload satu foto besar dan menulis tag gambar sederhana, browser akan otomatis membuat beberapa atribut src yang akan menjadi fitur pemenang."
- "Secara pribadi, saya kesulitan menghindari perubahan posisi/geometri halaman saat gambar dengan ditetapkan oleh CSS untuk gambar responsif (max-width: 100%; tinggi otomatis atau tinggi: lebar: 100%; tinggi otomatis), terutama dalam kombinasi dengan arah 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 mengambil frame pertama saja."
CDN dan layanan gambar
- "Google harus menyediakan CDN gratis seperti Cloudflare."
- "Mungkin lebih banyak alat untuk menyiapkan penskalaan dinamis dan CDN dengan penyedia yang berbeda akan lebih bagus."
- "Satu gambar yang terlalu besar dikompresi adalah solusi yang sangat baik tanpa biaya produksi tambahan. Anda membutuhkan gambar dengan lebar sekitar 1.000 piksel untuk perangkat seluler (lebar render 500 piksel) dan itu juga merupakan ukuran yang Anda perlukan untuk layar non-retina besar/desktop. Menurut saya, mengubah ukuran CDN untuk gambar adalah solusi yang sangat buruk, meskipun saya telah menggunakannya sebelumnya. CMS harus menangani pengubahan ukuran dan hal tersebut terlalu rumit untuk disiapkan, satu solusi merupakan kompromi yang baik (untuk saat ini)."
- "CloudFlare menskalakan gambar secara otomatis agar cocok dengan tampilan pengguna. Jadi, kita dapat menghemat waktu pemuatan karena gambar dimuat secara relatif terhadap tampilan pengguna. Misalnya, jika pengguna sedang menggunakan ponsel, aplikasi tidak akan dimuat di latar belakang berukuran desktop."
- "Cloudflare melakukannya di latar belakang tanpa mengharuskan kita melakukan apa pun selain mencentang kotak di panel setelan."
- "Sekali lagi, satu-satunya alasan saya berhasil menggunakan srcset, dll. adalah karena kemudahan Cloudinary. Namun, Cloudinary menjadi mahal, sangat cepat. Ini terasa seperti lubang besar dalam pengalaman pengembangan."
- "Kami memerlukan cara untuk memangkas gambar otomatis dengan mudah dengan cara yang cerdas, sehingga gambar tersebut dapat digunakan dengan berbagai rasio aspek dalam konteks yang berbeda."
- "Saya juga menggunakan gambar dari Penyedia lain seperti Unsplash, yang kontrol resolusi, kualitas, dan kompresinya sangat sedikit."
CMS, platform, dan framework
- "Saya masih kesulitan menemukan cara terbaik menggunakan gambar saat membangun situs menggunakan CMS. Penulis cenderung mengonfigurasi gambar dengan dimensi yang berbeda dan mengharapkan gambar tidak menyusut atau diskalakan. Saya tidak yakin apakah dapat menyetel lebar maksimum atau tinggi maksimum pada gambar"
- "Sudah menggunakan gatsby-image dalam beberapa proyek terakhir dan tidak pernah menengok ke belakang."
- "Gambar sering kali menjadi bagian yang sulit karena dimasukkan ke dalam CMS oleh pengguna akhir. Gambar mungkin menggunakan berbagai ukuran, format, terkadang gambar asli dalam format dan dimensi gambar yang ideal."
- "Gambar sulit dikelola karena sistem kami layanan mandiri penambahan kontrol sulit dilakukan kecuali sesuatu terjadi secara otomatis tanpa memengaruhi resolusi. Bagi kami, gambar tidak terlihat akurat di perangkat seluler vs desktop"
- "Saya membantu orang-orang untuk mengoptimalkan situs mereka (WordPress). Masalah terbesar yang saya lihat untuk gambar adalah: Perlu bergantung pada CDN atau plugin untuk membuat WebP. srcset/picture harus dikodekan dengan benar oleh developer tema. Sebagian besar plugin pemuatan lambat yang dimuat perlahan sehingga memberikan UX yang buruk. Gambar latar sulit dimuat dengan 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 sebagai biaya pengembangan yang tidak perlu untuk situs web saat ini. Peningkatan performa tidak dibahas secara luas atau dilaporkan oleh pengguna akhir (UX). Jika ada, penyimpanan gambar dari web akan agak lebih sulit."
- "Sangat mahal untuk membuat dan mengelola banyak ukuran, versi."
- "Jenis ini memakan banyak ruang di server kami."
SEO
- "Sulit untuk menyeimbangkan antara kualitas gambar dan ukuran file yang dapat diterima. Di satu sisi, saya ingin pemuatan yang cepat demi keuntungan SEO, tetapi di sisi lain, gambar berkualitas buruk akan menurunkan nilai UI/UX."
Peran gambar di web
- "Ada terlalu banyak di web. Berhenti menggunakan gambar tidak berguna yang tidak meningkatkan konten tertulis."
- "Apakah Anda masih ingat waktu ketika web tidak memiliki gambar dan kita berbagi selfie sebagai karya seni ASCII?"
Alat, panduan, standar, dan praktik terbaik: frustrasi dan permintaan
- [Seorang peserta menulis postingan blog sebagai respons terhadap survei ini]
- "Persyaratannya tampaknya terus berubah. Sebagai developer web, hal ini sangat menjengkelkan karena memakan waktu lama untuk menyimpan gambar sejak awal. Kami mengoptimalkannya sebaik mungkin, kami memeriksa situs, kemudian beberapa bulan kemudian Google telah memutuskan bahwa gambar dapat lebih dikompresi lagi atau perlu dalam format yang berbeda. Hal ini menghalangi kami untuk memberikan solusi terbaik yang dapat bertahan lama dan justru menciptakan upaya yang mahal bagi mereka dan kami. Beberapa klien bisnis kecil kami tidak memiliki anggaran untuk terus memperbaiki gambar dan menyimpannya ulang 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 menyita waktu. Akan sangat bagus jika ada sistem penyimpanan gambar yang akan konsisten untuk jangka waktu yang lebih lama."
- "Ya, sepertinya Anda mendapatkan "Jumlah Permintaan Rendah dan Ukuran File Kecil" semuanya salah di Lighthouse. Jika situs ditayangkan melalui HTTP1.x, pastikan. Namun, jika situs menayangkan melalui HTTP2, jumlah permintaan akan menjadi kurang penting atau tidak menjadi masalah jika berasal dari nama host yang sama. Saya memiliki situs web ringan, tetapi saya memuat 30 file WebP kecil dengan total sekitar 35 permintaan, melalui HTTP2 pada nama host yang sama. Lighthouse menandai ini sebagai masalah "Pertahankan Jumlah Permintaan Rendah dan Ukuran File Kecil" sementara itu supercepat dan karena HTTP2 pada nama host yang sama jumlah permintaan tidak menjadi masalah. Ya, filenya sudah kecil (sebagian besar di antara 1 KB dan 2 KB atau kurang). Saya dapat memuat sprite tetapi harus melakukan lebih banyak komputasi CSS. Jadi, perbarui laporan "Pertahankan Jumlah Permintaan Rendah dan Ukuran File Kecil" di Lighthouse untuk mempertimbangkan HTTP2 pada nama host yang sama."
- "Orang-orang sulit mengingat untuk mengompresi gambar mereka saat ini."
- "Perilaku lintas browser tetap tidak dapat diprediksi sehingga solusi yang paling sederhana sering kali menjadi yang paling aman."