Uyumlu görseller

Bir resim 1000 kelimeye bedeldir. Resimler de her sayfanın önemli bir parçasını oluşturur. Ancak, indirilen baytların çoğunu bunlar da oluşturur. Duyarlı web tasarımı ile düzenlerimiz yalnızca cihaz özelliklerine göre değil, resimlere göre de değişebiliyor.

Duyarlı web tasarımı, site düzenimizin cihaza göre değişebilmesi anlamına gelir. ancak içerik de değişebilir. Örneğin, yüksek (2x) ekranlar, yüksek çözünürlüklü grafikler keskinlik sağlar. Resim tarayıcı 800 piksel genişliğinde olduğunda düzgün çalışabilir, ancak ve aynı bant genişliği ek yükünü gerektirir daha küçük bir ekrana sığacak şekilde küçültüldüğünde.

Sanat eseri yönetimi

Bazı durumlarda ise resmin değiştirilmesi, orantı, kırpma ve hatta resmin tamamını değiştirme. Böyle durumlarda Resmi değiştirmek genellikle resim yönü olarak adlandırılır. Görüntüleyin daha fazla bilgi için responsiveimages.org/demos/ adresine göz atın örnekler.

Duyarlı Resimler

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

Bu kursta, modern web'de görsellerle nasıl çalışacağınızı öğreneceksiniz. tüm cihazlarda hızlı yüklendiğinden emin olun.

Bu süreçte, bir projeyi sorunsuz şekilde tamamlayabilmek için duyarlı resimleri geliştirme iş akışınıza entegre edebilirsiniz. Şu ayın sonunda: Kurs kapsamında, mevcut duruma uyum sağlayan ve değişen, farklı ekran boyutlarına ve kullanım senaryolarına

Bu, Udacity aracılığıyla sunulan ücretsiz bir kurstur

Kursa Katıl

İşaretlemedeki resimler

img öğesi güçlü bir öğedir; indirir, kodunu çözer ve oluşturur içerik gösterir. Modern tarayıcılar da çeşitli resim biçimlerini destekler. Şunları içeriyor: farklı cihazlarda çalışan resimler, masaüstünden farklı değildir ve yalnızca iyi bir deneyim için birkaç ufak düzenleme gerektirir.

Özet

• Resimlerin yanlışlıkla taşmasını önlemek için göreli boyutları kullanın yerleştirilmelidir.
• Kullanıcı davranışına göre farklı resimler belirtmek istediğinizde picture öğesini kullanın. (ör. sanat yönü) de kapsayabilir.
• img öğesinde srcset ve x tanımlayıcısını kullanarak seçim yaparken kullanılacak en iyi resmi tarayıcıya göre kontrol edin.
• Sayfanız yalnızca bir veya iki resim içeriyorsa ve bunlar web sitenizin başka bir yerinde kullanılmıyorsa sitenizde dosya isteklerini azaltmak için satır içi resimler kullanabilirsiniz.

Resimler için göreli boyutlar kullan

Resimler için genişlikler belirlerken göreli birimler kullanmayı unutmayın. Böylece, yanlışlıkla taşmasını engeller. Örneğin, width: 50%; Resim genişliği, kapsayıcı öğenin% 50'si (görüntü alanının% 50'si veya %50'si) ekleyebilirsiniz.

CSS, içeriğin kapsayıcısından taşmasına izin verdiğinden, genişlik: %100 olarak ayarlayın. Örneğin:

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

img üzerindeki alt özelliği aracılığıyla anlamlı açıklamalar sağladığınızdan emin olun. öğeler; Bunlar, mevcut kullanıcıların ekranlarında bağlam bilgisi sunarak sitenizin daha erişilebilir okuyucular ve diğer yardımcı teknolojiler.

Yüksek DPI'ya sahip cihazlar için img'ları srcset ile geliştirin

srcset özelliği, Birden fazla resim dosyası sağlamayı kolaylaştıran img öğesi farklı cihaz özellikleri için. image-set ile benzer CSS işlevi yerel olarak CSS'ye özgüdür, srcset, tarayıcının en iyi sayfayı seçmesine olanak resmi kullanabilirsiniz. Örneğin, 2x bir resim ve gelecekte potansiyel olarak 1x bir resim sınırlı bant genişliğine sahip bir ağ üzerinde 2x cihaz olarak kullanılabilir.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

