Masukan dari survei pengoptimalan gambar musim panas 2019

Komentar dari responden survei tentang berbagai teknik pengoptimalan gambar

Sam Dutton

Postingan ini mencantumkan masukan berformat 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 mengapa 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, Anda mungkin merasa postingan ini 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 akan diterapkan.

Komentar

WebP

  • "Saya suka WebP, tetapi belum sepenuhnya siap. Selain itu, WordPress kami tidak mendukung WebP. Salah satu aplikasi pengeditan foto yang paling populer, Photoshop, juga tidak mendukung WebP secara default. Jadi, kami tidak dapat mengandalkan aplikasi atau layanan pihak ketiga untuk kompresi gambar."
  • "Membuat 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 terlalu keras jika dukungan browser buruk, dan pertimbangkan kebutuhan akan PNG, bukan JPEG, untuk screenshot."
  • "Google Dokumen tidak mendukung WebP".
  • "Kami ingin menggunakan WebP secara eksklusif, tetapi khawatir dengan kompatibilitas browser."
  • "Pertama-tama perbaiki kompatibilitas browser dan update browser lama atau tambahkan perbaikan lama, lalu orang akan lebih cenderung menggunakan 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 mengutak-atiknya."

Gambar SVG dan vektor

  • "Jika memungkinkan, saya menggunakan SVG (animasi). gatsby-image memperbaiki banyak hal ini. Namun, jika Anda menggali apa yang telah mereka lakukan, sangat tidak realistis jika situs normal harus membuat sesuatu seperti itu agar gambar berfungsi dengan benar. Browser harus lebih bertanggung jawab atas hal ini."
  • "Apakah Anda dapat mendokumentasikan cara membuat animasi SVG dengan lottie.js?"
  • "Kami biasanya mencoba menggunakan gambar JPEG beresolusi besar dengan ukuran rendah di situs kami untuk menghindari waktu pemuatan. Kami juga memastikan untuk menggunakan SVG jika diperlukan untuk memberikan kualitas desain responsif."
  • "Kami mencoba menggunakan grafik vektor yang dioptimalkan untuk semua, kecuali gambar jika memungkinkan."

Format gambar lainnya

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

Pemuatan lambat

  • "Harap pertimbangkan pengguna saat mempertimbangkan fitur seperti pemuatan lambat, karena bagi banyak orang, fitur ini menjengkelkan."
  • "Buat atribut pemuatan lambat berfungsi dengan background-image."
  • "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 "TIDAK MUAT". Itulah pemahaman tim kami yang meringkasnya. Sulit bagi pengguna non-teknis untuk menjelaskan masalah."
  • "Saya ingin mendapatkan pemahaman yang lebih baik tentang penggunaan Intersection Observer API untuk pemuatan lambat, bukan menggunakan teknik tradisional."
  • "Ini sangat 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 untuk mengontrol detail terperinci, terutama dengan konten yang dikirimkan pengguna. Kami lebih sering menggunakan gaya visual <div> dan background-image karena memungkinkan kita menggunakan background-size, background-position, dan mencegah penyimpanan gambar dengan klik kanan."

Transparansi

  • "Ini tahun 2019. Bagaimana JPG masih tanpa transparansi alfa?"
  • "Saya hanya menggunakan PNG untuk foto jika 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

  • "Kami baru-baru ini mengalami masalah performa terkait gambar. Saat pengguna men-scroll ke bawah di situs kami, kami menampilkan 60 kartu berikutnya yang menyertakan thumbnail. Karena batas koneksi 6 di 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 / memuat permintaan data JSON AJAX dari domain yang berbeda."

