Anket katılımcılarının çeşitli görsel optimizasyon teknikleriyle ilgili yorumları
Sam Dutton
Bu yayında, Google Web DevRel'in 2019 yazındaki resim optimizasyonu teknikleri anketinde aldığı serbest biçimli geri bildirimler listelenmektedir. Yanıtlar Web'in Temelleri ve @ChromiumDev üzerinden istendi. Anketin amacı, çoğu sitenin performansı iyileştirmenin nispeten kolay bir yolu gibi görünse de neden çoğu sitenin resim optimizasyonu en iyi uygulamalarını takip etmediğini öğrenmekti. Anket metodolojisinde hatalar olduğundan yanıt verileri burada listelenmemiştir.
Kitle
- Web geliştiricisiyseniz yeni görsel optimizasyonu tekniklerini keşfetmek veya diğer web geliştiricilerin karşılaştığınız bir sorunu nasıl çözdüğüyle ilgili ayrıntıların yanı sıra her tekniğin maliyetleri, avantajları ve sınırlamaları hakkında ayrıntılı bilgi edinmek için bu yayını yararlı bulabilirsiniz.
- Bir görüntü hizmeti veya görüntü CDN sağlayıcısıysanız bu yayın, yeni pazar fırsatları bulmanıza yardımcı olabilir.
- Çerçeve, derleme aracı veya İYS geliştiricisiyseniz bu yayın size, 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, ilk bakışta WebP'yi desteklemez. Bu nedenle görüntü sıkıştırma için 3. taraf uygulamalarına veya hizmetlerine güvenemeyiz."
- "WebP'yi Safari'de kullanılabilir yap."
- "WebP'yi Photoshop/Figma/Sketch'ten dışa aktarabilecek olsaydım ve tüm tarayıcılar destekliyorsa kullanmak isterdim." [Not: Sketch, WebP'yi destekler]
- "Yeni nesil biçimlendirme çözümü harika olurdu."
- "Tarayıcı desteği yetersiz olduğunda WebP'yi zorlamayı bırakın ve ekran görüntüleri için JPEG yerine PNG'yi kullanma ihtiyacını düşünün."
- "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üzeltin ve eski tarayıcıları güncelleyin, eski düzeltmeleri ekleyin. Bunun ardından kullanıcılar WebP gibi yeni resim türlerini kullanmaya daha meyilli olacaktır..."
- "Eklenti/tema geliştiricilerini WebP ve diğer yeni nesil resim türleri için destek sağlamaya teşvik edin. Böylece, geliştiricilerle uğraşmak zorunda kalmazsınız."
SVG ve vektör resimler
- "Mümkünse (animasyonlu) SVG kullanıyorum. gatsby-image bu sorunun çoğunu giderdi. Ancak yaptıklarını derinlemesine incelediğinizde, resimlerin doğru çalışması için normal bir web sitesinin böyle bir şey oluşturmak zorunda kalması tamamen gerçekçi değildir. Tarayıcının bu sorumluluğun daha büyük bir kısmını üstlenmesi gerekiyor."
- "lottie.js ile SVG animasyonlarının nasıl oluşturulacağı belgelenebilir miydi?"
- "Yükleme sürelerini önlemek için web sitemizde çoğunlukla düşük boyutlu yüksek çözünürlüklü JPEG resimler kullanmaya çalışıyoruz. Ayrıca, duyarlı tasarımda kalite sağlamak için gerektiğinde SVG'leri kullanıyoruz."
- "Mümkün olduğunda, resimler hariç tümü için optimize edilmiş vektör grafikleri kullanmaya çalışıyoruz."
Diğer resim biçimleri
- "İnsanları GIF kullanmayı bırakmaları için daha iyi eğitmemiz gerekiyor."
Geç yükleme
- "Lütfen geç yükleme gibi özellikleri değerlendirirken kullanıcıyı aklınızda bulundurun, çünkü çoğu kişi için bu rahatsız edicidir."
- "Lütfen geç yükleme özelliğinin arka plan resmiyle çalışmasını sağlayın."
- "Çerçeveler, öğe işlemeyi anında daha iyi yapacaktır."
- "Uzun zaman önce geç yükleme yönteminden dönüşüm gerçekleştirdik. Kullanıcılar "NOT LOADING" (YÜKLENİYOR) olarak milyonlarca görsel ve siteyle ilgili kullanıcı raporları sunar. Ekibimiz bunu şöyle özetledi: Teknik bilgisi olmayan kullanıcıların sorunları açıklaması zordur."
- "Geç yükleme için Intersection Observer API'sini geleneksel teknikler yerine daha iyi anlamak istiyorum."
- "Çok iş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 de kullanıcılar tarafından gönderilen içerikle ilgili ince ayrıntıları kontrol etmek zordur. Arka plan boyutu ile arka plan konumunu kullanmamıza ve resmin sağ tıklamayla kaydedilmesini engellememize olanak tanıdığından<div>ve arka plan resmi stilini çok daha sık kullanıyoruz."
Şeffaflık
- "2019 geldi. JPG'ler neden alfa şeffaflığını hâlâ devre dışı bırakıyor?"
- "Fotoğraflarda yalnızca şeffaf bir arka plana ihtiyacım olduğunda PNG kullanıyorum."
Düşük Kaliteli Resim Yer Tutucuları (LQIP'ler)
- "LQIPS kullanıyoruz ve çok erken bir aşamada yüksek kaliteli resimler 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ılar sitemizde sayfayı aşağı kaydırırken küçük resim içeren sonraki 60 kartı gösteririz. Aynı alan adındaki 6 bağlantı sınırı nedeniyle küçük resimler de engelleniyordu. Kullanıcı sayfayı aşağı kaydırmaya devam ederse sonraki 60 kartı almak için yapılan bir sonraki AJAX isteği de engelleniyordu.
- "HTTP/2'yi kullanmak isterdik ama müşterilerimizin çoğu IE11'i kullanıyor. Bu nedenle, farklı bir alandan alan parçalamayı / AJAX JSON veri isteklerini yüklemeyi inceliyoruz."
Boyutlandırma
- "Doğal boyut için üzgünüm; yükseklikten/genişlikten yararlanmak bana daha iyi geliyor."
- "Daha az boyut üretmenin bir yolunu arıyorum. Şu anda bu sayı yaklaşık 12."
- "JS olmadan resimleri dinamik olarak yeniden boyutlandırmak gerçekten zor ve imkansız."
- "responsivebreakpoints.com gibi bir araç web.dev için iyi bir araçtır :)."
Yüksek kaliteli ve yüksek çözünürlüklü resimler
- "Sıkıştırılmış resimleri DPI kalitesinden ödün vermeden nasıl indireceğim?"
- "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."
- "Bu çok zor bir iş. Yüksek çözünürlüklü img dosyaları yazdırma biçimi için gereklidir; web için optimize edilmelidir. Web için resimlerin boyutunu küçültmek zor bir işlemdir, ancak yazarlar basılı yayın için gönderilecek resimler için yalnızca hafif dosyalar sağlıyorsa bu engeldir. Sanat eseri içeren el yazmalarının gönderilmesiyle ilgili koşullar hakkında karma mesajlar veriyoruz. Daha sonra bu materyalleri işlemek için karmaşık iş akışları oluşturabiliyoruz."
Tarayıcı özelliği
- "Tüm resimleri 4 boyutta kırpmak ve tüm işaretlemeleri yazmak zaman alıcı olduğundan [yerleşik] özelliği olarak tarayıcıdan otomatik duyarlı src kırpma işlemi çok yararlı olacaktır. Büyük bir fotoğraf yükleyip basit bir resim etiketi yazabilirsek, tarayıcılar otomatik olarak kazanan özellik olan birden çok src özelliğini oluşturur."
- "Kişisel olarak, özellikle uyarlanabilir resimler/resim etiketinden alınan resim yönü ile birlikte, CSS ile duyarlı resimler için CSS tarafından ayarlanan resimler (maks-genişlik: %100; yükseklik otomatik veya yükseklik: genişlik: %100; yükseklik otomatik) ile ayarlandığında sayfanın yeniden düzenlenmesinden kaçınmakta zorlanıyorum. Bunu önlemenin en iyi yolu, sabit bir resim oranı için "negatif dolgu saldırısı"nı kullanmak ve ardından resmi bu oran kutusunun içine yerleştirmektir. Daha iyi tarayıcı desteği/duyarlı görsel işleme özelliği çok yardımcı olabilir."
- "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."
- "Farklı sağlayıcılarla dinamik ölçeklendirme ve CDN oluşturmak için daha fazla araç kullanmak iyi olabilir."
- "Aşırı büyük boyutlu tek bir aşırı sıkıştırılmış resim, ekstra prodüksiyon maliyeti olmadan oldukça iyi bir çözümdür. Mobil cihazlar için yaklaşık 1000 piksel genişliğinde resimlere (500 piksel oluşturma genişliğinde) ihtiyacınız vardır. Bu boyut, büyük/masaüstü retina olmayan ekranlar için de gerekli olan boyuttur. Resim yeniden boyutlandırma CDN'leri bence çok kötü bir çözüm olsa da geçmişte kullanmıştım. Yeniden boyutlandırmayla İYS'nin ilgilenmesi gerekir. Bu yeniden boyutlandırmayla başa çıkmak çok karmaşıktır. Tek bir çözüm, şu an için iyi bir çözümdür."
- "CloudFlare, görüntülerimizi 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ğinden yükleme süresinden tasarruf edebiliriz. Örneğin, kullanıcı telefondaysa masaüstü boyutundaki arka planda yüklenmez."
- "Cloudflare bu işlemi arka planda gerçekleştirirken ayarlar panelimizdeki bir kutuyu işaretlemek dışında herhangi bir şey yapmamız gerekmez."
- "Aynı şekilde srcset gibi özellikleri başarıyla kullanabilmemin tek nedeni Cloudinary'nin kolaylığı. Ama Cloudinary, gerçekten hızlı bir şekilde pahalıya mal oluyor. Bu, geliştirme deneyiminde büyük bir eksi gibi görünüyor."
- "Resimleri farklı bağlamlarda farklı en boy oranlarıyla çalışabilmeleri için akıllı bir şekilde kolayca otomatik olarak kırpabileceğimiz bir yönteme ihtiyacımız var."
- "Ayrıca çözünürlük, kalite ve sıkıştırma üzerinde çok daha az kontrol sağlayan Unsplash gibi diğer sağlayıcılardan da resimler kullanıyorum."
İYS, platform ve çerçeve
- "İYS kullanarak site oluştururken hâlâ resimleri kullanmanın en iyi yolunu bulmakta zorlanıyorum. Yazarlar resimleri farklı boyutlarda yapılandırma eğilimindedir ve resimlerin küçülmemesini veya ölçeklenmemesini beklerler. Resimlerde maksimum genişlik mi yoksa maksimum yükseklik mi ayarlamanın uygun olduğundan emin değilim"
- "Son birkaç projede gatsby-image kullanıyor ve hiç geriye dönüp bakmıyordum."
- "Resimler, son kullanıcılar tarafından CMS'ye konulduğu için genellikle zor kısımdır. Herhangi bir boyut, biçim ve bazen de ideal resim biçiminde orijinal resim kullanabilirler ve boyutlar mevcut değildir."
- "Sistemimiz self servis olduğundan resimlerin bakımı zor. İşlem, çözünürlüğü etkilemeden otomatik olarak gerçekleşmediği 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 etmelerine yardımcı oluyorum (WordPress). Resimler için gördüğüm en büyük sorunlar şunlardır: WebP oluşturmak için bir CDN'ye veya eklentilere güvenme ihtiyacı. srcset/picture, tema geliştiricileri tarafından doğru bir şekilde kodlanmalıdır. Geç yüklenen eklentilerin çoğu yavaş yüklenerek kötü bir kullanıcı deneyimi sunar. Arka plan resimlerinin geç yüklenmesi zordur."
Maliyet/fayda
- "Yeni uygulamalar etkili ancak sitelerin geliştirme süresini uzatıyor."
- "Srcset ve WebP gibi yeni standartlara uyulmaması birçok Fortune 500 şirketi tarafından yavaş yavaş benimsendi. Bu durumu gören birçok şirket, mevcut web siteleri için gereksiz geliştirme maliyeti olduğu gerekçesiyle bu değişikliğe karşı çıktı. Performans kazanımları, son kullanıcı (UX) tarafından geniş çapta tartışılmaz veya bildirilmez. Böyle bir durum varsa web'den resim kaydetmeyi biraz zorlaştırır."
- "Birden fazla boyut ve sürüm oluşturup yönetmenin maliyeti yüksek."
- "Sunucumuzda çok fazla yer kaplarlar."
SEO
- "Kabul edilebilir resim kalitesi ile dosya boyutu arasında denge kurmak zor. Bir yandan, SEO avantajı için hızlı yüklenmek istiyorum, ancak diğer yandan düşük kaliteli resimler kullanıcı arayüzünü/kullanıcı deneyimini bozacak."
Görsellerin web'deki rolü
- "Web'de çok fazla öğe var. Yazılı içeriği iyileştirmeyen yararsız resimler kullanmayı bırakın."
- "Web'de görüntülerin olmadığı ve selfie'leri ASCII-art olarak paylaştığımız zamanı hâlâ hatırlıyor musunuz?"
Araçlar, rehberlik, standartlar ve en iyi uygulama: talihsizlikler ve istekler
- [Bir katılımcı bu ankete yanıt olarak bir blog yayını yazdı]
- "Gereksinimler sürekli değişiyor. Görselleri ilk başta kaydetmek zaman alıcı olduğundan web geliştiricisi olarak bu son derece can sıkıcı bir durumdur. Elimizden gelen en iyi şekilde optimize ederiz, siteyi kontrol ederiz. Aylar sonra Google, resimlerin daha da sıkıştırılmış olabileceğine veya farklı bir biçimde olmasının gerektiğine karar verir. Bu durum, müşterilerimize uzun süreli ve hem bizim hem de bizim için maliyetli bir çaba oluşturan mümkün olan en iyi çözümü sunmamızı engeller. Bazı küçük işletme müşterilerimiz, resimleri düzeltmek ve koşullara uymak için yeniden kaydetmek için yeterli bütçeye sahip değil. Onların yönetim paketleri dahilinde bu işi yapacak bütçemiz yok. Kodun farklı cihazlar için farklı resim boyutlarını çağırması da zaman alır. Daha uzun süre tutarlı olacak resimleri kaydetmek için bir sistem bulmak çok güzel olurdu."
- "Evet, Lighthouse'da "İstek Sayılarını Az ve Dosya Boyutlarını Küçük Tut" hatasını aldığınızı düşünüyorum. Bir site HTTP1.x üzerinden sunuluyorsa elbette, ancak bir site HTTP2 üzerinden sunuluyorsa, aynı ana makine adından geliyorsa istek sayısı daha az öneme sahip olur, hatta sorun oluşturmaz. Basit bir web sitem var ancak aynı ana makine adında HTTP2 üzerinden toplamda yaklaşık 35 istek içeren 30 küçük WebP dosyası yüklüyorum. Lighthouse, bu durumu "İstek Sayısını Düşük ve Dosya Boyutlarını Küçük Tut" sorunu olarak işaretler. Ancak bu sorun çok hızlıdır ve aynı ana makine adındaki HTTP2 nedeniyle istek sayısı sorun teşkil etmez. Evet, dosyalar zaten küçük (çoğu 1 KB ile 2 KB arasında veya daha küçük). İmge yükleyebilirim ama daha sonra daha fazla CSS bilgi işlem yapılması gerekiyor. Bu nedenle, HTTP2'yi aynı ana makine adı üzerinden dikkate almak için lütfen Lighthouse'daki "İstek Sayılarını Düşük ve Dosya Boyutlarını Küçük Tut" raporunu güncelleyin.
- "İnsanlar için resimlerini sıkıştırmayı hatırlamakta zorlanıyorduk."
- "Tarayıcılar arası davranış öngörülemez olduğundan en basit çözümler genellikle en güvenli olandır."