srcset özelliğini desteklemeyen tarayıcılarda, tarayıcı yalnızca varsayılan değeri kullanır src özelliğiyle belirtilen resim dosyasıdır. Bu nedenle, ne olursa olsun her zaman tüm cihazlarda görüntülenebilecek 1x bir resim özellikler. srcset desteklendiğinde, her bir öğenin virgülle ayrılmış listesi herhangi bir istekte bulunmadan önce resim/koşullar ayrıştırılır ve yalnızca uygun resim indirilip görüntülenir.

Koşullar, piksel yoğunluğundan genişliğe ve şu anda yalnızca piksel yoğunluğu iyi desteklenmektedir. Mevcut dengeyi kurmak için sonraki özelliklerle ilgili bir sorun yoksa 2x resmi belirtir.

picture ile duyarlı resimlerde görsel yönü

Resimleri, resim öğesi olarak da bilinen cihaz özelliklerine göre değiştirmek için picture öğesini kullanın. İlgili içeriği oluşturmak için kullanılan picture öğesi, şunun için bildirim temelli bir çözümü tanımlar: Bir görselin farklı versiyonlarını üretmek için ekran çözünürlüğü ve ekran görüntüsü gibi ve diğerleri.

Bir resim kaynağı olduğunda picture öğesini kullanın veya duyarlı tasarım bir web sitesi için bir zorunluluk bazı ekranlarda farklı bir resim kullanmayı tercih edebilir. Şuna benzer: video öğesi, birden fazla source öğesi eklenerek farklı resim dosyaları ve farklı içerik türlerini gösterir.

<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ın çözünürlüğüne bağlı olarak head.jpg veya head-2x.jpg kullanılır. Öğe tarayıcı 450 ile 800 piksel arasındaysa cihazın çözünürlüğüne bağlı olarak tekrar head-small.jpg veya head-small- 2x.jpg kullanılır. Ekran genişlikleri için 450 pikselden az ve picture öğesinin olmadığı geriye dönük uyumluluk destekleniyorsa, tarayıcı bunun yerine img öğesini oluşturur ve her zaman dahil.

Göreli boyutlu resimler

Resmin nihai boyutu bilinmediğinde, boyutu belirlemek zor olabilir. yoğunluk tanımlayıcısını kullanabilirsiniz. Bu durum, özellikle de Tarayıcının orantılı bir genişliğini kaplayan ve içeriğe bağlı olarak, boyutunu korur.

Sabit resim boyutları ve yoğunlukları sağlamak yerine, resimlerinizin ne kadarının öğesinin boyutuyla birlikte bir genişlik tanımlayıcısı ekleyerek, sayesinde, tarayıcının etkili gösterim oranını otomatik olarak hesaplamasına olanak tıklayın ve indirilecek en iyi resmi seçin.

<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 örnekte, görüntü alanı genişliğinin yarısı kadar olan bir resim oluşturulur (sizes="50vw") ile tarayıcının genişliğine ve cihaz pikselinin genişliğine bağlı olarak oranı, boyutu ne kadar büyük olursa olsun, tarayıcının doğru resmi seçmesine olanak sağlar. en önemli nokta budur. Örneğin, aşağıdaki tabloda tarayıcı şunu seçer:

Tarayıcı genişliği	Cihaz piksel oranı	Kullanılan resim	Etkili çözüm
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,125 kat
1.100 piksel	1	800.png	1,45x

Duyarlı görüntülerdeki kesme noktalarını hesaba katın

Çoğu durumda, resim boyutu sitenin düzenine bağlı olarak değişebilir. ayrılma noktalarını içerir. Örneğin, küçük bir ekranda resmin görüntü alanının tam genişliğini kaplarken, büyük ekranlarda yalnızca görüntü alanının küçük bir oran alınır.

<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 bulunan sizes özelliği, aşağıdakileri yapmak için çeşitli medya sorgularını kullanır: resmin boyutunu belirtin. Tarayıcı genişliği 600 piksel; resim, görüntü alanı genişliğinin% 25'i kadardır; 500 piksel arasında olduğunda resim, görüntü alanı genişliğinin% 50'sidir; 500 pikselin altında ise tam genişlikte.

