Anket katılımcılarının çeşitli resim optimizasyonu teknikleri hakkındaki yorumları
Bu yayında, Google Web DevRel'in 2019 Yazı görüntü optimizasyonu teknikleri anketinde aldığı serbest biçimli geri bildirimler listelenmektedir. Web'in Temelleri ve @ChromiumDev aracılığıyla istekler alındı. Anketin amacı, çoğu sitenin performansı artırmanın nispeten kolay bir yolu gibi görünmesine rağmen neden resim optimizasyonu en iyi uygulamalarını takip etmediğini öğrenmekti. Anket metodolojisinde kusurlar olduğu için yanıt verileri burada listelenmemiştir.
Kitle
- Web geliştiricisiyseniz bu gönderi, yeni görsel optimizasyonu tekniklerini veya diğer web geliştiricilerinin karşılaştığınız bir sorunu nasıl çözdüğü, ayrıca her tekniğin maliyetlerini, avantajlarını ve sınırlamalarını keşfetmek için yararlı olabilir.
- Görüntü hizmeti veya resim CDN sağlayıcısıysanız bu yayın, yeni pazar fırsatları bulmanıza yardımcı olabilir.
- Bir çerçeve, geliştirme aracı veya İYS geliştiricisiyseniz, bu gönderi, uygulayabileceğiniz yeni özellikler hakkında fikir verebilir.
Yorum sayısı
WebP
- "WebP'yi seviyorum ama henüz tam olarak hazır değil. Ayrıca, WordPress'imiz WebP'yi desteklemez. En popüler fotoğraf düzenleme uygulamalarından biri olan Photoshop, kullanıma hazır WebP'yi de desteklemez. Bu nedenle, resim sıkıştırma için üçüncü taraf uygulamalarına veya hizmetlerine güvenemeyiz."
- "Make WebP available on Safari." (WebP'yi Safari'de kullanılabilir yap.)
- "Fotoğrafları Photoshop/Figma/Sketch'ten dışa aktarabilseydim ve tüm tarayıcılar tarafından desteklendiğinde WebP'yi kullanmak isterdim." [Not: Çizim, WebP'yi destekler]
- "Yeni nesil biçimlendirme çözümü harika olurdu."
- "Tarayıcı desteği zayıfken WebP'yi çok fazla zorlamayı durdurun ve ekran görüntüleri için JPEG yerine PNG'ye ihtiyaç duyun."
- "Google Dokümanlar, WebP'yi desteklemiyor."
- "Yalnızca WebP'yi kullanacaktık, ancak tarayıcı uyumluluğuyla ilgili endişelerimiz var."
- "Önce tarayıcı uyumluluğunu düzeltip eski tarayıcıları güncelleyin veya eski düzeltmeleri ekleyin, o zaman kullanıcılar WebP gibi yeni resim türlerini benimsemeye daha eğilimli olacaktır..."
- "Eklenti/tema geliştiricilerini WebP'ye ve diğer yeni nesil resim türlerine destek vermeye teşvik edin. Böylece, geliştirici olmayan geliştiricilerle uğraşmak zorunda kalmazlar."
SVG ve vektör resimler
- "Mümkünse (animasyonlu) SVG kullanıyorum. gatsby-image bunun büyük bir kısmını düzeltti. Ancak ne yaptıklarını ayrıntılarıyla incelediğinizde, görsellerin düzgün çalışması için normal bir web sitesinin buna benzer bir yapı oluşturmak zorunda olması hiç de gerçekçi değil. Tarayıcının bu sorumluluğu daha fazla üstlenmesi gerekiyor."
- "lottie.js ile SVG animasyonlarının nasıl oluşturulacağı belgelenebilir mi?"
- "Yükleme sürelerinden kaçınmak için çoğu zaman web sitemizde küçük boyutlu, büyük çözünürlüklü JPEG resimleri kullanmaya çalışıyoruz. Ayrıca, duyarlı tasarıma kalite sağlamak için gerektiğinde SVG'leri kullanıyoruz."
- "Mümkünse resimler hariç tümü için optimize edilmiş vektör grafiklerini kullanmaya çalışıyoruz."
Diğer resim biçimleri
- "İnsanları GIF kullanmayı bırakmaları konusunda daha iyi eğitmemiz [gerekiyor]."
Geç yükleme
- "Birçokları için sinir bozucu olduğundan, geç yükleme gibi özellikleri düşünürken lütfen kullanıcıları göz önünde bulundurun."
- "Lütfen geç yükleme özelliğinin arka plan resmiyle çalışmasını sağlayın."
- "Çerçeveler ilk andan itibaren öğe işlemeyi daha başarılı hale getirmelidir."
- "Uzun zaman önce geç yüklemeden dönüşüm gerçekleştirdik. Kullanıcılar milyonlarca resim ve site "YÜKLÜYOR" bildiriyor. Ekibimiz konuyu şu şekilde özetledi: Teknik bilgisi olmayan kullanıcıların sorunları açıklaması zordur."
- "Geç yükleme için geleneksel teknikler yerine Intersection Observer API'sini kullanmayı daha iyi anlamak istiyorum."
- "İşime yaradı: pwafire.org/developer/codelabs/progressive-loading."
Arka plan resimleri
- "Resimleri genellikle CSS'de arka plan olarak yüklüyorum."
- "
<img>
etiketi sorunlu ve özellikle kullanıcı tarafından gönderilen içerikle ilgili ayrıntılı ayrıntıların kontrol edilmesi zor. Arka plan boyutu ve arka plan konumu kullanmamıza ve resmin sağ tıklamayla kaydedilmesini engellememize olanak sağladığı için<div>
ve arka plan resmi stilini çok daha sık kullanıyoruz."
Şeffaflık
- "2019 yılında. JPG'ler alfa şeffaflığı olmadan neden hâlâ kullanılıyor?"
- "PNG'leri fotoğraflar için yalnızca şeffaf bir arka plana ihtiyacım olduğunda kullanıyorum."
Düşük Kaliteli Resim Yer Tutucuları (LQIP'ler)
- "LQIPS kullanıyoruz ve yüksek kaliteli resimleri çok erken yüklemeden ziyaretçilerin etkileşimde kalmasını sağlamak için harika bir teknik."
Performans
- "Yakın zamanda resimlerle ilgili bir performans sorunu yaşadık. Kullanıcı sitemizde sayfayı aşağı kaydırdığında, küçük resim içeren sonraki 60 kartı gösteririz. Aynı alan adında 6 bağlantı sınırı nedeniyle küçük resimler engelleniyor ve kullanıcı sayfayı aşağı kaydırmaya devam ederse sonraki 60 kartı almak için sonraki AJAX isteğiyle karşılaşıyordu."
- "HTTP/2 kullanmak isteriz ancak müşterilerimizin çoğu IE11'i kullanıyor. Bu nedenle, farklı bir alan adındaki AJAX JSON veri isteklerini alan parçalama / yükleme işlemlerini araştırıyoruz."
Boyutlandırma
- "Doğal bir boyut olduğu için üzgünüm. Yükseklik/genişlikten yararlanma daha iyi gibi görünüyor."
- "Daha az boyut oluşturmanın bir yolu aranıyor ancak şu anda bu sayı yaklaşık 12."
- "Resimlerin dinamik olarak yeniden boyutlandırılması JS olmadan gerçekten zor ve imkansız."
- "responsivebreakpoints.com gibi bir araç web.dev için çok işe yarar :)."
Yüksek kaliteli ve yüksek çözünürlüklü resimler
- "Sıkıştırılmış resimleri DPI kalitesinden ödün vermeden nasıl indirilir?"
- "Biz bir belge yönetimi şirketiyiz. Uygulamalarımız genellikle TIFF veya PDF olmak üzere MİLYONLARCA yüksek çözünürlüklü taranmış resmi işliyor."
- "Zor bir durum. Yüksek çözünürlüklü img dosyaları, yazdırma biçimi için gereklidir. Web için optimize edilmiş olmalıdır. Web'de resimlerin boyutunu küçültmek zahmetli bir iştir, ancak yazarlar yalnızca basılı yayına gönderilecek resimler için hafif dosyalar sağlıyorsa bunu engelleyemez. Poster içeren el yazmalarının gönderimiyle ilgili şartlar hakkında karışık mesajlar vermeye devam ediyoruz. Ardından bu malzemeleri işlemek için karmaşık iş akışlarıyla uğraşıyoruz."
Tarayıcı özellikleri
- "Tarayıcıdan [yerleşik] olarak otomatik duyarlı src kırpma özelliği, tüm resimlerin 4 boyutta kırpılması ve tüm işaretlemelerin yazılması zaman aldığı için çok yararlı olacaktır. Büyük bir fotoğraf yükleyip basit bir resim etiketi yazabildiğimizde, tarayıcıların kazanan bir özellik olacak birden çok src özelliğini otomatik olarak oluşturacağı anlamına gelir."
- "Özellikle uyarlanabilir resimlerdeki/resim etiketindeki resim yönü ile birlikte, CSS tarafından duyarlı resimler için (maks. genişlik: %100; yükseklik, otomatik veya yükseklik: genişlik: %100; yükseklik) resim ayarlandığında, kişisel olarak sayfaların yeniden düzenlenmesinden kaçınmakta zorlanıyorum. Kaçınmanın en iyi yolu, sabit bir resim oranı için "negatif dolgu saldırısı" yöntemini kullanmak ve ardından resmi bu oran kutusuna yerleştirmek gibi görünüyor. Daha iyi tarayıcı desteği/duyarlı resim işleme bize çok yardımcı olur."
- "Lütfen yalnızca ilk kareyi getirerek GIF "otomatik oynatma" özelliğini devre dışı bırakın."
CDN'ler ve görüntü hizmetleri
- "Google, Cloudflare gibi ücretsiz bir CDN sağlamalıdır."
- "Belki farklı sağlayıcılarla dinamik ölçeklendirme ve CDN'ler ayarlamak için daha fazla araç daha iyi olurdu."
- "Tek bir aşırı büyük boyutlu aşırı sıkıştırılmış görüntü, ek üretim maliyeti olmadan son derece iyi bir çözümdür. Mobil cihazlar için yaklaşık 1.000 piksel genişliğinde (500 piksel oluşturma genişliği) resimlere ihtiyacınız vardır. Bu resim aynı zamanda büyük/masaüstü retina olmayan ekranlar için de gerekli olan boyuttur. Resimlerin CDN'lerini yeniden boyutlandırmanın çok kötü bir çözüm olduğunu düşünüyorum, ancak bunu geçmişte kullanmıştım. Yeniden boyutlandırmayı içerik yönetim sisteminin ele alması gerekiyor ve bu da kurulumu fazla karmaşık. Tek bir çözüm şu an için iyi bir uzlaşma sağlar."
- "CloudFlare, görsellerimizi kullanıcının ekranına en uygun şekilde otomatik olarak ölçeklendiriyor. Böylece, resimler kullanıcının ekranına göre yüklendiği için yükleme süresinden tasarruf edebiliriz. Örneğin, telefon kullanan bir kullanıcı masaüstü boyutlu arka planda yüklenmez."
- "Cloudflare, bu işlemi arka planda, ayarlar panelimizdeki bir kutuyu işaretlemek dışında hiçbir şey yapmanıza gerek kalmadan yapıyor."
- "srcset ve benzeri öğeleri başarıyla kullanabilmemin tek nedeni Cloudinary'nin kolaylığıdır. Ancak Cloudinary pahalıya mal oluyor, gerçekten hızlı. Bu, geliştirme deneyiminde büyük bir delik gibi görünüyor."
- "Farklı bağlamlarda farklı en boy oranlarıyla çalışabilmeleri için resimleri akıllı bir şekilde kolayca otomatik olarak kırpacak bir yönteme ihtiyacımız var."
- "Çözünürlük, kalite ve sıkıştırma üzerinde çok daha az kontrole sahip olan Unsplash gibi diğer sağlayıcıların resimlerini de kullanıyorum."
İYS, platform ve çerçeve
- "İçerik yönetim sistemi kullanarak site oluştururken görselleri kullanmanın en iyi yolunu bulmakta hâlâ zorlanıyorum. Yazarlar farklı boyutlarda resimler yapılandırma eğilimindedir ve resimlerin daralmaması veya ölçeklenmemesi beklenir. Resimlerde max-width veya max-height ayarını yapmanın uygun olup olmadığından emin değilim"
- "Son birkaç projede gatsby-image kullandım ve hiç geriye bakmadım."
- "Resimler, son kullanıcı tarafından CMS'ye konduğundan genellikle işin zor kısmıdır. Herhangi bir boyut, biçim kullanılabilir, bazen de ideal resim biçiminde orijinal resim ve boyutlar mevcut olmayabilir."
- "Sistemimiz self servis şekilde kontrol ettiği için resimleri yönetmek zor. Çözünürlüğü etkilemeden işler otomatik olarak yapılmadığı sürece kontrol eklemek zor. Ayrıca bizim için resimler mobil cihazlarda ve masaüstünde doğru görünmüyor"
- "Kullanıcıların sitelerini optimize etmesine yardımcı oluyorum (WordPress). Resimlerle ilgili gördüğüm en büyük sorunlar: WebP oluşturmak için bir CDN'ye veya eklentilere bağlı olması gerekiyor. srcset/picture, tema geliştiriciler tarafından doğru şekilde kodlanmalıdır. Geç yükleme eklentilerinin çoğu yavaş yükleniyor ve kötü bir kullanıcı deneyimi sunuyor. Arka plan resimlerinin geç yüklenmesi zor."
Maliyet/fayda
- "Yeni uygulamalar etkili, ancak sitelerin geliştirilme süresini uzatıyor."
- "Srcset ve WebP gibi yeni standartlara uyum sağlanmaması birçok Fortune 500 şirketi tarafından yavaş yavaş benimseniyor. Bu durumu gören birçok şirket, mevcut web siteleri için gereksiz bir geliştirme maliyeti olarak değişikliğe direnmiştir. Performans kazançları, son kullanıcı (UX) tarafından geniş çapta tartışılmaz veya raporlanmaz. Herhangi bir şey varsa, web'den resim kaydetmeyi biraz daha zorlaştırıyor."
- "Birden fazla boyut ve sürüm oluşturmak ve yönetmek maliyetli."
- "Sunucumuzda çok fazla yer kaplar."
SEO
- "Kabul edilebilir resim kalitesi ile dosya boyutu arasında denge kurmak zor. Bir yandan, SEO avantajı için hızlı yükleme yapmak istiyorum, ancak düşük kaliteli resimler kullanıcı arayüzünü veya kullanıcı deneyimini olumsuz etkiler."
Web'deki görsellerin rolü
- "Web'de çok fazla şey var. Yazılı içeriği iyileştirmeyen gereksiz resimler kullanmaktan kaçının."
- "Web'de resimlerin olmadığı ve selfie'lerin ASCII sanat eseri olarak paylaşıldığı zamanları hâlâ hatırlıyor musunuz?"
Araçlar, rehberlik, standartlar ve en iyi uygulama: hayal kırıklıkları ve istekler
- [Bir katılımcı bu ankete yanıt olarak bir blog yayını yazdı]
- "Gereksinimler sürekli değişiyor. Resimleri kaydetmek her şeyden önce zaman alıcı olduğundan, web geliştiricisi olarak son derece sinir bozucudur. Elimizden gelen en iyi şekilde optimizasyon yapar, siteyi kontrol ederiz ve aylar sonra Google, resimlerin daha da sıkıştırılmış olabileceğine veya farklı bir biçimde olması gerektiğine karar vermiştir. Bu da müşterilerimize mümkün olan en iyi çözümü sunmamızı engelliyor ve hem onlar hem de bizim için maliyetli bir girişime dönüşüyor. Küçük işletme müşterilerimizden bazıları, gereksinimlere uymak için resimleri düzeltmek ve yeniden kaydetmek için yeterli bütçeye sahip değil. Yönetim paketlerinde bu işi yapacak bütçemiz yok. Farklı cihazlar için farklı resim boyutlarını çağırmak amacıyla kod yazmak da zaman alır. Daha uzun bir süre boyunca tutarlı olacak resimleri kaydetmeye yönelik bir sistem bulmak harika olurdu."
- "Evet, Lighthouse'ta "İstek Sayısını Düşük ve Dosya Boyutlarını Küçük Tut" mesajının yanlış olduğunu düşünüyorum. Bir site HTTP1.x üzerinden sunuluyorsa elbette, ancak site HTTP2 üzerinden hizmet veriyorsa isteklerin sayısı daha az önemli olur, hatta aynı ana makine adından geliyorsa sorun bile değildir. Hafif bir web sitem var, ancak aynı ana makine adında HTTP2 üzerinden toplam yaklaşık 35 istek içeren 30 küçük WebP dosyası yüklüyorum. Lighthouse, bunu "İstek Sayısını Düşük ve Dosya Boyutlarını Küçük Tut" sorunu olarak işaretliyor. O halde bu sorun çok hızlıdır ve aynı ana makine adındaki HTTP2 nedeniyle istek sayısı sorun oluşturmaz. Ayrıca, dosyalar zaten küçük (çoğu 1 KB ila 2 KB veya daha küçük). Bir sprite görsel yükleyebilirim, ancak daha fazla CSS bilgi işlem yapılması gerekiyor. Bu nedenle lütfen Lighthouse'taki "İstek Sayısını Düşük ve Dosya Boyutunu Küçük Tut" raporunu, HTTP2'yi aynı ana makine adına dikkate alacak şekilde güncelleyin."
- "İnsanların resimlerini sıkıştırmayı hatırlamaları çok zor oldu."
- "Tarayıcılar arası davranışlar öngörülemez olmaya devam ediyor. Bu nedenle, en basit çözümler genellikle en güvenli olanlardır."