Yüksek piksel yoğunluğuna sahip ekranlar hızla yaygınlaşıyor. İçerik üreticilerin bu gerçeğe uyum sağlaması gerekiyor. Bu, günümüzde web'de polyfill, JavaScript, CSS hilelerini ve henüz tam olarak uygulanmamış tarayıcı özelliklerini kullanmadan yüksek kaliteli resimlerin nasıl yayınlanacağına dair kısa bir kılavuzdur. Kısacası, iş akışınızda radikal değişiklikler olmadan.
Günümüzde birçok duyarlı resim önerisi vardır. Bunların çoğu, web geliştirici için önemli değişiklikler içerir. Standart izleme srcset
<img> özelliğini uygulamak, özellikle de srcset ürününün görüntü alanına dayalı ek seçiminin karmaşıklığı nedeniyle zordur:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
image-set CSS mülkü, hangi resmin yükleneceğine karar vermek için yalnızca devicePixelRatio'ü kullansa da geliştiricileri her resim için çok fazla ek işaretleme yazmaya zorlar.
<picture> öğesi gibi diğer teklifler daha da ayrıntılıdır.
Dahası, standart izlemelere sahip olmadıklarından her yerde bulunan kullanılabilirlikleri srcset özelliğinden daha da fazladır. JavaScript ve sunucu tarafı çözümler, diğer tek alternatiftir ancak bu yaklaşımların diğer makalelerde açıklandığı gibi kendi dezavantajları vardır.
Bu makalede, web'de yaygın olarak bulunan resimlerin çeşitli kullanımları ele alınacak ve hem yüksek piksel yoğunluklarına sahip ekranlarda hem de sıradan ekranlarda çalışan basit çözümler önerilecektir. Bu tartışma bağlamında, window.devicePixelRatio değerinin 1'den yüksek olduğu bildirilen tüm cihazlar yüksek DPI olarak kabul edilebilir. Bunun nedeni, CSS piksellerinin cihaz pikselleriyle aynı olmadığı ve resimlerin ölçeklendirildiği anlamına gelmesidir.
Özetle şu konular anlatılmıştır:
- Mümkünse raster görüntüler yerine CSS/SVG kullanın.
- Varsayılan olarak yüksek yoğunluklu ekranlar için optimize edilmiş resimleri kullanın.
- Basit çizimler ve piksel sanatları (ör. logolar) için PNG'leri kullanın.
- Çeşitli renklere sahip resimler (ör. fotoğraflar) için sıkıştırılmış JPEG'ler kullanın.
- Tüm resim öğelerinde her zaman açık boyutlar (CSS veya HTML kullanarak) ayarlayın.
Basit çizimler ve piksel sanatı
CSS özellikleri veya SVG'yi kullanarak küçük resimler genellikle tamamen önlenebilir.
Örneğin, border-radius CSS özelliği yaygın bir şekilde desteklendiğinden, yuvarlatılmış köşeler için resim kullanılmasına gerek yoktur. Benzer şekilde, özel yazı tipleri de yaygın olarak desteklendiğinden "resimli" metin kullanılması tavsiye edilmez.
Ancak logolar gibi bazı durumlarda resim kullanmak tek seçenek olabilir. Örneğin, bu Chrome logosunun doğal boyutu 256x256'dır. Retina ekranlarda, köşegenlerde ve eğrilerde çizgi kenar tıraşlama görebilirsiniz. Bu, özellikle net bir şekilde oluşturulmuş metinle karşılaştırıldığında hantal ve kötü görünür:
Doğal boyutlar: 256x256px, öğe boyutu: 31 kB, biçim: PNG
Yeterince ikna oldunuz mu? Güzel. Şimdi yüksek yoğunluklu bir resim kullanalım. Logonuzu JPEG olarak depolayarak yer kazanmak isteyebilirsiniz ancak logoları ve diğer grafikleri kayıplı bir biçimde kaydetmek, bozulmalara neden olabileceğinden bu iyi bir fikir olmayabilir. Bu örnekte, çok yüksek bir sıkıştırma oranı kullanarak sorunu abarttım. Ancak degradelerdeki bantlara, beyaz arka planlardaki beneklere ve dağınık çizgilere dikkat edin:
Doğal boyutlar: 512x512px, öğe boyutu: 13 kB, biçim: JPEG
Nispeten küçük resimler için yapılacak şey 2x PNG kullanmaktır. 1x ve 2x PNG arasındaki boyut farkının genellikle oldukça yüksek olduğunu unutmayın (bu örnekte 52 kB). Ancak logo, web sitenizin yüzü ve ziyaretçilerinizin göreceği ilk şeydir. Boyut için kaliteden çok fazla ödün verirseniz ziyaretçileriniz de bunu en son görecektir.
2x ekranlar için doğal boyutlarının yarısına kadar küçültülmüş tüm ihtişamlı Chrome logosunu burada görebilirsiniz:
Doğal boyutlar: 512x512px, öğe boyutu: 83 kB, biçim: PNG
Yukarıdaki şekilde oluşturulan işaretleme şu şekildedir:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
Resimde bir genişlik ve yükseklik belirttiğimi unutmayın. Resmin doğal boyutu 512 piksel olduğu için bu işlem gereklidir. Oluşturma motoru öğenin boyutunu iyi anladığı ve hesaplamak için çok fazla çalışması gerekmediği için performans açısından da iyidir.
24 bit PNG'yi paletli 8 bit PNG'ye indirgemek işe yarayabilir. Bu yöntem, Chrome logosu dahil olmak üzere az sayıda renge sahip resimlerde işe yarar. Bu optimizasyonu yapmak için http://pngquant.org/ gibi bir araç kullanabilirsiniz. Burada biraz bant görebilirsiniz ancak bu dosya yalnızca 13 KB'tır. Bu, orijinal 512x512 PNG'ye kıyasla 6 kat daha küçük bir boyuttur.
Doğal boyutlar: 512x512px, öğe boyutu: 13 kB, biçim: PNG,
8-bit palette
Çeşitli renklerin bulunduğu resimler
Çeşitli duyarlı resim tekniklerini inceleyen bir HTML5Rocks makalesi yazdım ve 1x ve 2x JPEG sıkıştırma, elde edilen boyutları ve görsel kalitesini karşılaştırma hakkında bazı araştırmalar yaptım. İşte yukarıdaki makalede ele alınan bu tür bir blok:
Resimleri sıkıştırma düzeyleri (JPEG kalitesiyle gösterilir), boyutları (bayt cinsinden) ve görsel kaliteleriyle ilgili öznel düşüncelerimle (sayılara göre sıralanmıştır) etiketledim. Buradaki ilginç nokta, yüksek oranda sıkıştırılmış 2x resmin (3 numaralı resim) sıkıştırılmamış 1x resimden (4 numaralı resim) daha küçük ve daha iyi görünmesidir. Diğer bir deyişle, 4. resim ile 3. resim arasında her boyutu ikiye katlayarak ve sıkıştırmayı önemli ölçüde artırarak resmin kalitesini artırmayı başardık. Aynı zamanda boyutu 2 KB azalttık.
Sıkıştırma, boyutlar ve görsel kalite
Sıkıştırma seviyesi, resim boyutları, görsel kalite ve resim boyutu arasındaki denge hakkında biraz daha bilgi edinmek istedim. Yukarıdaki çalışmaya dayanarak aşağıdaki hipotezle bir çalışma yürüttüm:
Hipotez
Yeterli sıkıştırma uygulandığında 2x boyuttaki bir resim, başka bir (daha düşük) sıkıştırma düzeyinde 1x boyuttaki aynı resme eşdeğer görünür. Ancak bu durumda, yüksek oranda sıkıştırılmış 2x resmin boyutu, 1x resimden daha küçük olacaktır.
İşleme
- 2x resmi verildiğinde 1x olanı oluşturun.
- Her iki resmi de farklı düzeylerde sıkıştırın.
- İki resim grubunu yan yana gösteren bir test sayfası oluşturun.
- İki kümede resimlerin eşdeğer olduğu yeri bulun.
- Eşdeğer resim boyutlarını ve sıkıştırma seviyelerini not edin.
- Hem 1x hem de 2x ekranda deneyin.
Lightroom'un karşılaştırma görünümüne benzer, yan yana bir resim karşılaştırma uygulaması oluşturdum. Amaç 1x ve 2x resmi yan yana göstermektir. Ancak daha fazla ayrıntı elde etmek için resmin herhangi bir bölümünü yakınlaştırmanıza da olanak tanır. Ayrıca, JPEG ve WebP biçimleri arasında seçim yapabilir ve dosya boyutu ile resim kalitesi karşılaştırmalarını görmek için sıkıştırma kalitesini değiştirebilirsiniz. Buradaki amaç birkaç resim üzerinde ayarları değiştirmek, sıkıştırma kalitesi, ölçeklendirme ve biçimi ile resim kalitesi arasındaki dengenin sizin için uygun olduğunu bulmak ve bu ayarı tüm resimlerinizde kullanmaktır.
Aracın kendisi üzerinde değişiklik yapmanız için mevcuttur. Yakınlaştırmak için bir alt alan seçerek resmi yakınlaştırabilirsiniz.
Analiz
Resim kalitesinin öznel bir konu olduğunu söyleyeyim. Ayrıca, belirli kullanım alanınız, görsel doğruluk ve dosya boyutu spektrumunda önceliklerinizin nereye odaklanacağını büyük olasılıkla belirler. Ayrıca, farklı resim özellikleri ölçeklendirme ve sıkıştırma kalitesine farklı tepki verir. Bu nedenle, her duruma uygun tek bir çözüm her zaman işe yaramayabilir. Bu aracın amacı, resim kalitesi sıkıştırmaları, ölçekler ve biçimler hakkında fikir edinmenize yardımcı olmaktır.
Resim yakınlaştırıcısı ile oynadığımda hemen birkaç şey fark ettim. İlk olarak, ayrıntı artışı için quality=90
dpr=1x resim yerine quality=30 dpr=2x resmi tercih ediyorum. Bu resimler, dosya boyutları açısından da benzerdir (düz çekimde, sıkıştırılmış 2x resim 76 KB, sıkıştırılmamış 1x ise 80 kB'tır).
Bu kuralın istisnaları, gradyanlara sahip yüksek oranda sıkıştırılmış (quality<30) resimlerdir. Bu tür resimlerde renk bantları görülür. Bu durum, resim ölçeğinden bağımsız olarak aynı derecede kötüdür. Araçta bulunan kuş ve araba örnekleri de
bunun örneğidir.
WebP resimleri, özellikle düşük sıkıştırma seviyelerinde JPEG'den çok daha net görünür. Bu renk şeridi sorunu, sanırım daha az sorun teşkil ediyor. Son olarak, WebP resimleri çok daha kompakttır.
Uyarılar ve son not
Resimlerin yüksek yoğunluklu ekranlarda iyi görünmesini sağlamak, ekranlardaki büyük çeşitlilikten kaynaklanan resimle ilgili sorunların yalnızca yarısıdır. Bazı durumlarda, görüntü alanı boyutuna bağlı olarak tamamen farklı resimler yayınlamak isteyebilirsiniz. Örneğin, Obama'nın portresi telefon boyutunda bir ekran için uygun olabilir ancak önündeki stand ve arkasındaki bayrak gibi öğeler dizüstü bilgisayar ekranı için daha uygun olabilir.
Yalnızca yüksek DPI görüntülerine odaklanmak için bu "sanat yönetimi" konusundan kasıtlı olarak kaçındım. Bu sorun birkaç farklı yaklaşımla çözülebilir: medya sorgularının ve arka plan resimlerinin kullanılması, JavaScript aracılığıyla, image-set gibi bazı yeni özellikler aracılığıyla veya sunucu üzerinde. Bu konu, Değişken Piksel Yoğunlukları İçin Yüksek DPI Resimler bölümünde ele alınmaktadır.
Birkaç açık sorunu belirterek onay vereceğim:
- Yüksek düzeyde sıkıştırmanın performans üzerindeki etkileridir. Yüksek oranda sıkıştırılmış resimlerin kodunu çözmenin cezaları nelerdir?
- 1x ekrana 2x resim yüklendiğinde resmin boyutunu küçültmek zorunda kalmanın performans üzerindeki olumsuz etkileri nelerdir?
Özetlemek gerekirse kafes resimler yerine CSS ve SVG'yi seçin. Kafes resimler kesinlikle gerekiyorsa sınırlı paletleri ve birçok düz rengi olan resimler için PNG'leri, çok sayıda renk ve gradyan içeren resimler için JPEG'leri kullanın. Bu yaklaşımın en güzel yanı da biçimlendirmenizin neredeyse hiç değişmemesidir. Web geliştiricisi için gereken tek şey, 2x öğe oluşturmak ve resimlerinizi DOM'de doğru şekilde boyutlandırmaktır.
Daha fazla bilgi edinmek için Scott Jehl'in benzer bir konudaki makalesine göz atın. Resimleriniz keskin görünsün ve hücresel veri kullanımınız düşük olsun!