Uyumlu görseller

Bir resim bin kelimeye bedeldir ve resimler her sayfanın ayrılmaz bir parçasıdır. Ancak genellikle indirilen baytların çoğunu da bu kaynaklar oluşturur. Duyarlı web tasarımı sayesinde yalnızca düzenlerimiz değil, resimlerimiz de cihaz özelliklerine göre değişebilir.

Pete LePage

Duyarlı web tasarımı, düzenlerimizin cihaz özelliklerine göre değişebileceği ve içeriğin de değişebileceği anlamına gelir. Örneğin, yüksek çözünürlüklü (2x) ekranlarda yüksek çözünürlüklü grafikler netlik sağlar. %50 genişliğe sahip bir resim, tarayıcı 800 piksel genişliğindeyken gayet iyi çalışabilir ancak dar bir telefonda çok fazla yer kaplar ve daha küçük bir ekrana sığacak şekilde ölçeklendirildiğinde aynı bant genişliği ek yükünü gerektirir.

Sanat yönetimi

Bazen de resmin daha büyük ölçüde değiştirilmesi gerekebilir: oranları değiştirme, kırpma ve hatta resmin tamamını değiştirme. Bu durumda, görüntüyü değiştirmek genellikle sanat yönetimi olarak adlandırılır. Daha fazla örnek için responsiveimages.org/demos/ adresini ziyaret edin.

Uyumlu görseller

Bir web sayfasını yüklemek için gereken baytların ortalama% 60'ından fazlasını resimlerin oluşturduğunu biliyor muydunuz?

Bu kursta, modern web'de resimlerle nasıl çalışacağınızı öğreneceksiniz. Böylece resimleriniz her cihazda harika görünür ve hızlı yüklenir.

Bu süreçte, duyarlı resimleri geliştirme iş akışınıza sorunsuz bir şekilde entegre etmek için çeşitli beceriler ve teknikler öğreneceksiniz. Kursun sonunda, farklı görüntü alanı boyutlarına ve kullanım senaryolarına uyum sağlayan ve yanıt veren resimlerle geliştirme yapabileceksiniz.

Bu, Udacity tarafından sunulan ücretsiz bir kurstur.

Kursa katılın

İşaretlemedeki resimler

img öğesi güçlüdür (içeriği indirir, kodunu çözer ve oluşturur) ve modern tarayıcılar çeşitli resim biçimlerini destekler. Cihazlar arasında çalışan resimler eklemek, masaüstü için eklemekten farklı değildir ve iyi bir deneyim oluşturmak için yalnızca birkaç küçük değişiklik yapılması gerekir.

Özet

• Resimlerin yanlışlıkla kapsayıcıdan taşmasını önlemek için resimlerde göreli boyutlar kullanın.
• Cihaz özelliklerine bağlı olarak farklı resimler belirtmek istediğinizde (sanat yönetimi olarak da bilinir) picture öğesini kullanın.
• Farklı yoğunluklar arasından seçim yaparken kullanılacak en iyi resim hakkında tarayıcıya ipucu vermek için img öğesinde srcset ve x tanımlayıcısını kullanın.
• Sayfanızda yalnızca bir veya iki resim varsa ve bunlar sitenizin başka bir yerinde kullanılmıyorsa dosya isteklerini azaltmak için satır içi resimler kullanabilirsiniz.

Resimler için göreli boyutlar kullanma

Resimlerin yanlışlıkla görüntü alanının dışına taşmasını önlemek için resim genişliklerini belirtirken göreli birimler kullanmayı unutmayın. Örneğin, width: 50%;, resim genişliğinin, kapsayıcı öğenin% 50'si (görüntü alanının% 50'si veya gerçek piksel boyutunun% 50'si değil) olmasına neden olur.

CSS, içeriğin kapsayıcısından taşmasına izin verdiğinden, resimlerin ve diğer içeriklerin taşmasını önlemek için max-width: %100 kullanmanız gerekebilir. Örneğin:

img, embed, object, video {
    max-width: 100%;
}

img öğelerindeki alt özelliği aracılığıyla anlamlı açıklamalar sağladığınızdan emin olun. Bu açıklamalar, ekran okuyuculara ve diğer yardımcı teknolojilere bağlam bilgisi vererek sitenizi daha erişilebilir hale getirir.