Ürün resimlerini genişletilebilir hale getirin

Müşteriler satın aldıkları ürünü görmek ister. Perakende satış sitelerinde kullanıcıların beklentileri ürünlerin yüksek çözünürlüklü yakın plan çekimlerini ve çalışma katılımcıları ve bunu yapamadıkları için sinirlenmiş olurlar.

Tıklanabilir, genişletilebilir resimlere iyi bir örnek olarak J. Ekip sitesi. Kaybolan yer paylaşımı, bir resme dokunulabilir olduğunu gösterir ve yakınlaştırılmış ince ayrıntıları görünür olan bir resim.

Diğer görüntü teknikleri

Sıkıştırılmış görüntüler

İlgili içeriği oluşturmak için kullanılan sıkıştırılmış görüntü tekniği boyutu ne olursa olsun, tüm cihazlara oldukça sıkıştırılmış 2x bir resim sunar. cihazın özelliklerini göstermenizi sağlar. Resmin türüne ve bilgi düzeyine bağlı olarak, resim kalitesi değişmeyebilir ancak dosya boyutu düşebilir önemli ölçüde artış gösteriyor.

Deneyin

JavaScript resim değişimi

JavaScript resim değişimi, cihazın özelliklerini kontrol eder ve diye düşünürüm. Cihazın piksel oranını şu yöntemle belirleyebilirsiniz: window.devicePixelRatio, ekran genişliği ve yüksekliğini öğrenebilir, hatta navigator.connection üzerinden gelen veya sahte bir veri gönderen bazı ağ bağlantıları isteği gönderin. Tüm bu bilgileri topladıktan sonra, gelecekte hangi resim yükleyin.

Bu yaklaşımın en büyük dezavantajlarından biri, JavaScript'i kullandığınızda resmin yüklenmesini en azından ileriye dönük ayrıştırıcı bitene kadar geciktirir. Bu resimlerin, pageload etkinliği bitene kadar indirilmeye başlanmayacağı anlamına gelir etkinleşir. Ayrıca, tarayıcı büyük olasılıkla hem 1x hem de 2x Bu da sayfa ağırlığının artmasına neden olur.

Resimleri satır içine alma: kafes ve vektör

Resim oluşturup depolamanın iki temel yolu vardır: Bu durum, görselleri duyarlı bir şekilde dağıtma şeklinizi etkiler.

Raster resimler (fotoğraflar ve diğer resimler gibi) renkli noktalardan oluşan bir ızgara olarak gösterilir. Kafes resimler, kamera veya tarayıcıdan ya da HTML tuval öğesiyle oluşturulmalıdır. Biçimler (ör. PNG, JPEG ve WebP) kafes resimleri depolamak için kullanılır.

Logolar ve çizgi sanatı gibi vektör resimleri, renk ve gradyanları içerebilir. Vektör resimler oluşturulabilir veya Inkscape gibi programlarla ya da bilgisayar korsanı tarafından SVG gibi bir vektör biçimi kullanılmalıdır.

SVG

SVG, bir web sayfasına duyarlı vektör grafikleri eklemeyi mümkün kılar. İlgili içeriği oluşturmak için kullanılan vektör dosya biçimlerinin kafes formatlarına göre avantajı, tarayıcının tüm boyutlarda bir vektör görüntü oluşturabilir. Vektör biçimleri, şekillerin geometrik özelliklerini resim—çizgiler, eğriler, renkler vb. kullanılarak nasıl oluşturulduğu. Öte yandan kafes biçimleri yalnızca tek tek noktalar hakkında bilgi içerir olduğundan, tarayıcının ölçeklendirme 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 resim, sol tarafta bir SVG. sağ. SVG her boyutta harika görünürken yanındaki PNG dosyası büyük ekran boyutlarında bulanık görünebilir.

Sayfanızın gönderdiği dosya isteklerinin sayısını azaltmak istiyorsanız, resimleri, SVG veya Veri URI biçimini kullanarak satır içine alın. Bu sayfanın kaynağını görüntülerseniz aşağıdaki her iki logonun da satır içi olarak tanımlandığını göreceksiniz: Veri URI'si ve SVG.

