Masukan dari survei pengoptimalan gambar musim panas 2019

Komentar dari responden survei tentang berbagai teknik pengoptimalan gambar

Sam Dutton

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

Audiens

  • Jika Anda seorang developer web, postingan ini mungkin bermanfaat untuk menemukan teknik pengoptimalan gambar baru, atau detail tentang cara developer web lain memecahkan masalah yang Anda hadapi, serta biaya, manfaat, dan keterbatasan dari setiap teknik.
  • Jika Anda adalah layanan gambar atau penyedia CDN gambar, postingan ini mungkin membantu Anda menemukan peluang pasar yang baru.
  • Jika Anda adalah developer framework, alat build, atau CMS, postingan ini mungkin bisa memberi Anda ide tentang fitur-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 langsung mendukung WebP. Jadi, kami tidak dapat mengandalkan aplikasi atau layanan pihak ketiga untuk kompresi gambar."
  • "Buat WebP dapat digunakan di Safari."
  • "Saya akan senang menggunakan WebP jika saya dapat mengekspornya dari Photoshop/Figma/Sketch dan semua browser yang mendukungnya." [Catatan: Sketch mendukung WebP]
  • "Solusi pemformatan generasi berikutnya akan sangat bagus."
  • "Berhentilah mendorong WebP saat dukungan browser buruk, dan pertimbangkan perlunya PNG, bukan JPEG untuk screenshot."
  • "Google Dokumen tidak mendukung WebP."
  • "Kami hanya akan menggunakan WebP secara eksklusif, namun khawatir dengan kompatibilitas browser."
  • "Pertama-tama perbaiki kompatibilitas browser dan update browser lama atau tambahkan perbaikan lama, maka orang akan lebih cenderung mengadopsi jenis gambar baru seperti WebP..."
  • "Dorong developer plugin/tema untuk mempertimbangkan memberikan 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 telah memperbaiki banyak masalah ini. Tetapi ketika Anda mendalami apa yang telah mereka lakukan, benar-benar tidak realistis bahwa {i>website<i} normal harus membuat sesuatu seperti itu agar gambar bekerja dengan benar. Browser harus mengemban tanggung jawab lebih besar."
  • "Apakah mungkin untuk 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 jika diperlukan untuk memberikan kualitas desain yang responsif."
  • "Kami mencoba menggunakan grafik vektor yang dioptimalkan untuk semua kecuali gambar, jika memungkinkan."

Format gambar lainnya

  • "Kami [perlu] mengedukasi orang-orang untuk berhenti menggunakan GIF."

Pemuatan lambat

  • "Harap perhatikan pengguna saat mempertimbangkan fitur seperti pemuatan lambat, karena hal itu menjengkelkan bagi banyak orang."
  • "Harap buat atribut pemuatan lambat berfungsi dengan gambar latar."
  • "Kerangka kerja seharusnya dapat melakukan pemrosesan aset yang lebih baik secara langsung."
  • "Kami sudah lama beralih dari pemuatan lambat. Pengguna melaporkan jutaan gambar dan situs "TIDAK MEMUAT". Itulah pemahaman yang dirangkum oleh tim kami. Pengguna non-teknis akan sulit menjelaskan masalahnya."
  • "Saya ingin mendapatkan pemahaman yang lebih baik tentang penggunaan Intersection Observer API untuk pemuatan lambat daripada menggunakan teknik tradisional."
  • "Ini cocok sekali untuk saya: pwafire.org/developer/codelabs/progressive-loading."

Gambar latar

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

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 merupakan teknik yang baik untuk mempertahankan minat pengunjung tanpa memuat gambar berkualitas tinggi sejak dini."

Performa

  • "Kami baru-baru ini mengalami masalah performa terkait gambar. Saat pengguna menggulir ke bawah di situs kami, kami menampilkan 60 kartu berikutnya yang menyertakan gambar mini. Karena batasan 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 mempelajari sharding domain / memuat permintaan data JSON AJAX dari domain yang berbeda."