Yüksek DPI'lı cihazlar için srcset ile img öğelerini iyileştirin

srcset özelliği, img öğesinin davranışını iyileştirerek farklı cihaz özellikleri için birden fazla resim dosyası sağlamayı kolaylaştırır. CSS'ye özgü image-set CSS işlevine benzer şekilde srcset, tarayıcının cihazın özelliklerine göre en iyi resmi seçmesine olanak tanır. Örneğin, 2x ekranda 2x resim ve gelecekte sınırlı bant genişliğine sahip bir ağda 2x cihazda 1x resim kullanılabilir.

<img src="photo.png" srcset="[e-mail] 2x" ...>

srcset özelliğini desteklemeyen tarayıcılarda, tarayıcı yalnızca src özelliği tarafından belirtilen varsayılan resim dosyasını kullanır. Bu nedenle, her zaman özelliklerinden bağımsız olarak her cihazda görüntülenebilecek 1x boyutunda bir resim eklemek önemlidir. srcset desteklendiğinde, herhangi bir istekte bulunulmadan önce virgülle ayrılmış resim/koşul listesi ayrıştırılır ve yalnızca en uygun resim indirilip gösterilir.

Koşullar piksel yoğunluğundan genişlik ve yüksekliğe kadar her şeyi içerebilse de şu anda yalnızca piksel yoğunluğu iyi desteklenmektedir. Mevcut davranışı gelecekteki özelliklerle dengelemek için özellikte yalnızca 2 kat daha büyük resmi sağlayın.

picture ile duyarlı resimlerde sanat yönetimi

Resimleri cihaz özelliklerine göre değiştirmek için (sanat yönetimi olarak da bilinir) picture öğesini kullanın. picture öğesi, cihaz boyutu, cihaz çözünürlüğü, yön ve daha fazlası gibi farklı özelliklere göre bir resmin birden fazla sürümünü sağlamak için açıklayıcı bir çözüm tanımlar.

Not: picture öğesi tarayıcılarda kullanılmaya başlanıyor. Henüz her tarayıcıda kullanılamasa da güçlü geriye dönük uyumluluğu ve Picturefill polyfill'in potansiyel kullanımı nedeniyle bu yöntemi kullanmanızı öneririz. Daha fazla bilgi için ResponsiveImages.org sitesine bakın.

Bir resim kaynağı birden fazla yoğunlukta mevcut olduğunda veya duyarlı tasarım, bazı ekran türlerinde biraz farklı bir resim gerektirdiğinde picture öğesini kullanın. video öğesine benzer şekilde, birden fazla source öğesi eklenebilir. Bu sayede, medya sorgularına veya resim biçimine bağlı olarak farklı resim dosyaları belirtilebilir.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Deneyin

Yukarıdaki örnekte, tarayıcı genişliği en az 800 pikselse cihaz çözünürlüğüne bağlı olarak head.jpg veya head-2x.jpg kullanılır. Tarayıcı 450 piksel ile 800 piksel arasındaysa cihaz çözünürlüğüne bağlı olarak head-small.jpg veya head-small- 2x.jpg kullanılır. 450 pikselden küçük ekran genişlikleri ve picture öğesinin desteklenmediği geriye dönük uyumluluk için tarayıcı, bunun yerine img öğesini oluşturur ve bu öğe her zaman dahil edilmelidir.

Göreceli boyutlu resimler

Resmin son boyutu bilinmediğinde resim kaynakları için yoğunluk tanımlayıcı belirtmek zor olabilir. Bu durum özellikle tarayıcının orantılı genişliğini kapsayan ve tarayıcının boyutuna bağlı olarak akıcı olan resimler için geçerlidir.

Sabit resim boyutları ve yoğunlukları sağlamak yerine, resim öğesinin boyutuyla birlikte bir genişlik tanımlayıcı ekleyerek sağlanan her resmin boyutunu belirtebilirsiniz. Böylece tarayıcı, etkili piksel yoğunluğunu otomatik olarak hesaplayabilir ve indirilecek en iyi resmi seçebilir.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Deneyin

