Web için tasarım ve uygulama geliştirme konusunda ne kadar yol almış olursanız olun, <img> öğesine çok az giriş yapmanız gerekir.
1993'te Netscape'te ("o zamanki "Mozaik") kullanıma sunulan ve 1995'te HTML spesifikasyonuna eklenen <img>, web platformunda uzun zamandır basit ama güçlü bir rol oynadı. Geliştirici, resmin oluşturulamaması veya yardımcı teknolojilerin alternatif bir yöntem istemesi durumunda src özelliğine sahip bir "kaynak" resim dosyası ekler ve alt özelliğiyle birlikte bir metin alternatifi sağlar. Tarayıcının o andan itibaren yalnızca bir işi olur: Resim verilerini alıp mümkün olduğunca hızlı bir şekilde oluştururlar.
Web geliştirme geçmişinin büyük bir kısmında görüntülerle çalışmak bundan daha karmaşık bir hale gelmemiştir. Modern web'in karmaşıklığına rağmen resimlerle çalışmanın temel ilkeleri değişmemiştir: Uyumluluk için web dostu bir resim biçimi, bant genişliğini korumak için makul bir sıkıştırma ve resmin sayfa düzeninde kaplayacağı alana uygun boyutlar kullanın.
Kullanıcıların web deneyimine dair daha fazla bilgi sahibi olduğumuzu düşündüğümüz zamanlarda olduğu gibi, sabit genişlikli düzenler kullanmak bu süreci karmaşık hale getirdi. Özellikle resim kaynağının boyutunu ayarlamak çok kolaydı. Beş yüz piksel genişliğinde ve üç yüz piksel yüksekliğinde bir alanı kaplayan bir resim için aynı boyutta bir kaynak resmin belirtilmesi gerekiyordu.
Duyarlı düzendeki resimler
Esnek bir düzen ve CSS medya sorguları kullanımının yanı sıra "esnek resimler ve medya", duyarlı web tasarımının üç tanımlayıcı özelliğinden biridir. Geliştiriciler bir resmi esnek hale getirmek için CSS'yi kullanarak resmin (veya site genelindeki tüm resimlerin) max-width: 100% özelliğini ayarlayarak tarayıcının oluşturma motoruna bir resmin ölçeğini küçülterek üst kapsayıcısıyla taşmasını önlemesini bildiriyor. Bu yöntem görsel olarak kusursuz bir şekilde çalışır. Bir kafes görüntüsünü küçültmek görsel olarak sorunsuz bir şekilde gerçekleşir. Bir veya iki CSS satırı kullanıldığında, küçültülmüş resim her zaman o boyutta görüntülenmesi amaçlanan bir resim kaynağı belirtilmiş gibi görünür.
Oluşturma motorlarına, bir düzende resmin kapladığı alan için gerekenden daha fazla resim verisi verildiğinde, küçültülmüş resmi nasıl oluşturacağınız konusunda bilinçli kararlar alabilirler ve bunu herhangi bir görsel kusur veya bulanıklaştırma olmadan yapabilirler.
Normalde bir resmi yukarı ölçeklemeyi, yani <img> öğesini kaynak resmin gerçek boyutundan daha büyük bir boyutta oluşturmak istemezsiniz.
Görüntülenen resim bulanık ve grenli görünür.
img { max-width: 100% } kullanıldığında, esnek bir kapsayıcı yeniden boyutlandırıldığında görüntülerin ölçeği uygun şekilde küçültülür.
Daha sabit bir width: 100% ayarlamanın aksine bu, aynı zamanda resmin kendi içsel boyutundan daha fazla ölçeklenmemesini sağlar.
Uzun bir süre boyunca resimlerle çalışma kurallarında bu durum vardı: Tarayıcıların anlayacağı bir biçim kullanın, makul bir sıkıştırma düzeyi kullanın ve resimleri asla yukarı ölçeklemeyin.
Ancak bu yaklaşım görsel olarak ne kadar basit ve etkili olsa da büyük bir performans maliyetine sahipti. <img>, resim verileri için yalnızca tek bir kaynağı desteklediğinden bu yaklaşım, gösterilebilecek en büyük boyut kadar içsel boyuta sahip bir resim öğesi sağlamamızı gerektiriyordu. Kullanıcının görüntü alanı boyutuna bağlı olarak 300px ila 2000px genişliğinde olabilecek bir düzende alan kaplaması amaçlanan bir resim, en az 2000px boyutunda doğal genişliği olan bir resim kaynağı gerektiriyordu. Sayfayı yalnızca küçük bir görüntü alanı üzerinden görüntüleyen bir kullanıcı için, her şey beklendiği gibi görünür; resim düzgün bir şekilde ölçeklenir. Oluşturulan sayfada, çok büyük ancak küçültülmüş bir kaynak resim uygun boyutlu bir resimden farklı görünmez. Ancak yine de 2000px genişliğinde görüntü aktarıp oluştururlardı. Bu durumda da, somut bir fayda sağlamadan muazzam miktarda bant genişliği ve işlem gücü harcarlar.
İlk "Retina" cihazların ortaya çıkmasıyla birlikte işler çok daha kötü bir hale geldi ve görüntü yoğunluğu görüntü alanı boyutunun yanı sıra bir sorun haline geldi. Bir resim kaynağı, yüksek yoğunluklu bir görüntülemeye uygun olması için çok daha büyük bir doğal genişliğe ihtiyaç duyar. Basit bir şekilde anlatmak gerekirse, iki kat yoğunluğa sahip bir ekranda resmin mümkün olduğunca keskin bir şekilde oluşturulması için iki kat daha fazla resim pikseli gerekir.
Bu noktada, geliştiriciler yine oluşturma motorlarının resimleri görsel olarak küçültmesine güvenebildiler. Tarayıcıya src içinde 800px geniş kaynak resim sağlayıp bunun CSS ile 400px genişliğinde görüntülenmesi gerektiğini belirterek sonuç iki piksel yoğunluğunda oluşturulur:
Yerleşiminizdeki ve yüksek yoğunluklu ekranlarınızdaki mümkün olan en büyük alana uyacak şekilde kesilmiş tek bir kaynak resim, elbette tüm kullanıcılar için görsel olarak işe yarar. Küçük, düşük yoğunluklu bir ekranda oluşturulan büyük, yüksek çözünürlüklü bir resim kaynağı diğer küçük ve düşük yoğunluklu resimler gibi görünür ancak çok daha yavaş görünür. 4.000 piksel genişliğindeki bu devasa görüntü kaynağının tüm performans maliyetleri hiçbir fayda sağlamayacak şekilde kullanıcıya ait olacaktır.
<img> uzun bir süre boyunca tek bir şey yaptı: "Resim verilerini alıp ekrana yerleştirdi." Bunu elbette makul düzeyde iyi yaptı, ancak <img>, gezinme bağlamında yaşadığımız radikal değişimlere uyum sağlama görevini üstlenemedi. Duyarlı web tasarımı ana akım geliştirme uygulaması haline gelmiş olsa da tarayıcılar, img performansını yaklaşık yirmi yıl boyunca optimize etti. Ancak en ayrıcalıklı kullanıcılar dışında tüm kullanıcılar için sayfaların resim içeriği daha en başından verimsizdi. Tarayıcı ne kadar hızlı bir resim kaynağı isteğinde bulunur, ayrıştırır ve oluşturursa o öğe muhtemelen kullanıcının ihtiyaç duyduğundan çok daha büyük olacaktır.