Ukuran

  • "Maaf untuk ukuran intrinsik; meningkatkan tinggi/lebar sepertinya lebih baik bagi saya."
  • "Mencari cara untuk menghasilkan lebih sedikit ukuran, saat ini ukuran ~12."
  • "Pengubahan ukuran gambar yang dinamis sangat sulit dan tidak mungkin 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 yang dipindai beresolusi tinggi, biasanya TIFF atau PDF."
  • "Merepotkan. File img resolusi tinggi diperlukan untuk format cetak; harus dioptimalkan untuk web. Memperkecil ukuran gambar untuk web memang merepotkan jika penulis hanya menyediakan file ringan untuk gambar yang ditujukan untuk publikasi cetak. Kami akhirnya memberikan beragam pesan mengenai persyaratan untuk mengirimkan manuskrip dengan karya seni. Kami kemudian memiliki alur kerja yang kompleks untuk memproses bahan-bahan tersebut."

Kemampuan browser

  • "Crop src yang 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 kita dapat mengupload satu foto besar dan menulis tag gambar sederhana, browser akan otomatis membuat beberapa atribut src yang akan menjadi fitur unggul."
  • "Secara pribadi saya kesulitan menghindari reflow halaman ketika image dengan ditetapkan oleh CSS untuk gambar yang 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 menghindari tampaknya adalah menggunakan "hack padding negatif" untuk rasio gambar tetap, lalu posisikan gambar di dalam kotak rasio ini. Dukungan browser yang lebih baik/penanganan gambar yang responsif 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 baik."
  • "Satu gambar yang terlalu besar dan terlalu dikompresi adalah solusi yang sangat baik tanpa biaya produksi tambahan. Anda memerlukan gambar berlebar sekitar 1.000 piksel untuk perangkat seluler (lebar render 500 piksel) dan itu juga ukuran yang Anda perlukan untuk layar non-retina besar/desktop. Saya pikir gambar untuk mengubah ukuran CDN adalah solusi yang sangat buruk, meskipun saya telah menggunakannya sebelumnya. CMS harus menangani pengubahan ukuran dan itu terlalu rumit untuk disiapkan, satu solusi merupakan solusi yang bagus (untuk saat ini)."
  • "CloudFlare menskalakan gambar secara otomatis agar sesuai dengan tampilan pengguna. Dengan demikian, kita dapat menghemat waktu pemuatan karena gambar dimuat sesuai dengan tampilan pengguna. Misalnya, jika pengguna sedang menggunakan ponsel, aplikasi tidak akan dimuat di latar belakang berukuran desktop."
  • "Cloudflare melakukan ini di latar belakang dan kami tidak harus melakukan apa pun kecuali mencentang kotak di panel setelan kami."
  • "Sekali lagi, satu-satunya alasan saya berhasil menggunakan srcset, dll. adalah karena kemudahan Cloudinary. Namun, Cloudinary menjadi mahal, sangat cepat. Hal ini terasa seperti lubang besar dalam pengalaman pengembangan."
  • "Kami memerlukan cara untuk memangkas gambar secara otomatis dengan mudah dan cerdas sehingga dapat bekerja dengan berbagai rasio aspek dalam konteks yang berbeda."
  • "Saya juga menggunakan gambar dari Penyedia lain seperti Unsplash, yang memberikan lebih sedikit kontrol atas resolusi, kualitas, dan kompresi."