Yukarıdaki örnek, görüntü alanının yarısı genişliğinde (sizes="50vw") bir resim oluşturur ve tarayıcının genişliğine ve cihaz piksel oranına bağlı olarak, tarayıcı penceresinin ne kadar büyük olduğuna bakılmaksızın tarayıcının doğru resmi seçmesine olanak tanır. Örneğin, aşağıdaki tabloda tarayıcının hangi resmi seçeceği gösterilmektedir:

Tarayıcı genişliği	Cihaz piksel oranı	Kullanılan resim	Etkili çözünürlük
400 piksel	1	200.jpg	1x
400 piksel	2	400.jpg	2x
320 piksel	2	400.jpg	2,5x
600 piksel	2	800.jpg	2,67 kat
640 piksel	3	1000.jpg	3,125x
1100 piksel	1	800.png	1.45x

Duyarlı resimlerdeki kesme noktalarını hesaba katma

Çoğu durumda, resim boyutu sitenin düzen kesme noktalarına göre değişebilir. Örneğin, küçük bir ekranda resmin görüntü alanının tam genişliğini kaplamasını, daha büyük ekranlarda ise yalnızca küçük bir bölümünü kaplamasını isteyebilirsiniz.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Deneyin

Yukarıdaki örnekte sizes özelliği, resmin boyutunu belirtmek için birkaç medya sorgusu kullanır. Tarayıcı genişliği 600 pikselden büyük olduğunda resim, görüntü alanı genişliğinin% 25'i olur. 500 piksel ile 600 piksel arasında olduğunda resim, görüntü alanı genişliğinin% 50'si olur. 500 pikselin altında ise tam genişlikte olur.

Ürün resimlerini genişletilebilir yapma

J. Crew'un genişletilebilir ürün resmi içeren web sitesi.

Müşteriler ne satın aldıklarını görmek ister. Perakende sitelerinde kullanıcılar, ürünlerin yüksek çözünürlüklü yakın çekimlerini görüntüleyerek ayrıntıları daha iyi inceleyebilmeyi bekler. Çalışmaya katılanlar bunu yapamadıklarında hayal kırıklığına uğradı.

Dokunulabilir, genişletilebilir resimlere iyi bir örnek, J. Crew tarafından sunulmaktadır. Ekip sitesi. Kaybolan bir yer paylaşımı, resme dokunulabileceğini gösterir ve resmin yakınlaştırılmış bir görüntüsünü sunarak ince ayrıntıları görünür hale getirir.

Diğer resim teknikleri

Sıkıştırılmış resimler

Sıkıştırılmış resim tekniği, cihazın gerçek özelliklerinden bağımsız olarak tüm cihazlara yüksek oranda sıkıştırılmış 2 kat büyük bir resim sunar. Resmin türüne ve sıkıştırma düzeyine bağlı olarak resim kalitesi değişmeyebilir ancak dosya boyutu önemli ölçüde azalır.

Deneyin

Dikkat: Sıkıştırma tekniği, daha fazla bellek ve kod çözme maliyeti gerektirdiğinden bu tekniği dikkatli kullanın. Büyük resimleri daha küçük ekranlara sığacak şekilde yeniden boyutlandırmak maliyetlidir ve hem belleğin hem de işlem gücünün sınırlı olduğu düşük kaliteli cihazlarda özellikle zor olabilir.

JavaScript resim değiştirme

JavaScript resim değiştirme, cihazın özelliklerini kontrol eder ve "doğru olanı yapar". Cihaz piksel oranını window.devicePixelRatio üzerinden belirleyebilir, ekran genişliği ve yüksekliğini alabilir, hatta navigator.connection üzerinden veya sahte bir istek göndererek ağ bağlantısı koklama işlemi yapabilirsiniz. Tüm bu bilgileri topladıktan sonra hangi görüntüyü yükleyeceğinize karar verebilirsiniz.

Bu yaklaşımın en büyük dezavantajı, JavaScript kullanmanın, resim yüklemeyi en azından ileriye dönük ayrıştırıcı tamamlanana kadar geciktirecek olmasıdır. Bu, resimlerin pageload etkinliği tetiklenene kadar indirilmeye bile başlamayacağı anlamına gelir. Ayrıca tarayıcı büyük olasılıkla hem 1x hem de 2x resimleri indirerek sayfa ağırlığının artmasına neden olur.

