Anket katılımcılarının çeşitli resim optimizasyon teknikleri hakkındaki yorumları
Sam Dutton
Bu yayında, Google Web DevRel'in Yaz 2019 resim optimizasyon teknikleri anketinde aldığı serbest biçimli geri bildirimler listelenmektedir. Yanıtlar, Web Fundamentals ve @ChromiumDev üzerinden istendi. Anketin amacı, performansı iyileştirmenin nispeten kolay bir yolu gibi görünmesine rağmen çoğu sitenin neden görsel optimizasyonu en iyi uygulamalarına uymadığını öğrenmekti. Anket metodolojisinde kusurlar olduğu için yanıt verileri burada listelenmez.
Kitle
- Web geliştiriciyseniz yeni resim optimizasyon tekniklerini keşfetmek veya diğer web geliştiricilerin karşılaştığınız bir sorunu nasıl çözdüğüyle ilgili ayrıntıları öğrenmek, ayrıca her tekniğin maliyetlerini, avantajlarını ve sınırlamalarını öğrenmek için bu yayından yararlanabilirsiniz.
- Resim hizmeti veya resim CDN sağlayıcısıysanız bu gönderi yeni pazar fırsatları bulmanıza yardımcı olabilir.
- Çerçeve, derleme aracı veya içerik yönetim sistemi geliştiriciyseniz bu gönderi, uygulanabilecek yeni özelliklerle ilgili fikirler verebilir.
Yorumlar
WebP
- "WebP'yi seviyorum ancak henüz tam olarak hazır değil. Ayrıca WordPress'imiz WebP'yi desteklemiyor. En popüler fotoğraf düzenleme uygulamalarından biri olan Photoshop da WebP'yi varsayılan olarak desteklemez. Bu nedenle, resim sıkıştırma için üçüncü taraf uygulamalarına veya hizmetlerine güvenemiyoruz."
- "WebP'yi Safari'de kullanılabilir hale getirin."
- "Photoshop/Figma/Sketch'ten dışa aktarabilsem ve tüm tarayıcılar desteklese WebP'yi kullanmaktan memnuniyet duyarım." [Not: Sketch, WebP'yi destekler.]
- "Yeni nesil biçimlendirme çözümü harika olur."
- "Tarayıcı desteği zayıf olduğunda WebP'yi bu kadar zorlamayın ve ekran görüntüleri için JPEG yerine PNG'yi kullanın."
- "Google Dokümanlar, WebP'yi desteklemiyor."
- "WebP'yi yalnızca kullanmak istiyoruz ancak tarayıcı uyumluluğu konusunda endişelerimiz var."
- "Önce tarayıcı uyumluluğunu düzeltin ve eski tarayıcıları güncelleyin veya eski düzeltmeleri ekleyin. Ardından kullanıcılar WebP gibi yeni resim türlerini kullanmaya daha hevesli olur…"
- "Geliştirici olmayanların bu konuda uğraşmak zorunda kalmaması için eklenti/tema geliştiricilerin WebP ve diğer yeni nesil resim türlerine destek sunmayı düşünmelerini sağlayın."
SVG ve vektör resimleri
- "Mümkünse (animasyonlu) SVG kullanıyorum. gatsby-image bu sorunun çoğunu çözdü. Ancak yaptıklarına baktığınızda, normal bir web sitesinin resimlerin düzgün çalışması için böyle bir şey oluşturması gerektiği tamamen gerçek dışıdır. Tarayıcı bu konuda daha fazla sorumluluk almalıdır."
- "lottie.js ile SVG animasyonları oluşturmanın nasıl yapıldığını belgeleyebilir misiniz?"
- "Yüklenme sürelerini önlemek için web sitemizde çoğu zaman düşük boyutlarda büyük çözünürlüklü JPEG resimler kullanmaya çalışıyoruz. Ayrıca, duyarlı tasarım için kalite sağlamak amacıyla gerektiğinde SVG'leri kullandığımızdan emin oluruz."
- "Mümkünse resimler dışında her şey için optimize edilmiş vektör grafikleri kullanmaya çalışıyoruz."
Diğer resim biçimleri
- "Kullanıcılar GIF kullanmayı bırakmaları konusunda daha iyi eğitilmeli."
Geç yükleme
- "Birçok kullanıcı için can sıkıcı olduğu için lütfen yavaş yükleme gibi özellikleri kullanırken kullanıcıyı göz önünde bulundurun."
- "Lütfen yavaş yükleme özelliğini background-image ile uyumlu hale getirin."
- "Çerçeveler, kutudan çıkar çıkmaz daha iyi öğe işleme yapmalıdır."
- "Uzun zaman önce, yavaş yükleme yerine dinamik yüklemeye geçtik. Kullanıcılar, milyonlarca resim ve sitenin "YÜKLENMEDİĞİNİ" bildiriyor. Ekibimizin özetlemesi bu şekilde. Teknik bilgisi olmayan kullanıcıların sorunları açıklaması zordur."
- "Gerekli olmayan öğeleri yükleme için geleneksel teknikler yerine Intersection Observer API'yi kullanmayı daha iyi anlamak istiyorum."
- "Benim için pwafire.org/developer/codelabs/progressive-loading iyi çalışıyor."
Arka plan resimleri
- "Genellikle resimleri CSS'de arka plan olarak yüklerim."
- "
<img>etiketi sorunlu ve özellikle kullanıcı tarafından gönderilen içeriklerde ayrıntılı ayrıntıları kontrol etmek zor. background-size ve background-position özelliklerini kullanmamıza ve resmin sağ tıklanarak kaydedilmesini önlememize olanak tanıdığı için<div>ve background-image stilini çok daha sık kullanıyoruz."
Şeffaflık
- "2019'dayız. JPG'lerde neden hâlâ alfa şeffaflığı yok?"
- "PNG'leri yalnızca şeffaf arka plana ihtiyacım olduğunda fotoğraflar için kullanıyorum."
Düşük kaliteli resim yer tutucuları (LQIP'ler)
- "LQIPS kullanıyoruz. Bu teknik, ziyaretçileri etkileşimde tutmak için yüksek kaliteli resimleri çok erken yüklemeden harika bir yöntem."
Performans
- "Geçtiğimiz günlerde resimlerle ilgili bir performans sorunu yaşadık. Kullanıcı sitemizde aşağı kaydırdığında, küçük resim içeren sonraki 60 kartı gösteririz. Aynı alandaki 6 bağlantı sınırı nedeniyle, kullanıcı aşağı kaydırmaya devam ederse küçük resimlerin yanı sıra sonraki 60 kartı almak için sonraki AJAX isteği de engelleniyordu."
- "HTTP/2'yi kullanmak isteriz ancak müşterilerimizin çoğu IE11 kullanıyor. Bu nedenle, alan bölme / AJAX JSON veri isteklerini farklı bir alandan yükleme seçeneklerini araştırıyoruz."
Boyutlandırma
- "intrinsicsize için özür dilerim. Yükseklik/genişlik kullanmak daha iyi gibi görünüyor."
- "Daha az beden oluşturmanın bir yolunu arıyorum. Şu anda yaklaşık 12 beden var."
- "Resimlerin dinamik olarak yeniden boyutlandırılması JS olmadan gerçekten zor ve imkansız."
- "responsivebreakpoints.com gibi bir araç web.dev için iyidir :)."
Yüksek kaliteli ve yüksek çözünürlüklü resimler
- "DPI kalitesini kaybetmeden sıkıştırılmış resimleri nasıl indirebilirim?"
- "Biz bir doküman yönetimi şirketiyiz. Uygulamalarımız, genellikle TIFF veya PDF biçiminde MİLYONlarca yüksek çözünürlüklü taranmış resimle çalışır."
- "Bu çok zahmetli. Baskı biçimi için yüksek çözünürlüklü resim dosyaları gereklidir; web için optimize edilmelidir. Web için resimleri küçültmek zahmetli bir işlemdir ancak yazarların yalnızca basılı yayına yönelik resimler için düşük boyutlu dosyalar sağlaması yayını durdurur. El yazmalarının posterle birlikte gönderilmesiyle ilgili şartlar konusunda kafa karıştırıcı mesajlar veriyoruz. Ardından, bu materyalleri işlemek için karmaşık iş akışları elde ederiz."
Tarayıcı özelliği
- "Tüm resimleri 4 boyuta kırpmak ve tüm işaretlemeleri yazmak zaman alıcı olduğundan, tarayıcıdan otomatik duyarlı src kırpma özelliği [yerleşik] olarak çok yararlı olur. Tek bir büyük fotoğraf yükleyip basit bir resim etiketi yazarsak tarayıcılar otomatik olarak birden fazla src özelliği oluşturur. Bu, kazanan bir özellik olur."
- "Kişisel olarak, duyarlı resimler için CSS tarafından resim genişliği ayarlandığında (max-width: 100%; height auto veya height: width: 100%; height auto), özellikle de uyarlanabilir resimlerden/resim etiketinden gelen sanat yönetmenliğiyle birlikte sayfanın yeniden akışını önlemek konusunda zorluk yaşıyorum. Bunu önlemenin en iyi yolu, sabit bir resim oranı için "negatif dolgu hilesi"ni kullanmak ve ardından resmi bu oran kutusunun içine yerleştirmektir. Daha iyi tarayıcı desteği/duyarlı resim işleme özelliği çok faydalı olur."
- "Lütfen GIF'in "otomatik oynatma" özelliğini devre dışı bırakın. Bunun için yalnızca ilk kareyi getirin."
CDN'ler ve resim hizmetleri
- "Google, Cloudflare gibi ücretsiz bir CDN sağlamalıdır."
- "Farklı sağlayıcılarla dinamik ölçeklendirme ve CDN ayarlamak için daha fazla araç olsa iyi olur."
- "Tek bir büyük boyutlu, aşırı sıkıştırılmış resim, ek üretim maliyeti olmayan çok iyi bir çözümdür. Mobil cihazlar için yaklaşık 1.000 piksel genişliğinde resimlere (500 piksel oluşturma genişliği) ihtiyacınız vardır. Bu, retina olmayan büyük/masaüstü ekranlar için de gereken boyuttur. Geçmişte kullanmış olsam da resimleri yeniden boyutlandıran CDN'lerin çok kötü bir çözüm olduğunu düşünüyorum. İçerik yönetim sistemi, yeniden boyutlandırmayı halletmelidir. Bu, ayarlanması çok karmaşık olduğundan tek bir çözüm (şimdilik) iyi bir uzlaşmadır."
- "CloudFlare, resimlerimizi kullanıcının ekranıyla en iyi şekilde eşleşecek şekilde otomatik olarak ölçeklendirir. Böylece, resimler kullanıcının ekranına göre yüklendiği için yükleme süresinden tasarruf edebiliriz. Örneğin, kullanıcı telefon kullanıyorsa masaüstü boyutunda bir arka planda yüklenmez."
- "Cloudflare, ayarlar panelimizde bir kutuyu işaretlememiz dışında hiçbir şey yapmamıza gerek kalmadan bunu arka planda yapar."
- "srcset vb. öğeleri başarıyla kullanabilmemin tek nedeni Cloudinary'ın kolaylığıdır. Ancak Cloudinary çok hızlı bir şekilde pahalı hale geliyor. Bu, geliştirme deneyiminde büyük bir eksiklik gibi duruyor."
- "Resimlerin farklı bağlamlarda farklı en boy oranlarında çalışabilmesi için akıllı bir şekilde otomatik olarak kırpılabilmesini sağlayan bir yönteme ihtiyacımız var."
- "Ayrıca, çözünürlük, kalite ve sıkıştırma üzerinde çok daha az kontrol sahibi olduğumuz Unsplash gibi diğer sağlayıcılardan da resimler kullanıyorum."
İçerik yönetim sistemi, platform ve çerçeve
- "İçerik yönetim sistemi kullanarak site oluştururken resimleri kullanmanın en iyi yolunu bulmaya çalışıyorum. Yazarlar, resimleri farklı boyutlarda yapılandırır ve resimlerin küçültülmemesi veya ölçeklendirilmemesi gerektiğini düşünür. Resimlerde max-width veya max-height ayarının uygun olup olmadığından emin değilim."
- "Son birkaç projede gatsby-image kullanıyorum ve geriye dönüp bakmadım."
- "Resimler genellikle son kullanıcı tarafından içerik yönetim sistemine yerleştirildiği için zor bir konudur. Kullanıcılar istedikleri boyutu ve biçimi kullanabilir. Bazen ideal resim biçiminde orijinal resim kullanılır ve boyutlar mevcut değildir."
- "Sistemimiz self servis olduğu için resimlerin bakımı zordur. Çözümleri çözmek için otomatik olarak işlem yapılmadığı sürece kontrol eklemek zordur. Ayrıca, mobil cihazlarda ve masaüstünde resimler doğru görünmüyor."
- "Kullanıcıların sitelerini (WordPress) optimize etmelerine yardımcı oluyorum. Resimlerle ilgili gördüğüm en büyük sorunlar şunlardır: WebP oluşturmak için bir CDN'ye veya eklentilere ihtiyaç duyulması. srcset/picture öğesinin tema geliştiricileri tarafından düzgün şekilde kodlanması gerekir. Geç yükleme eklentilerinin çoğu yavaş yüklenir ve kötü kullanıcı deneyimi sunar. Arka plan resimlerinin geç yüklenmesi zordur."
Maliyet/yarar
- "Yeni uygulamalar etkili olsa da sitelerin geliştirme süresini uzatıyor."
- "srcset ve WebP gibi yeni standartlara uyulmaması, birçok Fortune 500 şirketinin bu standartları benimsemesini yavaşlattı. Bu nedenle birçok şirket, mevcut web siteleri için gereksiz bir geliştirme maliyeti olarak bu değişikliğe karşı çıktı. Performans kazanımları son kullanıcı (UX) tarafından yaygın olarak tartışılmaz veya bildirilmez. Bu durum, web'den resim kaydetmeyi biraz daha zorlaştırıyor."
- "Birden fazla boyut ve sürüm oluşturmak ve yönetmek maliyetli."
- "Bu dosyalar sunucumuzda çok fazla yer kaplıyor."
SEO
- "Kabul edilebilir resim kalitesi ile dosya boyutu arasında denge kurmak zor. Bir yandan SEO avantajı için hızlı yükleme olmasını istiyorum, diğer yandan da düşük kaliteli resimler kullanıcı arayüzünü/kullanıcı deneyimini olumsuz etkileyecektir."
Web'de görsellerin rolü
- "Web'de çok fazla var. Yazılı içeriği iyileştirmeyen gereksiz resimler kullanmayı bırakın."
- "Web'de resimlerin olmadığı ve selfie'leri ASCII sanatı olarak paylaştığımız zamanları hatırlıyor musunuz?"
Araçlar, rehberlik, standartlar ve en iyi uygulamalar: Can sıkıcı durumlar ve istekler
- [Bir katılımcı bu ankete yanıt olarak bir blog yayını yazdı]
- "Şartlar sürekli değişiyor. Web geliştiricisi olarak, resimleri kaydetmenin zaman alıcı olması nedeniyle bu durum son derece can sıkıcı. Elimizden geldiğince optimize ediyoruz, siteyi kontrol ediyoruz ve aylarca sonra Google, resimlerin daha da sıkıştırılabileceğine veya farklı bir biçimde olması gerektiğine karar veriyor. Bu durum, müşterimize uzun süreli ve mümkün olan en iyi çözümü sunmamızı engelleyip hem bizim hem de müşterimiz için maliyetli bir girişime neden oluyor. Küçük işletme müşterilerimizden bazılarının, resimleri düzeltmeye ve gereksinimlere uymaları için yeniden kaydetmeye devam edebilmemize yetecek bütçesi yok. Bu çalışmayı yönetim paketleri kapsamında yapacak bütçemiz yok. Farklı cihazlar için farklı resim boyutlarını çağıran kodu yazmak da zaman alıcıdır. Resimleri daha uzun süre boyunca tutarlı olacak şekilde kaydetme sistemi oluşturmak çok iyi olur."
- "Evet, Lighthouse'ta "İstek sayısını az ve aktarma boyutlarını küçük tutun" kuralını tamamen yanlış anlamışsınız. Site HTTP1.x üzerinden yayınlanıyorsa evet, ancak HTTP2 üzerinden yayınlanıyorsa istek sayısı daha az önemlidir veya aynı ana makine adından geliyorsa sorun bile değildir. Basit bir web sitem var ancak aynı ana makinede HTTP2 üzerinden toplam yaklaşık 35 istek içeren 30 küçük WebP dosyası yüklüyorum. Lighthouse bunu "İstek sayısını az ve dosya boyutlarını küçük tutun" sorunu olarak işaretliyor. Ancak site süper hızlı ve aynı ana makine adında HTTP2 kullanıldığı için istek sayısı sorun teşkil etmiyor. Evet, dosyalar zaten küçüktür (çoğu 1 KB ile 2 KB arasında veya daha küçüktür). Bir sprite yükleyebilirim ancak daha fazla CSS hesaplaması yapılması gerekir. Bu nedenle lütfen Lighthouse'taki "İstek sayısını az ve aktarma boyutlarını küçük tutun" raporunu, aynı ana makine adında HTTP2'yi dikkate alacak şekilde güncelleyin."
- "Kullanıcıların resimlerini sıkıştırmayı hatırlaması zordu."
- "Tarayıcılar arası davranış tahmin edilemez olduğundan genellikle en basit çözümler en güvenli olanlardır."