SVG, mobil ve masaüstünde mükemmel desteğe sahiptir. ve optimizasyon araçları size SVG boyutunu önemli ölçüde azaltabilir. Aşağıdaki iki satır içi SVG logosu görünümü aynı, ancak biri yaklaşık 3 KB, diğeri ise yalnızca 2 KB boyutunda:

Veri URI'si

Veri URI'leri, resim gibi bir dosyayı bir img öğesinin src'sini şu biçimdedir:

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

Yukarıdaki HTML5 logosuna ilişkin kodun başlangıcı şu şekilde görünür:

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

(Tam sürüm 5000 karakterden fazladır!)

Sürükle ve 've' bırakma aracıyla jpillora.com/base64-encoder gibi ikili dosyaları Veri URI'lerine dönüştürmek için kullanılabilir. Tıpkı SVG'ler gibi, Veri URI'leri mobil cihazlarda ve cihazlarda iyi bir şekilde desteklenir masaüstü tarayıcılarda çalışır.

CSS'de satır içine alma

Veri URI'leri ve SVG'ler de CSS'de satır içi olarak tutulabilir ve bu, hem mobil hem de masaüstünde kullanılabilir. Aşağıda, resim olarak uygulanmış iki özdeş görüntü CSS'de arka plan resimleri; bir Veri URI'si, bir SVG:

Satır içi sağlayıcılar ve eksileri

Resimler için satır içi kodlar, özellikle de Veri URI'leri olmak üzere ayrıntılı olabilir. Bu nedenle, kullanmak ister miydiniz? HTTP isteklerini azaltmak için: SVG'ler ve Veri URI'leri, resimler, CSS ve JavaScript de dahil olmak üzere, kullanılacak tüm web sayfası tek bir istekte bulunabilirsiniz.

Olumsuz açıdan:

• Mobil cihazlarda veri URI'leri önemli ölçüde daha yavaş olabilir daha fazla mobil cihazda gösterilecek.src
• Veri URI'leri, bir HTML isteğinin boyutunu önemli ölçüde artırabilir.
• Bunlar, işaretlemenizi ve iş akışınızı daha karmaşık hale getirir.
• Veri URI'si biçimi, ikili sistemden çok daha büyüktür (%30'a kadar) ve toplam indirme boyutunu küçültmez.
• Veri URI'leri önbelleğe alınamadığı için, kullanıldıkları her sayfa için indirilmeleri gerekir.
• IE 6 ve 7'de desteklenmez, IE8'de eksik destek sunulur.
• HTTP/2 ile öğe isteklerinin sayısını azaltmak öncelikten düşecektir.

Duyarlı her şeyde olduğu gibi, neyin en iyi sonuç verdiğini test etmeniz gerekir. Geliştiriciyi kullan indirme dosyasının boyutunu, istek sayısını ve toplam Veri URI'leri bazen kafes görüntüler için yararlı olabilir. Örneğin, başka bir yerde kullanılmayan bir veya iki fotoğraf içeren bir ana sayfada Şu durumda: gerekirse SVG çok daha iyi bir seçenektir.

CSS'deki resimler

CSS background özelliği, karmaşık resimler eklemek için kullanılan güçlü bir araçtır ekleyerek birden çok resim eklemeyi ve bunların tekrarlanmasını kolaylaştırır. ve diğerleri. Medya sorgularıyla birleştirildiğinde arka plan özelliği daha da güçlü, ekrana göre koşullu resim yüklemeyi mümkün kılar gibi pek çok özelliği belirleyebilirsiniz.

Özet

• Ekranın özelliklerine en uygun resmi kullanın, ekranı düşünün boyut, cihaz çözünürlüğü ve sayfa düzeni.
• Yüksek DPI görüntüleri için CSS'deki background-image özelliğini aşağıdakileri kullanarak değiştirin: min-resolution ve -webkit-min-device-pixel-ratio içeren medya sorguları.
• 1x resme ek olarak yüksek çözünürlüklü resimler sağlamak için işaretleme.
• JavaScript resim değişimini kullanırken performans maliyetlerini göz önünde bulundurun yüksek çözünürlüklü resimler sunarken daha düşük çözünürlüklü cihazlar.

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