Satır içi resimler: Raster ve vektör

Resim oluşturmanın ve depolamanın iki temel yolu vardır. Bu, resimleri duyarlı bir şekilde nasıl dağıtacağınızı etkiler.

Raster görüntüler: Fotoğraflar ve diğer görüntüler gibi, ayrı renk noktalarından oluşan bir ızgara olarak temsil edilir. Raster resimler bir kamera veya tarayıcıdan gelebilir ya da HTML canvas öğesiyle oluşturulabilir. PNG, JPEG ve WebP gibi biçimler, raster resimleri depolamak için kullanılır.

Logolar ve çizgi resimler gibi vektörel görüntüler; eğriler, çizgiler, şekiller, dolgu renkleri ve renk geçişleri kümesi olarak tanımlanır. Vektörel görüntüler, Adobe Illustrator veya Inkscape gibi programlarla oluşturulabilir ya da SVG gibi bir vektör biçimi kullanılarak kodla elle yazılabilir.

SVG

SVG, bir web sayfasına duyarlı vektör grafikleri eklemeyi mümkün kılar. Vektör dosya biçimlerinin raster dosya biçimlerine göre avantajı, tarayıcının vektörel görüntüyü her boyutta oluşturabilmesidir. Vektör biçimleri, resmin geometrisini (çizgiler, eğriler ve renkler gibi öğelerden nasıl oluşturulduğunu) tanımlar. Raster biçimler ise yalnızca tek tek renk noktaları hakkında bilgi içerir. Bu nedenle, tarayıcı ölçeklendirme yaparken boşlukları nasıl dolduracağını tahmin etmek zorunda kalır.

Aşağıda aynı resmin iki versiyonu gösterilmektedir: Solda PNG resmi, sağda ise SVG resmi. SVG her boyutta harika görünürken yanındaki PNG, daha büyük ekran boyutlarında bulanık görünmeye başlar.

Sayfanızın yaptığı dosya isteklerinin sayısını azaltmak istiyorsanız SVG veya Veri URI'si biçimini kullanarak satır içi resimler kodlayabilirsiniz. Bu sayfanın kaynağını görüntülerseniz aşağıdaki logoların her ikisinin de satır içi olarak tanımlandığını görürsünüz: Veri URI'si ve SVG.

SVG, mobil ve masaüstü cihazlarda mükemmel destek sunar ve optimizasyon araçları SVG boyutunu önemli ölçüde azaltabilir. Aşağıdaki iki satır içi SVG logosu aynı görünse de biri yaklaşık 3 KB, diğeri ise yalnızca 2 KB'tır:

Veri URI'si

Veri URI'leri aşağıdaki biçimi kullanarak, görsel gibi bir dosyayı img öğesinin src özelliğini Base64 olarak kodlanmış dize şeklinde ayarlayarak satır içine almanın yolunu sağlar:

<img src="data:image/svg+xml;base64,[data]">

Yukarıdaki HTML5 logosu için kodun başlangıcı şu şekilde görünür:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(Tam sürüm 5.000 karakterden uzundur.)

Resim gibi ikili program dosyalarını veri URI'lerine dönüştürmek için jpillora.com/base64-encoder gibi sürükle ve bırak araçları kullanılabilir. SVG'ler gibi veri URI'leri de mobil ve masaüstü tarayıcılarda iyi desteklenir.

CSS'de satır içi ekleme