Pengaturan ukuran

  • "Maaf untuk intrinsicsize; memanfaatkan tinggi/lebar sepertinya lebih baik bagi saya."
  • "Mencari cara untuk membuat lebih sedikit ukuran, saat ini ada ~12."
  • "Penyesuaian ukuran gambar secara dinamis sangat sulit dan tidak mungkin dilakukan tanpa JS."
  • "Alat seperti responsivebreakpoints.com bagus 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 pindai beresolusi tinggi, biasanya TIFF atau PDF."
  • "Sulit. File img beresolusi tinggi diperlukan untuk format cetak; harus dioptimalkan untuk web. Memang merepotkan untuk memperkecil ukuran gambar untuk web, tetapi akan menjadi masalah besar jika penulis hanya menyediakan file ringan untuk gambar yang ditujukan untuk publikasi cetak. Kami akhirnya memberikan pesan yang beragam tentang persyaratan pengiriman manuskrip dengan karya seni. Kemudian, kita 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 memotong semua gambar menjadi 4 ukuran dan menulis semua markup akan memakan waktu. Jika kita 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 reflow halaman saat lebar gambar ditetapkan oleh CSS untuk gambar responsif (max-width: 100%; height auto atau height: width: 100%; height auto), terutama jika dikombinasikan dengan arah seni dari tag gambar/gambar adaptif. Cara terbaik untuk menghindarinya tampaknya menggunakan "hack padding negatif" untuk rasio gambar tetap, lalu memosisikan gambar di dalam kotak rasio ini. Dukungan browser yang lebih baik/penanganan gambar yang responsif akan sangat membantu."
  • "Nonaktifkan "putar otomatis" GIF dengan mengambil hanya frame pertama."

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 bagus tanpa biaya produksi tambahan. Anda memerlukan gambar dengan lebar sekitar 1.000 piksel untuk perangkat seluler (lebar render 500 piksel) dan ukuran tersebut juga diperlukan untuk layar besar/desktop non-retina. Saya rasa CDN yang mengubah 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 layar pengguna. Jadi, kita dapat menghemat waktu pemuatan karena gambar dimuat secara relatif terhadap tampilan pengguna. Misalnya, jika pengguna menggunakan ponsel, halaman tidak akan dimuat dalam latar belakang berukuran desktop."
  • "Cloudflare melakukan ini di latar belakang tanpa kita harus melakukan apa pun kecuali mencentang kotak di panel setelan."
  • "Sebagai pengingat, 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 secara otomatis dengan mudah dan cerdas sehingga dapat digunakan dengan rasio aspek yang berbeda dalam konteks yang berbeda."
  • "Saya juga menggunakan gambar dari penyedia lain seperti Unsplash yang memiliki kontrol resolusi, kualitas, dan kompresi yang sangat sedikit."

CMS, platform, dan framework

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

Biaya/manfaat

  • "Praktik baru ini efektif, tetapi meningkatkan waktu pengembangan situs."
  • "Kurangnya kepatuhan terhadap standar baru seperti srcset dan WebP telah lambat diadopsi oleh banyak perusahaan Fortune 500. Melihat hal ini, banyak perusahaan menolak perubahan tersebut karena dianggap 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 mempersulit penyimpanan gambar dari web."
  • "Membuat dan mengelola beberapa ukuran, versi, membutuhkan biaya yang mahal".
  • "File tersebut menghabiskan banyak ruang di server kami".

SEO

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

Peran gambar di web

  • "Ada terlalu banyak di web. Berhenti 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 ASCII-art?"

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

  • [Seorang peserta menulis postingan blog sebagai respons terhadap survei ini]
  • "Persyaratan tampaknya terus berubah. Sebagai developer web, hal ini sangat menjengkelkan karena menyimpan gambar membutuhkan waktu. Kami mengoptimalkan sebaik mungkin, memeriksa situs, lalu beberapa bulan kemudian Google memutuskan bahwa gambar dapat dikompresi lebih lanjut atau harus dalam format yang berbeda. Hal ini mencegah kami memberikan solusi terbaik yang bertahan lama kepada klien, dan justru menciptakan upaya yang mahal bagi mereka dan kami. Beberapa klien bisnis kecil kami tidak memiliki anggaran untuk kami 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 berbagai ukuran gambar untuk perangkat yang berbeda juga memakan waktu. Akan lebih baik jika ada sistem penyimpanan gambar yang konsisten untuk jangka waktu yang lebih lama."
  • "Ya, sepertinya Anda salah memahami "Pertahankan Jumlah Permintaan Tetap Rendah dan Ukuran File Tetap Kecil" 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 pada nama host yang sama. Lighthouse menandainya sebagai masalah "Pertahankan Jumlah Permintaan Tetap Rendah dan Ukuran File Tetap Kecil", padahal situs ini 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 lebih banyak komputasi CSS perlu dilakukan. Jadi, perbarui laporan "Pertahankan Jumlah Permintaan Tetap Rendah dan Ukuran File Tetap Kecil" di Lighthouse untuk memperhitungkan HTTP2 melalui nama host yang sama."
  • "Orang-orang kesulitan mengingat untuk mengompresi gambar mereka."
  • "Perilaku lintas browser tetap tidak dapat diprediksi sehingga solusi yang paling sederhana sering kali menjadi yang paling aman."