Bir resim 1000 kelimeye bedeldir ve görseller her sayfanın ayrılmaz bir parçasıdır. Ancak genellikle indirilen bayt miktarının çoğunu da oluştururlar. Duyarlı web tasarımı sayesinde, sayfa düzenimiz yalnızca cihaz özelliklerine göre değil, görsellere de bağlı olarak değişebilir.
Duyarlı web tasarımı, düzenlerimizin cihaz özelliklerine göre değişebileceği, 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 keskinliği sağlar. %50 genişliğe sahip bir resim, tarayıcı 800 piksel genişliğinde olduğunda düzgün bir şekilde çalışabilir, ancak dar bir telefonda çok fazla alan kullanır ve daha küçük bir ekrana sığacak şekilde küçültüldüğünde aynı bant genişliği ek yüküne ihtiyaç duyar.
Sanat yönetimi
Bazı durumlarda ise resim oranlarının değiştirilmesi, kırpma ve hatta tüm resmin değiştirilmesi gibi daha büyük değişikliklerin yapılması gerekebilir. Bu durumda, resmin değiştirilmesine genellikle sanat yönetimi adı verilir. Daha fazla örnek için responsiveimages.org/demos/ adresini ziyaret edin.
Duyarlı Resimler
Resimlerin, bir web sayfasının yüklenmesi için gereken baytların ortalama% 60'ından fazlasını oluşturduğunu biliyor muydunuz?
Bu kursta, resimlerinizin tüm cihazlarda mükemmel görünmesi ve hızlı bir şekilde yüklenmesi için modern web'de resimlerle nasıl çalışacağınızı öğreneceksiniz.
Bu süreçte, duyarlı resimleri geliştirme iş akışınıza sorunsuz bir şekilde entegre etmek için çeşitli beceriler ve teknikler edineceksiniz. Kursun sonunda, farklı görüntü alanı boyutlarına ve kullanım senaryolarına uyum sağlayan ve bu boyutlara yanıt veren görüntülerle geliştirme yapacaksınız.
Bu, Udacity üzerinden sunulan ücretsiz bir kurstur
İşaretlemedeki resimler
img öğesi güçlüdür; içeriği indirir, çözer ve oluşturur. Modern tarayıcılar ise çeşitli resim biçimlerini destekler. Farklı cihazlarda çalışan resimler eklemek, masaüstünde kullanılandan farklı değildir ve iyi bir deneyim oluşturmak için yalnızca birkaç küçük ince ayar gerektirir.
Özet
- Kapsayıcıda yanlışlıkla taşmalarını önlemek için görüntüler için göreli boyutlar kullanın.
- Cihaz özelliklerine (ör. resim yönü) bağlı olarak farklı resimler belirtmek istediğinizde
pictureöğesini kullanın. - Tarayıcıya farklı yoğunluklar arasından seçim yaparken kullanılacak en iyi resim hakkında ipuçları vermek için
imgöğesindesrcsetvexaçıklayı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 kullanmayı düşünün.
Resimler için göreli boyutlar kullanın
Yanlışlıkla görüntü alanında taşmalarını önlemek için resimler için genişlik belirlerken göreli birimler kullanmayı unutmayın. Örneğin, width: 50%;, resim genişliğinin kapsayıcı öğenin% 50'si olmasına neden olur (görüntü alanının% 50'si veya gerçek piksel boyutunun% 50'si değildir).
CSS içeriğin kapsayıcısından taşmasına izin verdiğinden, resimlerin ve diğer içeriğin taşmasını önlemek için max-width: 100% parametresini kullanmanız gerekebilir. Örneğin:
img, embed, object, video {
max-width: 100%;
}
img öğelerinde 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 sağlayarak sitenizi daha erişilebilir hale getirmeye yardımcı olur.
Yüksek DPI'ı olan cihazlar için img kalitesini srcset ile 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'nin yerel image-set
CSS işlevine benzer şekilde srcset, tarayıcının cihaz özelliklerine bağlı olarak 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 kullanma gibi.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
srcset'i desteklemeyen tarayıcılarda, tarayıcı yalnızca src özelliğiyle belirtilen varsayılan görüntü dosyasını kullanır. Bu nedenle, özellikleri ne olursa olsun her zaman tüm cihazlarda gösterilebilecek 1 adet resim eklemek önemlidir. srcset desteklendiğinde, herhangi bir istekte bulunmadan önce resimlerin/koşulların virgülle ayrılmış listesi ayrıştırılır ve yalnızca en uygun resim indirilir ve görüntülenir.
Koşullar piksel yoğunluğundan genişlik ve yüksekliğe kadar her şeyi içerebilir ancak günümüzde yalnızca piksel yoğunluğu desteklenmektedir. Mevcut davranışı gelecekteki özelliklerle dengelemek için özellikte yalnızca 2x resmi sağlayın.
picture ile duyarlı resimlerde sanat yönetimi
Resimleri, sanat yönü olarak da bilinen cihaz özelliklerine göre değiştirmek için picture öğesini kullanın. picture öğesi; cihaz boyutu, cihaz çözünürlüğü, yön vb. farklı özelliklere göre bir resmin birden fazla sürümünü sağlamak için bildirim temelli bir çözüm tanımlar.
Bir resim kaynağı birden fazla yoğunlukta olduğunda veya duyarlı bir tasarım bazı ekran türlerinde biraz farklı bir resim dikte ettiğinde picture öğesini kullanın. video öğesine benzer şekilde, birden fazla source öğesi dahil edilebilir. Bu, medya sorgularına veya resim biçimine bağlı olarak farklı resim dosyalarının belirtilmesini mümkün kılar.
<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>
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 tekrar head-small.jpg veya head-small-
2x.jpg kullanılır. 450 pikselden küçük ekran genişlikleri ve picture öğesinin desteklenmediğinde geriye dönük uyumluluk söz konusu olduğunda tarayıcı, bunun yerine img öğesini oluşturur ve bu öğe her zaman dahil edilmelidir.
Göreli boyutlu resimler
Resmin nihai boyutu bilinmediğinde, resim kaynakları için bir yoğunluk tanımlayıcısı belirtmek zor olabilir. Bu durum özellikle, tarayıcının belirli bir genişliğini kaplayan ve tarayıcının boyutuna bağlı olarak değişken resimler için geçerlidir.
Sabit resim boyutları ve yoğunlukları sağlamak yerine, resim öğesinin boyutuyla birlikte genişlik açıklayıcısı ekleyerek sağlanan her resmin boyutunu belirtebilirsiniz. Böylece, tarayıcının etkili piksel yoğunluğunu otomatik olarak hesaplaması ve indirilecek en iyi resmi seçmesi sağlanır.
<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">
Yukarıdaki örnek, görüntü alanı genişliğinin (sizes="50vw") yarısı kadar bir resim oluşturur ve tarayıcının genişliği ile cihazın 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üm |
|---|---|---|---|
| 400 piksel | 1 | 200.jpg |
1 kat |
| 400 piksel | 2 | 400.jpg |
2x |
| 320 piksel | 2 | 400.jpg |
2,5 kat |
| 600 piksel | 2 | 800.jpg |
2,67 kat |
| 640 piksel | 3 | 1000.jpg |
3,125x |
| 1.100 piksel | 1 | 800.png |
1,45x |
Duyarlı resimlerde ayrılma noktalarını hesaba katın
Birçok durumda, resim boyutu sitenin düzen ayrılma noktalarına göre değişebilir. Örneğin, küçük bir ekranda resmin görüntü alanının tam genişliğini kaplarken, büyük ekranlarda yalnızca küçük bir kısmını alması gerekir.
<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">
Yukarıdaki örnekte yer alan sizes özelliği, resmin boyutunu belirtmek için çeşitli medya sorguları kullanır. Tarayıcı genişliği 600 pikselden büyük olduğunda resim, görüntü alanı genişliğinin% 25'i kadardır. 500 piksel ile 600 piksel arasında olduğunda resim, görüntü alanı genişliğinin% 50'si olur ve 500 pikselden küçükse tam genişlikte olur.
Ürün resimlerinin genişletilebilir olmasını sağlayın
Müşteriler satın aldıkları şeyi görmek ister. Perakende satış sitelerinde kullanıcılar, ayrıntıları daha iyi inceleyebilmek için ürünlerin yüksek çözünürlüklü yakın çekimlerini izleyebilmeyi beklerler ve çalışma katılımcıları bu konuda hayal kırıklığına uğrar.
Dokunulabilir, genişletilebilir resimlere iyi bir örnek olarak J. Crew site. Yer paylaşımının kaybolması bir resme dokunulabilir olduğunu gösterir ve ince ayrıntıların görülebildiği yakınlaştırılmış bir resim sağlanır.
Diğer görüntü teknikleri
Sıkıştırılmış resimler
Sıkıştırılmış görüntü tekniği, cihazın gerçek işlevleri ne olursa olsun tüm cihazlara yüksek düzeyde sıkıştırılmış 2x görüntü sunar. Resim türüne ve sıkıştırma düzeyine bağlı olarak resim kalitesi değişmiyor gibi görünebilir ancak dosya boyutu önemli ölçüde düşer.
JavaScript resim değişimi
JavaScript resim değişimi, cihazın özelliklerini kontrol eder ve "doğru şeyi yapar". Cihaz piksel oranını window.devicePixelRatio aracılığıyla belirleyebilir, ekran genişliğini ve yüksekliğini alabilir, hatta navigator.connection aracılığıyla veya sahte bir istek göndererek ağ bağlantısı yoklama işlemi yapabilirsiniz. Tüm bu bilgileri topladıktan sonra hangi resmin yükleneceğine karar verebilirsiniz.
Bu yaklaşımın büyük bir dezavantajı, JavaScript kullanmanın, resim yüklemeyi en azından ileriye dönük ayrıştırıcı tamamlanana kadar geciktireceğiniz anlamına gelir. Yani resimler, pageload etkinliği tetiklenene kadar indirilmeye başlanmaz. Buna ek olarak, tarayıcı büyük olasılıkla hem 1x hem de 2x resimleri
indirecektir ve bu da sayfa ağırlığının artmasına neden olacaktır.
Resimleri satır içine alma: kafes ve vektör
Görüntü oluşturup depolamanın temel olarak iki farklı yolu vardır ve bu, görüntüleri duyarlı bir şekilde dağıtma şeklinizi etkiler.
Raster resimler (fotoğraflar ve diğer resimler gibi), bağımsız renk noktalarından oluşan bir ızgara olarak temsil edilir. Taramalı resimler bir kamera veya tarayıcıdan gelebilir ya da HTML tuval öğesiyle oluşturulabilir. Kafes resimleri depolamak için PNG, JPEG ve WebP gibi biçimler kullanılır.
Logo ve çizgi resmi gibi vektör resimler; eğriler, çizgiler, şekiller, dolgu renkleri ve renk geçişleri kümesi olarak tanımlanır. Vektör resimler, Adobe Illustrator veya Inkscape gibi programlarla oluşturulabilir ya da SVG gibi bir vektör biçimi kullanılarak elle kodla yazılabilir.
SVG
SVG, bir web sayfasına duyarlı vektör grafikleri eklenmesine olanak tanır. Vektör dosyası biçimlerinin kafes dosya biçimlerine kıyasla avantajı, tarayıcının her boyutta vektör dosyası oluşturabilmesidir. Vektör biçimleri, resmin geometrisini, yani çizgiler, eğriler, renkler vb. kullanılarak nasıl oluşturulduğunu açıklar. Öte yandan, kafes biçimleri yalnızca tek tek renk noktaları hakkında bilgi içerir. Bu nedenle, tarayıcının ölçekleme sırasında boşlukları nasıl dolduracağını tahmin etmesi gerekir.
Aşağıda aynı resmin iki sürümü bulunmaktadır: sol tarafta bir PNG resmi ve sağ tarafta SVG. SVG her boyutta mükemmel görünürken yanındaki PNG daha büyük ekran boyutlarında bulanık görünmeye başlar.
Sayfanızın gönderdiği dosya isteklerinin sayısını azaltmak istiyorsanız, resimleri SVG veya Veri URI biçimi kullanarak satır içi olarak kodlayabilirsiniz. Bu sayfanın kaynağını görüntülerseniz aşağıdaki iki logonun da satır içinde tanımlandığını görürsünüz: Veri URI'si ve SVG.
SVG, mobil ve masaüstü cihazlarda muhteşem bir 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ünmekle birlikte 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 resim gibi bir dosyayı img öğesinin src'sini Base64 olarak kodlanmış dize şeklinde ayarlayarak satır içine almanın bir yolunu sunar:
<img src="data:image/svg+xml;base64,[data]">
Yukarıdaki HTML5 logosuna ait kodun başlangıcı şu şekildedir:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(Tam sürüm 5000 karakterden uzundur!)
Resimler gibi ikili dosyaları Veri URI'lerine dönüştürmek için jpillora.com/base64-encoder gibi "sürükle ve bırak" aracı mevcuttur. SVG'ler gibi, Veri URI'leri de mobil ve masaüstü tarayıcılarda iyi desteklenir.
CSS'de satır içine alma
Veri URI'leri ve SVG'ler de CSS'de satır içine alınabilir. Bu özellik, hem mobil hem de masaüstü cihazlarda desteklenir. CSS'de arka plan resimleri olarak uygulanmış, birbirinin aynısına benzeyen iki resmi aşağıda bulabilirsiniz: bir Veri URI'si, bir SVG:
Avantajlar ve dezavantajlar
Resimlerin satır içi kodu özellikle Veri URI'leri olmak üzere ayrıntılı olabilir. Peki bu kodu neden kullanmak isteyebilirsiniz? HTTP isteklerini azaltmak için! SVG'ler ve Veri URI'leri resimler, CSS ve JavaScript dahil olmak üzere bir web sayfasının tamamının tek bir istekle alınmasını sağlayabilir.
Olumsuz yönleri ise:
- Mobil cihazlarda, Veri URI'lerinin mobilde görüntülenmesi harici bir
srckaynaklı resimlere kıyasla çok daha yavaş olabilir. - Veri URI'leri bir HTML isteğinin boyutunu önemli ölçüde artırabilir.
- Bunlar, işaretlemenizi ve iş akışınızı karmaşıklaştırır.
- Veri URI biçimi, ikili programdan oldukça 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 tam destek yoktur.
- HTTP/2 ile öğe isteklerinin sayısını azaltmak daha az öncelikli hale gelecektir.
Duyarlılığa yönelik her şeyde olduğu gibi, en çok neyin işe yaradığını test etmeniz gerekir. İndirme dosyası boyutunu, istek sayısını ve toplam gecikmeyi ölçmek için geliştirici araçlarını kullanın. Veri URI'leri bazen kafes 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). Satır içi vektör resimleri kullanmanız gerekiyorsa SVG çok daha iyi bir seçenektir.
CSS'deki resimler
CSS background özelliği, öğelere karmaşık resimler eklemek, birden fazla resim eklemeyi ve bunların tekrarlanmasını sağlamak gibi işleri kolaylaştıran güçlü bir araçtır. Medya sorgularıyla birleştirildiğinde arka plan özelliği daha da güçlü hale gelir ve ekran çözünürlüğü, görüntü alanı boyutu ve diğer ölçütlere göre koşullu resim yüklemeyi etkinleştirir.
Özet
- Ekranın özelliklerine en uygun resmi kullanın; ekran boyutunu, cihaz çözünürlüğünü ve sayfa düzenini dikkate alın.
min-resolutionve-webkit-min-device-pixel-ratioiçeren medya sorgularını kullanarak yüksek DPI ekranlar için CSS'dekibackground-imageözelliğini değiştirin.- İşaretlemede 1x resme ek olarak yüksek çözünürlüklü resimler sağlamak için srcset özelliğini kullanın.
- JavaScript resim değiştirme tekniklerini kullanırken veya yüksek sıkıştırılmış yüksek çözünürlüklü resimleri daha düşük çözünürlüklü cihazlara sunarken performans maliyetlerini göz önünde bulundurun.
Koşullu resim yükleme veya resim yönetimi için medya sorguları kullanma
Medya sorguları yalnızca sayfa düzenini etkilemez. Bunları, resimleri koşullu olarak yüklemek veya görüntü alanı genişliğine bağlı olarak sanat yönü sağlamak için de kullanabilirsiniz.
Örneğin, aşağıdaki örnekte, daha küçük ekranlarda sadece small.png indirilip div içeriğine, daha büyük ekranlarda ise background-image: url(body.png) gövdeye, background-image:
url(large.png) ise içeriğe div uygulanmıştı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);
}
}
Yüksek çözünürlüklü resimler sağlamak için resim kümesi kullanın
CSS'deki image-set() işlevi, davranış background özelliğini iyileştirerek farklı cihaz özellikleri için birden fazla resim dosyası sağlanmasını kolaylaştırır. Bu, cihazın özelliklerine bağlı olarak tarayıcının en iyi resmi seçmesine olanak tanır. Örneğin, 2x ekranda 2x resim veya sınırlı bant genişliğine sahip bir ağda 2x cihazda 1x resim kullanma.
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. Diğer bir deyişle, tarayıcı 2x resmin 1x resimlerden iki kat daha büyük olduğunu varsayar ve bu nedenle 2x resmi 2 kat küçültür. Böylece, resim sayfada aynı boyutta görünür.
image-set() desteği hâlâ yeni olup yalnızca Chrome ve Safari'de -webkit tedarikçi önekiyle desteklenmektedir. image-set() desteklenmediğinde 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
);
}
Yukarıdaki öğe, resim grubunu destekleyen tarayıcılarda uygun öğeyi yükler; aksi takdirde, 1x öğesine geri döner. Dikkat edilmesi gereken en önemli nokta, image-set() tarayıcı desteği düşük olsa da çoğu tarayıcının 1x öğesi almasıdır.
Yüksek çözünürlüklü resimler veya sanat yönlendirmesi sağlamak için medya sorgularını kullanın
Medya sorguları, cihaz piksel oranına dayalı kurallar oluşturabilir. Böylece, 2x ve 1x ekranlar için farklı resimler belirtebilirsiniz.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox ve Opera standart (min-resolution: 2dppx) kodunu desteklerken Safari ve Android tarayıcıları, dppx birimi olmadan daha eski sağlayıcı önekli söz dizimini gerektirir. Bu stillerin yalnızca cihaz medya sorgusuyla eşleşirse yüklendiğini ve temel durum için stilleri belirtmeniz gerektiğini unutmayın.
Bu, tarayıcı çözünürlüğe özgü medya sorgularını desteklemiyorsa bir öğenin oluşturulmasını sağlama avantajını da sağlar.
.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);
}
}
Görüntü alanı boyutuna bağlı olarak alternatif resimler görüntülemek için minimum genişlik söz dizimini de kullanabilirsiniz. Bu teknik, medya sorgusu eşleşmezse resmin indirilmemesi gibi bir avantaja sahiptir. Örneğin, bg.png yalnızca tarayıcı genişliği 500 piksel veya daha büyükse indirilir ve body öğesine uygulanır:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
Simgeler için SVG'yi kullan
Sayfanıza simge eklerken mümkünse SVG simgelerini veya bazı durumlarda unicode karakterlerini kullanın.
Özet
- Simgeler için kafes resimler yerine SVG veya unicode kullanın.
Basit simgeleri unicode'la değiştirin
Birçok yazı tipi, resimlerin yerine kullanılabilen çok sayıda unicode glifini destekler. Resimlerin aksine, unicode yazı tipleri iyi ölçeklenir ve ekranda ne kadar küçük veya büyük göründükleri fark etmez.
unicode, normal karakter kümesinin ötesinde oklar (←), matematik operatörleri (√), geometrik şekiller (★), kontrol resimleri (▶), müzik notasyonu (♬), Yunan harfleri (O), hatta satranç taşları (♞) için semboller içerebilir.
Unicode karakter 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 ★
Süper bir ★'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 biçimlendirilebilir. SVG'nin kare resimlere göre bazı avantajları vardır:
- Sonsuz olarak ölçeklendirilebilen vektör grafiklerdir.
- Renk, gölgelendirme, şeffaflık ve animasyonlar gibi CSS efektleri oldukça basittir.
- SVG resimleri, dokümanın içine satır içi olarak yerleştirilebilir.
- Anlamsaldır.
- Uygun özelliklerle daha iyi erişilebilirlik sağlarlar.
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">.
Simge yazı tiplerini dikkatli kullanın
Simge yazı tipleri popülerdir ve kullanımı kolay olabilir. Ancak, SVG simgelerine kıyasla bazı dezavantajlar vardır:
- Sonsuza kadar ölçeklendirilebilen vektör grafiklerdir, ancak diğer kısmen kısaltılabilir, bu da simgelerin beklendiği kadar keskin olmamasına neden olabilir.
- CSS ile sınırlı stil.
- Piksellerin mükemmel konumlandırması satır yüksekliği, harf aralıkları vb.ne bağlı olarak zor olabilir.
- Anlamsal değildir ve ekran okuyucularla veya diğer yardımcı teknolojilerle kullanımları zor olabilir.
- Doğru şekilde ayarlanmadığı sürece, kullanılabilir 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"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
Font Awesome, Pictos ve Glyphicons gibi yüzlerce ücretsiz ve ücretli simge yazı tipi vardır.
Ek HTTP isteğinin ağırlığını ve dosya boyutunu simgelere olan ihtiyaçla dengelediğinizden emin olun. Örneğin, yalnızca birkaç simgeye ihtiyacınız varsa bir resim veya imge kullanmak daha iyi olabilir.
Resimleri performans için optimize edin
Genellikle indirilen baytların çoğunu resimler oluşturur ve ayrıca 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 azsa, istemcinin bant genişliği için rekabet o kadar az olur ve tarayıcı tüm öğeleri daha hızlı indirip görüntüleyebilir.
Özet
- Sadece rastgele bir resim biçimi seçmeyin. Kullanabileceğiniz farklı biçimleri öğrenin 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.
- Sprite görsellere sık kullanılan resimleri yerleştirerek http isteklerinin sayısını azaltın.
- İlk sayfa yükleme süresini iyileştirmek ve ilk sayfa ağırlığını azaltmak için resimleri yalnızca görünüm içine kaydırıldıktan sonra yüklemeyi düşünün.
Doğru biçimi seçin
Dikkate alınması gereken iki tür resim vardır:
vektör görüntüler
ve kafes resimleri.
Kafes 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 kafes içeren resimler, ayrı ayrı noktalar veya piksellerden oluşan bir ızgara olarak temsil edilir. Kafes resimler genellikle bir kamera veya tarayıcı aracından gelir ya da tarayıcıda canvas öğesiyle oluşturulabilir. Resim boyutu büyüdükçe dosya boyutu da artar. Ölçek orijinal boyutundan daha büyük olduğunda, tarayıcının eksik pikselleri nasıl dolduracağını tahmin etmesi gerektiğinden kafes resimler bulanık hale gelir.
Logo ve çizgi resmi gibi vektör resimler bir dizi eğri, çizgi, şekil ve dolgu rengiyle tanımlanır. Vektör resimler, Adobe Illustrator veya Inkscape gibi programlarla oluşturulur ve SVG gibi bir vektör biçiminde kaydedilir. Vektör resimler basit temel öğeler üzerine inşa edildiğinden, kalitede veya dosya boyutunda herhangi bir değişiklik olmadan ölçeklendirilebilir.
Uygun biçimi seçerken hem resmin kaynağını (kafes veya vektör) hem de içeriği (renkler, animasyon, metin vb.) göz önünde bulundurmak önemlidir. Tek bir biçim tüm resim türlerine uygun değildir ve her birinin kendi güçlü ve zayıf yönleri vardır.
Uygun biçimi seçerken şu yönergelerle işe başlayın:
- Fotoğraf görselleri için
JPGkullanın. - Vektör çizimi ve logo ve çizgi resmi gibi düz renkli grafikler için
SVGkullanın. Vektör sanatı yoksaWebPveyaPNGdeğerlerini deneyin. - Daha fazla renge olanak tanıdığı ve daha iyi sıkıştırma oranları sunduğu için
GIFyerinePNGkullanın. - Daha uzun animasyonlar için daha iyi resim kalitesi sağlayan ve kullanıcıya oynatma üzerinde kontrol sağlayan
<video>kullanmayı düşünün.
Dosya boyutunu küçültme
Resimleri kaydettikten sonra "sonradan işleyerek" resim dosyasının 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ı bulunur. Mümkün olduğunda en iyisi, resim optimizasyonunu otomatikleştirmeyi ve böylece iş akışınızın ayrılmaz bir parçası olmasını sağlamaktır.
Resim kalitesini etkilemeden JPG ve PNG dosyalarında daha fazla kayıpsız sıkıştırma yapan çeşitli araçlar mevcuttur. JPG için jpegtran veya jpegoptim'i deneyin (sadece Linux'ta kullanılabilir; --strip-all seçeneğiyle çalıştırın). PNG için OptiPNG veya PNGOUT'u deneyin.
İmgeleri kullan
CSS birleştirme, birkaç resmin tek bir "model sayfası" resminde birleştirildiği bir tekniktir. Daha sonra, bir öğe için arka plan resmini (model sayfası) ve doğru bölümü görüntülemek üzere bir ofseti 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;
}
Birleştirme avantajı, önbelleğe almayı etkinleştirirken birden çok resim almak için gereken indirme sayısını azaltma avantajıdır.
Geç yüklemeyi düşünün
Geç yükleme, ekranın alt kısmında birçok resim içeren uzun sayfaları gerektiğinde veya birincil içeriğin yüklenmesi ve oluşturulması tamamlandığında yükleyerek yüklenme hızını önemli ölçüde hızlandırabilir. Geç yükleme kullanımı, performans iyileştirmelerine ek olarak 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örmek istedikleri bilgileri arayan kullanıcılar, her zaman yeni içerik yüklendiğinden altbilgiyi hiçbir zaman görmezler.
Resimlerden tamamen kaçının
Bazen en iyi resim, aslında bir resim değildir. Mümkün olduğunda, aynı veya benzer işlevi sağlamak için tarayıcının yerel özelliklerini kullanın. Tarayıcılar, önceden gerekli resimlere sahip görseller oluşturur. Diğer bir deyişle, tarayıcıların artık ayrı resim dosyaları indirmesi gerekmez ve böylece tuhaf biçimde ölçeklenmiş resimlerin önüne geçilir. Simgeleri oluşturmak için Unicode veya özel simge yazı tipleri kullanabilirsiniz.
Metni resimlere yerleştirilmiş değil, işaretlemeye yerleştirin
Mümkün olduğu durumlarda, metinler metin olmalı ve resimlere yerleştirilmemelidir. Örneğin, başlıklar için resim kullanmak veya iletişim bilgilerini (ör. telefon numarası ya da adres) doğrudan resimlere yerleştirmek, kullanıcıların bilgileri kopyalayıp yapıştırmasını engeller. Ekran okuyucuların bilgilere erişememesine neden olur ve yanıt vermez. Bunun yerine, metni işaretlemenize yerleştirin ve gerekirse ihtiyacınız olan stili elde etmek için web yazı tiplerini kullanın.
Resimleri değiştirmek için CSS kullanma
Modern tarayıcılar, CSS özelliklerini kullanarak önceden gerekli resimlere sahip olan stiller oluşturabilir. Örneğin, background özelliği kullanılarak karmaşık renk geçişleri oluşturulabilir, box-shadow kullanılarak gölgeler oluşturulabilir ve yuvarlatılmış köşeler border-radius özelliğiyle eklenebilir.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit 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 tekniklerin kullanımının, mobil cihazlarda önemli olabilecek oluşturma döngüleri gerektirdiğini unutmayın. Aşırı kullanırsanız elde ettiğiniz avantajı kaybedersiniz ve bu durum performansı düşürebilir.