Veri URI'leri ve SVG'ler de CSS'de satır içine alınabilir. Bu, hem mobil hem de masaüstü cihazlarda desteklenir. Aşağıda, CSS'de arka plan resmi olarak uygulanan ve aynı görünen iki resim (biri veri URI'si, diğeri SVG) verilmiştir:

Satır içi yerleştirmenin avantajları ve dezavantajları

Görseller için satır içi kod (özellikle veri URI'leri) ayrıntılı olabilir. Peki neden kullanmak isteyesiniz? HTTP isteklerini azaltmak için. SVG'ler ve veri URI'leri, resimler, CSS ve JavaScript dahil olmak üzere tüm bir web sayfasının tek bir istekle alınmasını sağlayabilir.

Olumsuz yönleri:

• Mobil cihazlarda, veri URI'lerinin mobil cihazda gösterilmesi harici bir src kaynağından alınan resimlere göre önemli ölçüde daha yavaş olabilir.
• Veri URI'leri, HTML isteğinin boyutunu önemli ölçüde artırabilir.
• İşaretlemenizi ve iş akışınızı daha karmaşık hale getirirler.
• Veri URI'si biçimi, ikili biçimden önemli ölçüde daha büyüktür (%30'a kadar) ve bu nedenle toplam indirme boyutunu azaltmaz.
• Veri URI'leri önbelleğe alınamaz. Bu nedenle, kullanıldıkları her sayfa için indirilmeleri gerekir.
• IE 6 ve 7'de desteklenmez, IE8'de ise kısmen desteklenir.
• HTTP/2 ile öğe isteklerinin sayısını azaltmak daha az öncelikli hale gelecektir.

Duyarlı olan her şeyde olduğu gibi, en iyi sonucu veren yöntemi bulmak için test yapmanız gerekir. İndirilen dosya boyutunu, istek sayısını ve toplam gecikmeyi ölçmek için geliştirici araçlarını kullanın. Veri URI'leri bazen raster resimler için yararlı olabilir. Örneğin, başka bir yerde kullanılmayan yalnızca bir veya iki fotoğrafın bulunduğu bir ana sayfada. Vektörel görüntüleri satır içine eklemeniz gerekiyorsa SVG çok daha iyi bir seçenektir.

CSS'deki resimler

CSS background özelliği, öğelere karmaşık resimler eklemek için güçlü bir araçtır. Bu özellik sayesinde birden fazla resim ekleyebilir, resimlerin tekrarlanmasını sağlayabilir ve daha fazlasını yapabilirsiniz. Medya sorgularıyla birleştirildiğinde background özelliği daha da güçlü hale gelir ve ekran çözünürlüğü, görüntü alanı boyutu ve daha fazlasına göre koşullu resim yüklemeyi mümkün kılar.

Özet

• Ekranın özelliklerine en uygun resmi kullanın. Ekran boyutunu, cihaz çözünürlüğünü ve sayfa düzenini göz önünde bulundurun.
• min-resolution ve -webkit-min-device-pixel-ratio ile medya sorgularını kullanarak yüksek DPI ekranlar için CSS'deki background-image özelliğini değiştirin.
• İşaretlemede 1x resme ek olarak yüksek çözünürlüklü resimler sağlamak için srcset kullanın.
• JavaScript resim değiştirme tekniklerini kullanırken veya düşük çözünürlüklü cihazlara yüksek oranda sıkıştırılmış yüksek çözünürlüklü resimler sunarken performans maliyetlerini göz önünde bulundurun.

Koşullu resim yükleme veya sanat yönetimi için medya sorgularını kullanma

Medya sorguları yalnızca sayfa düzenini etkilemez. Bunları, görüntü alanı genişliğine bağlı olarak resimleri koşullu olarak yüklemek veya sanat yönetimi sağlamak için de kullanabilirsiniz.

Örneğin, aşağıdaki örnekte, daha küçük ekranlarda yalnızca small.png indirilir ve div içeriğine uygulanır. Daha büyük ekranlarda ise background-image: url(body.png) gövdeye, background-image: url(large.png) ise div içeriğine uygulanır.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Deneyin

Yüksek çözünürlüklü resimler sağlamak için image-set kullanın

CSS'deki image-set() işlevi, background özelliğinin davranışını iyileştirerek farklı cihaz özelliklerine yönelik birden fazla resim dosyası sağlamayı kolaylaştırır. Bu sayede tarayıcı, cihazın özelliklerine göre en iyi resmi seçebilir. Örneğin, 2x ekranda 2x resim veya sınırlı bant genişliğine sahip bir ağdayken 2x cihazda 1x resim kullanabilir.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Tarayıcı, doğru resmi yüklemenin yanı sıra resmi uygun şekilde ölçeklendirir. Başka bir deyişle, tarayıcı 2x resimlerin 1x resimlerden iki kat daha büyük olduğunu varsayar ve 2x resmi 2 kat küçültür. Böylece resim, sayfada aynı boyutta görünür.

image-set() desteği henüz yeni bir özelliktir ve yalnızca Chrome ile Safari'de -webkit tedarikçi ön ekiyle desteklenir. image-set() desteklenmediğinde kullanılacak bir yedek resim eklemeye dikkat edin. Örneğin:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Deneyin

Yukarıdaki kod, image-set özelliğini destekleyen tarayıcılarda uygun öğeyi yükler. Aksi takdirde 1x öğesine geri döner. Burada dikkat edilmesi gereken nokta, image-set() tarayıcı desteği düşük olsa da çoğu tarayıcının 1x öğesini almasıdır.

Yüksek çözünürlüklü resimler veya sanat yönetimi sağlamak için medya sorgularını kullanma

Medya sorguları, cihaz piksel oranına göre kurallar oluşturarak 2x ve 1x ekranlar için farklı resimler belirtmeyi mümkün kılar.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox ve Opera standart (min-resolution: 2dppx) özelliğini desteklerken Safari ve Android tarayıcılar, dppx birimi olmadan eski tedarikçi firma ön ekli söz dizimini gerektirir. Bu stillerin yalnızca cihaz medya sorgusuyla eşleşirse yüklendiğini ve temel durum için stiller belirtmeniz gerektiğini unutmayın. Bu, tarayıcı çözünürlüğe özel medya sorgularını desteklemiyorsa bir öğenin oluşturulmasını sağlama avantajı da sunar.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Deneyin

Görüntü alanı boyutuna bağlı olarak alternatif resimler göstermek için min-width söz dizimini de kullanabilirsiniz. Bu tekniğin avantajı, medya sorgusu eşleşmezse resmin indirilmemesidir. Örneğin, bg.png yalnızca tarayıcı genişliği 500 piksel veya daha fazla olduğunda indirilip body öğesine uygulanır:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Simgeler için SVG kullanma

Sayfanıza simge eklerken mümkün olduğunda SVG simgeleri veya bazı durumlarda Unicode karakterleri kullanın.

Özet

• Simgeler için raster resimler yerine SVG veya Unicode kullanın.

Basit simgeleri Unicode ile değiştirme

Birçok yazı tipi, resim yerine kullanılabilecek sayısız Unicode glifini destekler. Resimlerin aksine, Unicode yazı tipleri iyi ölçeklenir ve ekranda ne kadar küçük veya büyük görünürlerse görünsünler iyi görünürler.

Unicode, normal karakter kümesinin yanı sıra oklar (←), matematik operatörleri (√), geometrik şekiller (★), kontrol resimleri (▶), müzik notaları (♬), Yunan harfleri (Ω) ve hatta satranç taşları (♞) için semboller içerebilir.

Unicode karakteri ekleme işlemi, adlandırılmış varlıklarla aynı şekilde yapılır: &#XXXX, burada XXXX unicode karakter numarasını temsil eder. Örneğin:

You're a super ★

Siz bir süper ★'sınız

Karmaşık simgeleri SVG ile değiştirme

Daha karmaşık simge gereksinimleri için SVG simgeleri genellikle hafiftir, kullanımı kolaydır ve CSS ile stillendirilebilir. SVG'nin raster resimlere kıyasla birçok avantajı vardır:

• Bunlar, sonsuz şekilde ölçeklendirilebilen vektör grafikleridir.
• Renk, gölgeleme, şeffaflık ve animasyonlar gibi CSS efektleri basittir.
• SVG resimleri doğrudan dokümana satır içi olarak eklenebilir.
• Anlamsaldır.
• Uygun özelliklerle daha iyi erişilebilirlik sağlar.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Deneyin

Simge yazı tiplerini dikkatli kullanın

Yazı tipi simgeleri için FontAwesome kullanan bir sayfa örneği.

Simge yazı tipleri popülerdir ve kullanımı kolay olabilir ancak SVG simgelerine kıyasla bazı dezavantajları vardır:

• Sonsuz şekilde ölçeklendirilebilen vektör grafikleridir ancak kenar yumuşatma uygulanabilir ve bu da simgelerin beklendiği kadar keskin olmamasına neden olabilir.
• CSS ile sınırlı stil oluşturma.
• Satır yüksekliği, harf aralığı vb. faktörlere bağlı olarak piksel düzeyinde mükemmel konumlandırma yapmak zor olabilir.
• Anlamsal değildirler ve ekran okuyucularla veya diğer yardımcı teknolojilerle kullanımları zor olabilir.
• Doğru şekilde kapsamlandırılmadıkları takdirde, mevcut simgelerin yalnızca küçük bir alt kümesini kullanmak için büyük bir dosya boyutuna neden olabilirler.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Deneyin

Font Awesome, Pictos ve Glyphicons dahil olmak üzere yüzlerce ücretsiz ve ücretli simge yazı tipi vardır.

Ek HTTP isteğinin ve dosya boyutunun ağırlığını simge ihtiyacıyla dengelediğinizden emin olun. Örneğin, yalnızca birkaç simgeye ihtiyacınız varsa resim veya resim sprite'ı kullanmak daha iyi olabilir.

Resimleri performans için optimize etme

Görseller genellikle indirilen baytların çoğunu oluşturur ve sayfadaki görsel alanın önemli bir kısmını kaplar. Sonuç olarak, resimleri optimize etmek genellikle web siteniz için en büyük bayt tasarruflarından ve performans iyileştirmelerinden bazılarını sağlayabilir: Tarayıcının indirmesi gereken bayt sayısı ne kadar az olursa istemcinin bant genişliği için o kadar az rekabet olur ve tarayıcı tüm öğeleri o kadar hızlı indirip görüntüleyebilir.

Özet

• Rastgele bir resim biçimi seçmeyin. Mevcut farklı biçimleri anlayın ve en uygun biçimi kullanın.
• Dosya boyutlarını küçültmek için iş akışınıza resim optimizasyonu ve sıkıştırma araçları ekleyin.
• Sık kullanılan resimleri resim sprite'larına yerleştirerek HTTP isteklerinin sayısını azaltın.
• İlk sayfa yüklenme süresini iyileştirmek ve ilk sayfa ağırlığını azaltmak için resimleri yalnızca ekranda göründükten sonra yüklemeyi deneyin.

Doğru biçimi seçme

Dikkate alınması gereken iki tür resim vardır: vektörel görüntüler ve raster görüntüler. Raster resimler için doğru sıkıştırma biçimini de seçmeniz gerekir. Örneğin: GIF, PNG, JPG.

Fotoğraflar ve diğer resimler gibi raster resimler, tek tek noktalar veya piksellerden oluşan bir ızgara olarak temsil edilir. Raster resimler genellikle bir kamera veya tarayıcıdan gelir ya da tarayıcıda canvas öğesiyle oluşturulabilir. Resim boyutu büyüdükçe dosya boyutu da artar. Orijinal boyutlarından daha büyük ölçeklendirildiklerinde tarama resimleri bulanıklaşır. Bunun nedeni, tarayıcının eksik pikselleri nasıl dolduracağını tahmin etmesi gerekmesidir.

Logolar ve çizgi resimler gibi vektörel görüntüler; bir dizi eğri, çizgi, şekil ve dolgu rengiyle tanımlanır. Vektörel görüntüler, Adobe Illustrator veya Inkscape gibi programlarla oluşturulur ve SVG gibi bir vektör biçiminde kaydedilir. Vektörel görüntüler basit temel öğeler üzerine inşa edildiğinden, kalite kaybı veya dosya boyutunda değişiklik olmadan ölçeklendirilebilir.

Uygun biçimi seçerken hem resmin kaynağını (raster veya vektör) hem de içeriği (renkler, animasyon, metin vb.) dikkate almak önemlidir. Tüm resim türlerine uyan tek bir biçim yoktur ve her biçimin kendine özgü güçlü ve zayıf yönleri vardır.

Uygun biçimi seçerken aşağıdaki yönergelerden yararlanabilirsiniz:

• Fotoğrafik görüntüler için JPG kullanın.
• Logo ve çizgi sanatı gibi vektör sanatı ve düz renkli grafikler için SVG kullanın. Vektör sanatı kullanılamıyorsa WebP veya PNG kullanmayı deneyin.
• Daha fazla renk ve daha iyi sıkıştırma oranları sunduğu için GIF yerine PNG kullanın.
• Daha uzun animasyonlar için daha iyi görüntü kalitesi sunan ve kullanıcıya oynatma üzerinde kontrol sağlayan <video> kullanabilirsiniz.

Dosya boyutunu küçültme

Resimleri kaydettikten sonra "sonradan işleyerek" resim dosyası boyutunu önemli ölçüde azaltabilirsiniz. Kayıplı ve kayıpsız, online, GUI, komut satırı gibi çeşitli resim sıkıştırma araçları vardır. Mümkün olduğunda, resim optimizasyonunu iş akışınızın yerleşik bir parçası olacak şekilde otomatikleştirmek en iyisidir.

JPG ve PNG dosyalarında resim kalitesini etkilemeden daha fazla kayıpsız sıkıştırma yapan çeşitli araçlar mevcuttur. JPG için jpegtran veya jpegoptim'i deneyin (yalnızca Linux'ta kullanılabilir; --strip-all seçeneğiyle çalıştırın). PNG için OptiPNG veya PNGOUT'u deneyin.