Medya sorguları yalnızca sayfa düzenini etkilemez; paydaşlarınızı ve paydaşlarınızı görüntü alanına bağlı olarak resimleri koşullu olarak yüklemek veya resim yönü sağlamak için dokunun.

Örneğin, aşağıdaki örnekte yalnızca small.png daha küçük ekranlarda daha büyük ekranlarda, div adlı içerik indirilip uygulandı background-image: url(body.png) gövdeye ve background-image: url(large.png) içeriğe (div) uygulandı.

.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 resim grubunu kullanın

CSS'deki image-set() işlevi, davranışı background özelliğini geliştirir. Böylece, farklı cihazlar için birden fazla resim dosyası sağlamayı kolaylaştırır. özellikler. Bu, tarayıcının kullanıcı yolculuğuna bağlı olarak en iyi resmi Örneğin 2x ekranda 2x bir resim kullanmak, Sınırlı bant genişliğinde bir ağ üzerinde, 2x cihaz üzerinde 1x görüntü.

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

Tarayıcı, doğru resmi yüklemeye ek olarak resmi ölçeklendirir buna göre hazırlar. Başka bir deyişle, tarayıcı, 2x resmin iki kat daha fazla olduğu için 2x resmi 2 kat küçültür. Dolayısıyla 2x boyutunda resim küçültülür. resmin sayfada aynı boyutta göründüğünden emin olun.

image-set() desteği hâlâ yenidir ve yalnızca Chrome ve -webkit tedarikçi firma önekine sahip Safari. Lütfen image-set() desteklenmediğinde kullanılacak yedek resim; ö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 örnek, uygun öğeyi, resim grubunu destekleyen tarayıcılarda yükler; aksi takdirde 1x öğeye geri döner. Ancak bariz uyarı şu şekildedir: image-set() tarayıcı desteği düşük. Çoğu tarayıcı 1x öğeyi alır.

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

Medya sorguları, cihazın piksel oranı Böylece 2x ve 1x ekranlar için farklı resimler belirlemeyi mümkün kılar.

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

Chrome, Firefox ve Opera'nın tamamı standart (min-resolution: 2dppx), Safari ve Android tarayıcılarda ise eski tedarikçinin söz dizimini kullanabilirsiniz.dppx Bu stillerin yalnızca cihazı medya sorgusuyla eşleşir ve temel büyük/küçük harf kullanımını belirtmeniz gerekir. Bu, aynı zamanda, tarayıcı üzerinde herhangi bir etkisi olması durumunda bir öğenin , çözünürlüğe özgü medya sorgularını desteklemez.

.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

Ayrıca, görüntü alanı boyutunu ayarlamanızı sağlar. Bu teknik, resmin belirli bir alan adının medya sorgusu eşleşmezse indirilir. Örneğin, bg.png yalnızca tarayıcı genişliği 500 piksel veya daha büyükse body öğesine indirilip 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 veya bazı durumda, unicode karakterleri.

Özet

• Simgeler için kafes resimler yerine SVG veya unicode kullanın.

Basit simgeleri unicode ile değiştirme

Birçok yazı tipi, kullanılabilecek çok sayıda unicode glifini destekler. kullanın. Resimlerin aksine, unicode yazı tipleri iyi ölçeklenir ve ekranda ne kadar küçük veya büyük görünürlerse gösterilsin.

unicode, normal karakter kümesinin dışında, oklar (←), matematik operatörleri (etik), geometrik şekiller (★), resimleri kontrol et (▶), müzik gösterimi (♬), Yunan harfleri (➘), hatta satranç taşları (♞).

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 ★

Süper ★sınız

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

Daha karmaşık simge gereksinimleri için SVG simgeleri genellikle hafiftir, stili de CSS ile şekillendirilebilir. SVG'nin birçok avantajı vardır. kafes resimler:

