Anket katılımcılarının çeşitli resim optimizasyonu teknikleriyle ilgili yorumları
Sam Dutton
Bu yayında, Google Web DevRel'in 2019 Yaz resim optimizasyonu teknikleri anketinde aldığı serbest biçimli geri bildirimler listelenmektedir. Yanıtlar Web'in Temelleri ve @ChromiumDev üzerinden toplandı. Anketin amacı, performans iyileştirmenin nispeten kolay bir yolu gibi görünmesine rağmen çoğu sitenin neden görsel optimizasyonuyla ilgili en iyi uygulamaları takip etmediğini öğrenmekti. Anket metodolojisinde kusurlar olduğu için yanıt verileri burada listelenmiyor.
Kitle
- Web geliştiricisiyseniz bu yayını yeni resim optimizasyonu tekniklerini keşfetmek veya diğer web geliştiricilerinin karşılaştığınız bir sorunu nasıl çözdüğüyle ilgili ayrıntıları ve her tekniğin maliyetlerini, avantajlarını ve sınırlamalarını öğrenmek için faydalı bulabilirsiniz.
- Görsel hizmeti veya görsel CDN sağlayıcısıysanız bu yayın, yeni pazar fırsatları bulmanıza yardımcı olabilir.
- Bir çerçeve, derleme aracı veya CMS geliştiricisiyseniz bu yayın, uygulayabileceğiniz yeni özellikler hakkında fikir verebilir.
Yorumlar
WebP
- "WebP'yi seviyorum ama 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 doğrudan desteklemez. Bu nedenle, resim sıkıştırma için üçüncü taraf uygulamalarına veya hizmetlerine güvenemeyiz."
- "WebP'yi Safari'de kullanılabilir hale getirin."
- "Photoshop/Figma/Sketch'ten dışa aktarabilseydim ve tüm tarayıcılar destekleseydi WebP'yi kullanmak isterdim." [Not: Sketch, WebP'yi destekler]
- "Yeni nesil bir biçimlendirme çözümü harika olur."
- "Tarayıcı desteği zayıfken WebP'yi bu kadar zorlamayı bırakın ve ekran görüntüleri için JPEG yerine PNG ihtiyacını göz önünde bulundurun."
- "Google Dokümanlar, WebP'yi desteklemiyor."
- "Yalnızca WebP kullanmak istiyoruz ancak tarayıcı uyumluluğu konusunda endişelerimiz var."
- "Önce tarayıcı uyumluluğunu düzeltip eski tarayıcıları güncelleyin veya eski düzeltmeleri ekleyin. Böylece kullanıcılar WebP gibi yeni resim türlerini kullanmaya daha yatkın olur…"
- "Eklenti/tema geliştiricilerini WebP ve diğer yeni nesil resim türlerini desteklemeye teşvik edin. Böylece geliştirici olmayanların bu konuyla uğraşması gerekmez."
SVG ve vektörel görüntüler
- "Mümkünse (animasyonlu) SVG kullanıyorum. gatsby-image bu sorunun büyük bir kısmını çözdü. Ancak yaptıklarını incelediğinizde, normal bir web sitesinin resimlerin doğru çalışması için böyle bir şey oluşturmak zorunda kalması tamamen gerçek dışıdır. Tarayıcı bu sorumluluğu daha fazla üstlenmelidir."
- "lottie.js ile SVG animasyonlarının nasıl oluşturulacağını belgelemek mümkün mü?"
- "Yükleme sürelerini kısaltmak için web sitemizde genellikle düşük boyutlu, yüksek çözünürlüklü JPEG resimler kullanmaya çalışıyoruz. Ayrıca, duyarlı tasarımda kaliteyi sağlamak için gerektiğinde SVG'ler kullanıyoruz."
- "Mümkünse resimler hariç her şey için optimize edilmiş vektör grafikleri kullanmaya çalışıyoruz."
Diğer resim biçimleri
- "İnsanları GIF kullanmayı bırakmaları konusunda daha iyi eğitmemiz gerekiyor."
Geç yükleme
- Geç yükleme gibi özellikleri değerlendirirken lütfen kullanıcıyı göz önünde bulundurun. Bu özellikler birçok kullanıcı için can sıkıcıdır.
- "Lütfen geç yükleme özelliğinin background-image ile çalışmasını sağlayın."
- "Çerçeveler, öğe işleme konusunda daha iyi bir performans sunmalıdır."
- "Uzun zaman önce geç yüklemeden vazgeçtik. Milyonlarca resim ve sitenin "YÜKLENMEDİĞİNE" dair kullanıcı raporları. Ekibimiz bu şekilde özetledi. Teknik bilgisi olmayan kullanıcıların sorunları açıklaması zor."
- "Geleneksel teknikler yerine Intersection Observer API'yi geç yükleme için kullanma hakkında daha fazla bilgi edinmek istiyorum."
- "Şu sayfa benim işime yarıyor: pwafire.org/developer/codelabs/progressive-loading."
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ı detayları kontrol etmek zor.<div>ve background-image stilini çok daha sık kullanıyoruz. Bu sayede background-size ve background-position özelliklerini kullanabiliyor ve resmin sağ tıklamayla kaydedilmesini engelleyebiliyoruz."
Şeffaflık
- "Yıl 2019. JPG'ler nasıl hâlâ alfa şeffaflığı olmadan kullanılabiliyor?"
- "Fotoğraflarda PNG'yi yalnızca şeffaf bir arka plana ihtiyacım olduğunda kullanıyorum."
Düşük kaliteli resim yer tutucuları (LQIP'ler)
- "LQIPS kullanıyoruz. Bu, yüksek kaliteli resimleri çok erken yüklemeden ziyaretçilerin ilgisini canlı tutmak için harika bir teknik."
Performans
- "Aslında kısa süre önce resimlerle ilgili bir performans sorunu yaşadık. Kullanıcı sitemizde aşağı kaydırdıkça küçük resim içeren sonraki 60 kartı gösteririz. Aynı alan adındaki 6 bağlantı sınırı nedeniyle küçük resimler ve kullanıcı aşağı kaydırmaya devam ederse sonraki 60 kartı almak için gönderilen AJAX isteği engelleniyordu."
- "HTTP/2 kullanmak isteriz ancak müşterilerimizin çoğu IE11 kullanıyor. Bu nedenle, alan parçalama / AJAX JSON veri isteklerini farklı bir alandan yükleme yöntemlerini araştırıyoruz."
Boyutlandırma
- "Intrinsicsize için özür dilerim. Yükseklik/genişlik kullanmak bana daha iyi geliyor."
- "Daha az boyut oluşturmanın bir yolunu arıyorum. Şu anda yaklaşık 12 boyut var."
- "Resimlerin dinamik olarak yeniden boyutlandırılması gerçekten zor ve JS olmadan imkansız."
- "responsivebreakpoints.com gibi bir araç web.dev için iyi bir seçenek :)."
Yüksek kaliteli ve yüksek çözünürlüklü resimler
- "Sıkıştırılmış resimleri DPI kalitesini kaybetmeden nasıl indirebilirim?"
- "Biz bir doküman yönetimi şirketiyiz. Uygulamalarımız, genellikle TIFF veya PDF biçiminde olan MİLYONLARCA yüksek çözünürlüklü taranmış resmi işliyor."
- "Zor bir iş. Baskı formatı 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ştir ancak yazarlar yalnızca basılı yayın için tasarlanmış resimler için hafif dosyalar sağlarsa bu durum bir engel oluşturur. Resimli makalelerin gönderimiyle ilgili şartlar konusunda karışık mesajlar veriyoruz. Bu malzemeleri işlemek için karmaşık iş akışları kullanıyoruz."
Tarayıcı özelliği
- "Tüm resimleri 4 boyuta kırpmak ve tüm işaretlemeleri yazmak zaman aldığından, tarayıcıdan otomatik duyarlı src kırpma özelliğinin [yerleşik] bir özellik olarak sunulması çok faydalı olur. Büyük bir fotoğraf yükleyip basit bir resim etiketi yazabilirsek tarayıcılar otomatik olarak birden fazla src özelliği oluşturur. Bu da çok faydalı bir özellik olur."
- "Kişisel olarak, duyarlı resimler için resim genişliği CSS tarafından ayarlandığında (max-width: %100; height auto veya height: width: %100; height auto), özellikle de uyarlanabilir resimler/resim etiketiyle sanat yönetimiyle birlikte kullanıldığında sayfa yeniden akışlarından kaçınmakta zorlanıyorum. Bu sorunu önlemenin en iyi yolu, sabit bir resim oranı için "negatif dolgu hilesini" kullanmak ve ardından resmi bu oran kutusunun içine yerleştirmektir. Daha iyi tarayıcı desteği/duyarlı resim işleme gerçekten çok yardımcı olur."
- "Lütfen yalnızca ilk kareyi getirerek GIF'lerin otomatik oynatılmasını devre dışı bırakın."
CDN'ler ve resim hizmetleri
- "Google, Cloudflare gibi ücretsiz bir CDN sunmalı."
- "Dinamik ölçeklendirme ve CDN'leri farklı sağlayıcılarla ayarlamak için daha fazla araç olması iyi olurdu."
- "Aşırı sıkıştırılmış tek bir büyük resim, ek üretim maliyeti olmadan çok iyi bir çözüm sunar. Mobil cihazlar için yaklaşık 1.000 piksel genişliğinde resimlere ihtiyacınız vardır (500 piksel oluşturma genişliği). Bu, büyük/masaüstü retina olmayan ekranlar için de ihtiyacınız olan boyuttur. Geçmişte kullanmış olmama rağmen, resim yeniden boyutlandırma CDN'lerinin çok kötü bir çözüm olduğunu düşünüyorum. CMS, yeniden boyutlandırma işlemini gerçekleştirmelidir. Bu işlemin ayarlanması çok karmaşıksa tek bir çözüm (şimdilik) iyi bir uzlaşmadır."
- "CloudFlare, resimlerimizi kullanıcının ekranına en uygun şekilde otomatik olarak ölçeklendiriyor. 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 plan yüklenmez."
- "Cloudflare, ayarlar panelimizdeki bir kutuyu işaretlemek dışında hiçbir şey yapmamıza gerek kalmadan bu işlemi arka planda gerçekleştiriyor."
- "Tekrar etmek gerekirse srcset vb. özellikleri başarıyla kullanabilmemin tek nedeni Cloudinary'nin kullanım kolaylığı. Ancak Cloudinary çok hızlı bir şekilde pahalılaşıyor. Bu durum, geliştirme deneyiminde büyük bir eksiklik gibi hissettiriyor."
- "Resimleri farklı bağlamlarda farklı en boy oranlarıyla kullanabilmek için akıllı bir şekilde otomatik olarak kırpmanın kolay bir yoluna ihtiyacımız var."
- "Ayrıca Unsplash gibi çözünürlük, kalite ve sıkıştırma üzerinde çok az kontrolün olduğu 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 görselleri kullanmanın en iyi yolunu bulmakta hâlâ zorlanıyorum. Yazarlar, resimleri farklı boyutlarda yapılandırma ve resimlerin küçülmemesini veya ölçeklendirilmemesini bekleme eğilimindedir. Resimlerde max-width veya max-height ayarı yapmanın uygun olup olmadığından emin değilim"
- "Son birkaç projemde gatsby-image'ı kullandım ve hiç pişman olmadım."
- Görseller genellikle zor kısımdır çünkü son kullanıcı tarafından içerik yönetim sistemine yerleştirilirler. Herhangi bir boyut, biçim kullanabilirler, bazen ideal resim biçiminde ve boyutlarında orijinal resim mevcut olmayabilir.
- "Sistemimiz self servis olduğu için resimlerin bakımı zor. Çözünürlüğü etkilemeden otomatik olarak gerçekleşmediği sürece kontrol eklemek zor. Ayrıca resimler mobil ve masaüstünde 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 şunlar: WebP oluşturmak için bir CDN'ye veya eklentilere bağımlı olmak gerekiyor. srcset/picture, tema geliştiriciler tarafından doğru şekilde kodlanmalıdır. Geç yükleme eklentilerinin çoğu yavaş yüklenerek kötü bir kullanıcı deneyimi sunar. Arka plan resimlerini geç yüklemek zordur."
Maliyet/fayda
- "Yeni uygulamalar etkili ancak sitelerin geliştirme süresini uzatıyor."
- "srcset ve WebP gibi yeni standartlara uyum, birçok Fortune 500 şirketi tarafından yavaş bir şekilde benimsenmiştir. Bunu gören birçok şirket, mevcut web siteleri için gereksiz bir geliştirme maliyeti olarak gördükleri bu değişikliğe karşı çıktı. Performans artışları, son kullanıcı (UX) tarafından yaygın olarak tartışılmaz veya bildirilmez. Aksine, web'den resim kaydetmeyi biraz daha zorlaştırıyor."
- "Birden fazla boyut ve sürüm oluşturup yönetmek maliyetli."
- "Sunucumuzda çok fazla yer kaplıyorlar."
SEO
- "Kabul edilebilir resim kalitesi ile dosya boyutu arasında denge kurmak zor. Bir yandan SEO avantajı için hızlı yükleme istiyorum, diğer yandan düşük kaliteli resimler kullanıcı arayüzünü/kullanıcı deneyimini olumsuz etkileyecek."
Web'de görsellerin rolü
- "Web'de çok fazla var. Yazılı içeriği iyileştirmeyen gereksiz görseller 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: Sorunlar ve istekler
- [Bir katılımcı bu ankete yanıt olarak bir blog yayını yazdı]
- "Şartlar sürekli değişiyor gibi görünüyor. Bir web geliştiricisi olarak bu durum son derece can sıkıcı çünkü resimleri kaydetmek zaten zaman alıyor. Elimizden geldiğince optimizasyon yapıyoruz, siteyi kontrol ediyoruz ve aylar 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 mümkün olan en iyi ve kalıcı çözümü sunmamızı engeller ve hem müşteri hem de bizim için maliyetli bir çaba gerektirir. Küçük işletme müşterilerimizden bazıları, resimleri düzeltmeye ve şartlara uymak için yeniden kaydetmeye devam etmemiz için yeterli bütçeye sahip değil. Yönetim paketleri kapsamında bu çalışmayı yapacak bütçemiz yok. Farklı cihazlar için farklı resim boyutlarını çağıran kod yazmak da zaman alır. Daha uzun süre tutarlı olacak bir resim kaydetme sistemi oluşturmak harika olur."
- "Evet, bence Lighthouse'daki "İstek Sayılarını Az ve Dosya Boyutlarını Küçük Tutun" önerisini tamamen yanlış anladınız. Bir site HTTP1.x üzerinden yayın yapıyorsa bu doğrudur. Ancak site HTTP2 üzerinden yayın yapıyorsa istek sayısı daha az önemlidir, hatta aynı ana makine adından geliyorsa sorun bile teşkil etmez. Basit bir web sitem var ancak aynı ana makine adı üzerinde HTTP2 üzerinden toplam yaklaşık 35 isteğe ait 30 küçük WebP dosyası yüklüyorum. Lighthouse, bunu "İstek Sayılarını Az ve Dosya Boyutlarını Küçük Tutun" sorunu olarak işaretliyor ancak bu çok hızlı ve aynı ana makine adındaki HTTP2 nedeniyle istek sayısı sorun oluşturmuyor. Dosyalar zaten küçük (çoğu 1 KB ile 2 KB arasında veya daha küçük). Bir sprite yükleyebilirim ancak daha fazla CSS hesaplaması yapılması gerekir. Bu nedenle, Lighthouse'taki "İstek Sayılarını ve Dosya Boyutlarını Düşük Tutun" raporunu, aynı ana makine adı üzerinden HTTP2'yi dikkate alacak şekilde güncelleyin."
- "Kullanıcıların resimlerini sıkıştırmayı hatırlaması zor oluyordu."
- "Tarayıcılar arası davranışlar öngörülemez olduğundan en basit çözümler genellikle en güvenli olanlardır."