Resim sprite'ları kullanma

CSS sprite görseller, birden fazla resmin tek bir "Model Sayfası" resminde birleştirildiği bir tekniktir. Ardından, bir öğenin arka plan resmini (model sayfası) ve doğru bölümü görüntülemek için bir ofset belirterek tek tek resimleri kullanabilirsiniz.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Deneyin

Sprite oluşturma, önbelleğe almayı etkinleştirirken birden fazla resim almak için gereken indirme sayısını azaltma avantajına sahiptir.

Geç yüklemeyi kullanma

Geç yükleme, ekranın alt kısmında çok sayıda resim içeren uzun sayfaların yüklenmesini önemli ölçüde hızlandırabilir. Bu resimler, gerektiğinde veya birincil içeriğin yüklenmesi ve oluşturulması tamamlandığında yüklenir. Performans iyileştirmelerine ek olarak, geç yükleme kullanmak sonsuz kaydırma deneyimleri oluşturabilir.

Sonsuz kaydırma sayfaları oluştururken dikkatli olun. İçerik görünür hale geldikçe yüklendiğinden arama motorları bu içeriği hiçbir zaman göremeyebilir. Ayrıca, altbilgide görmeyi bekledikleri bilgileri arayan kullanıcılar, yeni içerikler sürekli yüklendiği için altbilgiyi hiçbir zaman göremez.