CMS, platform, dan framework

  • "Saya masih kesulitan menemukan cara terbaik untuk menggunakan gambar, saat saya membuat situs menggunakan CMS. Penulis cenderung mengonfigurasi gambar dengan dimensi yang berbeda dan mengharapkan gambar tidak menyusut atau diskalakan. Saya tidak yakin apakah saya boleh menyetel max-width atau max-height pada gambar"
  • "Pernah menggunakan gatsby-image untuk beberapa proyek terakhir dan tidak pernah melihat ke belakang."
  • "Gambar sering kali menjadi bagian yang sulit karena dimasukkan ke dalam CMS oleh pengguna akhir. Namun, mereka mungkin menggunakan berbagai ukuran, format, dan terkadang gambar asli dalam format dan dimensi gambar yang ideal."
  • "Gambar sulit dikelola karena sistem kami adalah layanan mandiri yang menambahkan kontrol, kecuali jika terjadi secara otomatis tanpa memengaruhi resolusi. Selain itu, gambar terlihat tidak benar di perangkat seluler vs desktop"
  • "Saya membantu orang-orang 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 dimuat dengan lambat sehingga memberikan UX yang buruk. Gambar latar sulit dimuat dengan lambat."

Biaya/manfaat

  • "Praktik baru ini efektif, tetapi dapat 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 biaya pengembangan yang tidak perlu untuk situs saat ini. Peningkatan kinerja tidak dibahas atau dilaporkan secara luas oleh pengguna akhir (UX). Jika ada, hal ini akan mempersulit penyimpanan gambar dari web."
  • "Biaya untuk membuat dan mengelola beberapa ukuran, versi."
  • "Karena memakan banyak ruang di server."

SEO

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

Peran gambar di web

  • "Ada terlalu banyak konten di web. Berhenti menggunakan gambar tidak berguna yang tidak meningkatkan kualitas konten tertulis."
  • "Apakah Anda masih ingat saat web tidak memiliki gambar dan kita berbagi selfie sebagai 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 menghabiskan waktu untuk menyimpan gambar sejak awal. Kami mengoptimalkan yang kami bisa, kami memeriksa situs dan kemudian beberapa bulan kemudian Google memutuskan bahwa gambar bisa lebih dikompresi atau harus dalam format yang berbeda. Hal ini menghalangi kami untuk memberikan solusi terbaik kepada klien kami yang bertahan lama dan justru menciptakan upaya yang mahal bagi mereka dan kami. Beberapa klien bisnis kecil kami tidak memiliki anggaran bagi kami untuk terus memperbaiki gambar dan menyimpannya kembali agar memenuhi persyaratan. Kami tidak memiliki anggaran untuk melakukan pekerjaan ini dalam paket manajemen mereka. Menulis kode untuk memanggil ukuran gambar yang berbeda untuk perangkat yang berbeda juga memakan waktu. Sebaiknya buat sistem penyimpanan gambar yang konsisten untuk jangka waktu yang lebih lama."
  • "Ya, sepertinya Anda salah memasukkan "Jumlah Permintaan Tetap Rendah dan Ukuran File Kecil" di Lighthouse. Jika situs melayani melalui HTTP1.x maka tentu saja, tetapi jika situs melayani melalui HTTP2 maka jumlah permintaannya kurang penting atau bahkan tidak menjadi masalah jika berasal dari nama host yang sama. Saya memiliki situs web lite, tetapi saya memuat 30 file WebP kecil dengan total sekitar 35 permintaan, melalui HTTP2 pada nama host yang sama. Lighthouse menandai ini sebagai masalah "Keep Request Counts Low And File Sizes Small" sedangkan itu supercepat dan karena HTTP2 pada nama host yang sama, jumlah permintaan tidak menjadi masalah. Dan ya, filenya sudah kecil (sebagian besar antara 1 KB dan 2 KB atau kurang). Saya dapat memuat sprite tetapi kemudian lebih banyak komputasi CSS yang perlu dilakukan. Jadi, perbarui laporan "Jaga Jumlah Permintaan Rendah dan Ukuran File Tetap Kecil" di Lighthouse untuk mempertimbangkan HTTP2 pada nama host yang sama."
  • "Sudah sulit bagi orang-orang untuk mengingat untuk mengompresi gambar mereka."
  • "Perilaku lintas browser tetap tidak dapat diprediksi sehingga solusi yang paling sederhana sering kali paling aman."