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 hile ve henüz tam olarak uygulanmamış tarayıcı özellikleri olmadan yüksek kaliteli resimlerin nasıl yayınlanacağına dair kısa bir kılavuzdur. Kısacası, iş akışınızda büyük değişiklikler yapmadan.
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 izlemeli srcset
<img> özelliğinin uygulanması, özellikle srcset'ün ek görüntü alanı tabanlı 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ı.
Ayrıca, standartlar kapsamında olmadığından her yerde kullanılabilirlikleri srcset özelliğinden bile daha uzaktadı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ğunluğuna sahip 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ş resimler 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 kullanılarak küçük resimler genellikle tamamen önlenebilir.
Örneğin, border-radius CSS özelliği yaygın olarak desteklendiğinden yuvarlatılmış köşeler için resim kullanmaya gerek yoktur. Benzer şekilde, özel yazı tipleri yaygın olarak desteklenir. Bu nedenle, "resimlendirilmiş" metin kullanılması önerilmez.
Ancak logolar gibi bazı durumlarda resim kullanmak tek seçenek olabilir. Örneğin, bu Chrome logosunun doğal boyutu 256x256'tı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 2x PNG'ler kullanmanız gerekir. 1x ve 2x PNG arasındaki boyut farkının genellikle oldukça yüksek olduğunu (bu durumda 52 KB) unutmayın. 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 boyutunun yarısına indirilmiş, tüm ihtişamıyla Chrome logosu:
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. Yukarıdaki makaleden bir karo örneği:
Resimleri sıkıştırma seviyelerine (JPEG kalitesiyle gösterilir), boyutlarına (bayt cinsinden) ve göreceli görsel doğruluklarıyla ilgili öznel görüşüme göre (sayısal olarak sıralanmıştır) etiketledim. Buradaki ilginç nokta, yüksek oranda sıkıştırılmış 2x resmin (3 numaralı) sıkıştırılmamış 1x resimden (4 numaralı) 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 resim, 1x resimden daha küçük olacaktır.
İşleme
- 2x boyutunda bir resim verildiğinde 1x boyutunda resim oluşturun.
- Her iki resmi de farklı düzeylerde sıkıştırın.
- Her iki resim grubunu da yan yana gösteren bir test sayfası oluşturun.
- İki gruptaki 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 bir yan yana resim karşılaştırma uygulaması oluşturdum. Amaç, 1x ve 2x görüntüleri yan yana göstermenin yanı sıra, daha fazla ayrıntı görmek için resmin herhangi bir bölümünü yakınlaştırmanıza olanak tanımaktır. Ayrıca, dosya boyutu ve resim kalitesi karşılaştırmalarını görmek için JPEG ve WebP biçimleri arasında seçim yapabilir ve sıkıştırma kalitesini değiştirebilirsiniz. Buradaki amaç, birkaç resimde ayarları değiştirmek, hangi sıkıştırma kalitesi, ölçeklendirme ve biçimin görüntü kalitesiyle ilgili ödün vermeyi kabul edebileceğinizi belirlemek ve bu ayarı tüm resimleriniz için kullanmaktır.
Aracı istediğiniz gibi kullanabilirsiniz. Yakınlaştırmak istediğiniz alt alanı seçerek resmi yakınlaştırabilirsiniz.
Analiz
Öncelikle, resim kalitesinin öznel bir konu olduğunu belirtmek isterim. Ayrıca, belirli kullanım alanınız görsel doğruluk ve dosya boyutu spektrumunda önceliklerinizin nereye odaklanacağını belirler. Ayrıca, farklı resim özellikleri ölçeklendirme ve sıkıştırma kalitesine farklı tepki verir. Bu nedenle, her durum için 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ıyı kullanarak birkaç şeyin farkına hemen vardım. Öncelikle, ayrıntıların artması için quality=30 dpr=2x resimlerini quality=90
dpr=1x resimlerine tercih ediyorum. Bu resimler dosya boyutu açısından da benzerdir (uçak örneğinde, sıkıştırılmış 2x resim 76 KB, sıkıştırılmamış 1x resim ise 80 KB'tır).
Bu kuralın istisnaları, degrade içeren 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çtaki kuş ve araba örnekleri buna örnek gösterilebilir.
WebP resimleri, özellikle düşük sıkıştırma seviyelerinde JPEG'den çok daha net görünür. Bu renk bantları çok daha az sorun oluşturuyor. 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 resimlere odaklanmak için bu "sanat yönetmenliği" konusunu kasten atladım. Bu sorun, medya sorguları ve arka plan resimleri kullanılarak, JavaScript aracılığıyla, image-set gibi bazı yeni özelliklerle veya sunucuda olmak üzere çeşitli farklı yaklaşımlarla çözülebilir. Bu konu Değişken Piksel Yoğunlukları İçin Yüksek DPI Resimler başlıklı makalede ele alınmıştır.
Birkaç açık sorunla sohbeti sonlandırıyorum:
- Yüksek sıkıştırmanın performans üzerindeki etkileri. Yüksek 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, raster resimler yerine CSS ve SVG kullanın. 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 iyi yanı, işaretlemenizde neredeyse hiçbir değişiklik olmamasıdır. Web geliştiriciden tek istenen, 2x öğe oluşturması ve resimlerinizi DOM'da uygun şekilde boyutlandırmasıdır.
Daha fazla bilgi için Scott Jehl'in benzer bir konuyla ilgili makalesine göz atın. Resimlerinizin net ve hücresel veri kullanımınızın düşük olmasını dileriz.