Resimlerden tamamen kaçının

Bazen en iyi resim aslında resim değildir. Mümkün olduğunda aynı veya benzer işlevleri sağlamak için tarayıcının yerel özelliklerini kullanın. Tarayıcılar, daha önce resim gerektiren görseller oluşturur. Bu sayede tarayıcıların ayrı resim dosyaları indirmesi gerekmez ve resimlerin ölçeklendirilmesinde sorun yaşanmaz. Simgeleri oluşturmak için Unicode veya özel simge yazı tiplerini kullanabilirsiniz.

Metni resimlere yerleştirmek yerine işaretlemeye yerleştirin.

Mümkün olduğunda, metinler resimlere yerleştirilmemeli, metin olarak kalmalıdır. Örneğin, başlıklar için resim kullanmak veya telefon numaraları ya da adresler gibi iletişim bilgilerini doğrudan resimlere yerleştirmek, kullanıcıların bilgileri kopyalayıp yapıştırmasını engeller, bilgileri ekran okuyucular için erişilemez hale getirir ve duyarlı değildir. Bunun yerine, metni işaretlemenize yerleştirin ve gerekirse istediğiniz stili elde etmek için web yazı tiplerini kullanın.

Resimleri değiştirmek için CSS kullanma

Modern tarayıcılar, daha önce resim gerektiren stiller oluşturmak için CSS özelliklerini kullanabilir. Örneğin, background özelliği kullanılarak karmaşık gradyanlar, box-shadow kullanılarak gölgeler oluşturulabilir ve border-radius özelliğiyle yuvarlak köşeler eklenebilir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Bu teknikleri kullanmak için oluşturma döngüleri gerekir. Bu döngüler, mobil cihazlarda önemli olabilir. Aşırı kullanıldığında, elde ettiğiniz tüm avantajları kaybedersiniz ve performansınız düşebilir.