• Sınırsız şekilde ölçeklendirilebilen vektör grafiklerdir.
• Renk, gölgelendirme, şeffaflık ve animasyonlar gibi CSS efektleri basittir.
• SVG resimleri doğrudan dokümanda satır içine alınabilir.
• 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">.

Deneyin

Simge yazı tiplerini dikkatli bir şekilde kullanın

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

• Sınırsız olarak ölçeklendirilebilen vektör grafikleridir, ancak olması gerektiği kadar keskin olmayan simgelere neden olur.
• CSS ile sınırlı stil.
• Çizgi yüksekliğine bağlı olarak, piksellerin doğru şekilde konumlandırılması zor olabilir. harf aralığı vb.
• Anlamsal değildir ve ekran okuyucularla veya ekran okuyucularla diğer yardımcı teknolojileri de kullanabilirsiniz.
• Kapsamı doğru şekilde ayarlanmadığı sürece, yalnızca mevcut simgelerin küçük bir kısmını görüntüleyebilirsiniz.

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

Aralarında Yazı Tipi modu dahil olmak üzere yüzlerce ücretsiz ve ücretli simge yazı tipi Mükemmel, Pictos ve Glif simgeleri.

Ek HTTP isteğinin ve dosya boyutunun ağırlığını gerekli temel bilgileri sağlıyor. Örneğin, yalnızca birkaç simgeye ihtiyacınız varsa bir resim veya sprite resim kullanmak daha iyi olabilir.

Resimleri performans için optimize edin

Resimler genellikle indirilen bayt miktarının büyük bir kısmını oluşturur ve genellikle resimleri büyük bir kısmını kapsayabilir. Sonuç olarak, baytlardan tasarruf ve performans açısından en yüksek kazancı iyileştirmeler: tarayıcının indirmesi gereken bayt sayısı ne kadar az olursa müşterinin bant genişliği için rekabet azalır ve tarayıcı tüm öğeleri indirip görüntüleyebilir.

Özet

• Rastgele bir resim biçimi seçmekle yetinmeyin. Resim biçimiyle ilgili biçimleri kullanabilir ve en uygun biçimi kullanabilirsiniz.
• Resim optimizasyonu ve sıkıştırma araçlarını iş akışınıza dahil ederek emin olun.
• Sık kullanılan resimleri görsellerdir.
• İlk sayfa yükleme süresini iyileştirmek ve ilk sayfa ağırlığını azaltmak için resimleri yalnızca görünümün içine kaydırıldıktan sonra yüklemeyi düşünün.

Doğru biçimi seçin

Göz önünde bulundurulması gereken iki tür resim vardır: vektör resimler ve kafes resimler oluşturun. Kafes görüntüler için ayrıca doğru sıkıştırma biçimini seçmeniz gerekir. örneğin: GIF, PNG, JPG.

Raster resimler, fotoğraflar ve diğer resimler gibi, bir ızgara şeklinde sunulur ayrı noktalar veya pikseller şeklinde gösterilir. Kafes resimler genellikle bir kameradan veya Tarayıcıda canvas öğesi ile oluşturulabilir. ve resim boyutu büyüdükçe dosya boyutu da büyür. Üzerinden daha büyük olacak şekilde tarayıcının tahmin etmesi gerektiği için raster resimler bulanık hale gelir eksik piksellerin nasıl doldurulacağını anlatacağım.

Logolar ve çizgi sanatı gibi vektör resimleri, bir dizi eğriyle tanımlanır. çizgi, şekil ve dolgu renklerini kullanabilirsiniz. Vektör resimler, aşağıdaki gibi programlarla oluşturulur: ve Adobe Illustrator veya Inkscape gibi bir vektör biçiminde SVG. Çünkü vektör görüntüler Bunlar kalite kaybı olmadan ölçeklendirilebilir ve dosya boyutu değişir.

Uygun biçimi seçerken hem kaynağı (kafes veya vektör) ve içeriğin (renkler, animasyon metin vb.) kullanın. Tüm resim türlerine uyan tek bir biçim yoktur ve her birinin kendine özgü avantajları vardır bilgi edindiniz.

Uygun biçimi seçerken bu yönergelerle başlayın:

• Fotoğrafik görüntüler için JPG kullanın.
• Vektör sanatı ve logolar ile çizgi sanatı gibi düz renkli grafikler için SVG kullanın. Vektör sanatı kullanılamıyorsa, WebP veya PNG deneyin.
• Daha fazla renk ve daha iyi fırsatlar sunduğu için GIF yerine PNG kullanın gibi bir metriktir.
• Daha uzun animasyonlar için daha iyi görüntü sağlayan <video> kullanmayı tercih edebilirsiniz. ve kullanıcıya oynatma üzerinde kontrol sağlar.

Dosya boyutunu küçültün

"Son işleme" yöntemini kullanarak resim dosyasının boyutunu önemli ölçüde azaltabilirsiniz. resimler tıklayın. Resim sıkıştırma için kullanabileceğiniz birçok araç vardır. kayıpsız, çevrimiçi, GUI, komut satırı. En iyisi yerleşik bir özellik olması için her zaman otomatik iş akışını takip edin.

JPG üzerinde kayıpsız sıkıştırma performansı gösteren çeşitli araçlar mevcuttur ve resim kalitesi üzerinde etkisi olmayan PNG dosya. JPG için şunları deneyin: jpegtran veya jpegoptim (yalnızca Linux'ta kullanılabilir; --strip-all seçeneğiyle) çalıştırın. PNG için şunları deneyin: OptiPNG veya PNGOUT.

Sprite görselleri kullan

CSS birleştirme, birkaç resmin tek bir resim altında birleştirildiği bir tekniktir. "model sayfası" görüntüsüdür. Daha sonra öğe için arka plan resmi (model sayfası) ve emin olun.

.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

Birleştirme avantajı, normal koşullarda yalnızca bir önbelleğine almayı etkinleştirir.

Tembel yüklemeyi düşünün

Geç yükleme, çok sayıda öğe içeren uzun sayfaların yüklenmesini önemli ölçüde hızlandırabilir. ekranın alt kısmındaki resimleri gerektiği şekilde veya birincil içeriğin yüklenmesi ve oluşturulması tamamlandı. Alışveriş kampanyaları gecikmeli yüklemenin kullanılması, sonsuz kaydırma deneyimleri yaratabilir.

Sonsuz kaydırma sayfaları oluştururken dikkatli olun, çünkü içerik görünür hale gelirse arama motorları bu içeriği hiçbir zaman görmeyebilir. Ayrıca, altbilgide görmeyi bekledikleri bilgileri arayan kullanıcılara, her zaman yeni içerik yüklendiği için altbilgiyi hiçbir zaman görmez.

Resimleri tamamen kullanmaktan kaçının

Bazen en iyi resim aslında hiç resim olmayabilir. Mümkün olduğunda aynı veya benzerlerini sağlamak için tarayıcının yerel yeteneklerini işlevi görür. Tarayıcılar, önceden kullanılması gereken görselleri oluşturur. resim. Bu, tarayıcıların artık ayrı bir resim indirmesine gerek olmadığı anlamına gelir. ve böylece tuhaf bir şekilde ölçeklendirilen resimlerin önüne geçebilirsiniz. unicode veya özel bir alan adı simgeleri oluşturmak için kullanılan simge yazı tipleri.

Görsellere gömülmek yerine işaretlemeye metin yerleştirin

Metin, mümkün olduğunca metin olmalıdır ve resimlerin içine yerleştirilmemelidir. Örneğin, başlık için resim kullanma veya iletişim bilgilerini yerleştirme (ör. doğrudan resimlere yerleştirilmiş, kullanıcıların telefonlarındaki bilgileri kopyalayıp yapıştırma; bilgilere erişimi ve duyarlı değildir. 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 resim olarak ekleyebilirsiniz. Örneğin: karmaşık renk geçişleri background özelliği, gölgeler box-shadow kullanılarak oluşturulabilir ve yuvarlanabilir köşeler border-radius özelliğiyle eklenebilir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesk oturma alanı amet augue eu magna scelerisque porta ut ut dolor. Nullam Placerat egesta'ları nisl sed sollicitudin. Fusce Placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis süsü 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 gerektiğini unutmayın. önemli olabilir. Fazla kullanılırsa avantajlarınızı kaybedersiniz ve performansı düşürebilir.