Bu kurs, resim kaynaklarının verimli bir şekilde istenmesini ve oluşturulmasını sağlamayla ilgili temel bilgilerden, yaygın görüntü biçimlerinin sunucudan istemciye nasıl iletildiğine kadar her konuyu kapsayan yeni ve ileri düzey web geliştiricileri için hazırlanmıştır. Bu kurs boyunca, resimlerinizin kalitesinden ödün vermeden mümkün olan en küçük aktarım boyutlarını nasıl elde edeceğinizi (en azından kimsenin göremeyeceği şekilde) öğreneceksiniz.
Görüntülerin modern web'de nasıl çalıştığını bütünsel olarak anlamak için bu seriyi baştan sona inceleyebilir veya günlük işlerinizde kullanacağınız belirli kavramlar ve işaretleme kalıpları için referans olarak kullanabilirsiniz.
Web geliştirmede yeni olanlar, işaretlemeyi kullanmayla ilgili temel bilgiler için HTML Öğrenme kurslarına, stil oluşturmayla ilgili temel bilgiler için CSS Öğrenin kurslarına ve resimlerin duyarlı düzenlerde nasıl oluşturulduğunu anlamak için Duyarlı Tasarım Öğrenme kurslarına göz atın.
Öğrenecekleriniz:
Web'deki görsellerin kısa geçmişi
1993'te "image öğesi" ile başlayan, web'deki resimlerin geçmişi
Temel performans sorunları
Resim isteklerinizin mümkün olduğunca küçük ve etkili olmasını sağlamanın yollarını öğrenin.
Vektör resimler
Web'de kullanılan vektör görüntü biçimi olan SVG hakkında bilgi edinin.
Kare resimleri
JPEG, GIF, PNG ve WebP gibi kafes resimleri keşfedin.
Resim biçimleri: GIF
Resim kodlamanın nasıl çalıştığıyla ilgili bir açıklamayla birlikte GIF resim biçimini anlayın.
Resim biçimleri: PNG
Seçilebilecek en iyi resim biçimi için PNG'nin ne zaman kullanıldığını öğrenin.
Resim biçimleri: JPEG
Web'deki en yaygın resim biçimi hakkında bilgi edinin.
Resim biçimleri: WebP
WebP hakkında bilgi edinin ve bu biçimle diğerleri arasındaki farkı anlayın.
Resim biçimleri: AVIF
AV1 Resim Dosyası Biçimi (AVIF), açık kaynak AV1 video codec'ine dayalı bir kodlamadır.
Duyarlı resimler
Duyarlı resimlerle ilgili ayrıntılı bilgi.
Açıklayıcı söz dizimleri
Tarayıcıya resim kaynakları ve bunların nasıl kullanılacağı hakkında bilgi sağlamak için srcset'i ve boyutları kullanma.
Kurallı söz dizimi
Resim öğesi hakkında bilgi edinin.
Sıkıştırmayı ve kodlamayı otomatikleştirme
Yüksek performanslı resim kaynakları oluşturmayı, geliştirme sürecinizin sorunsuz bir parçası haline getirin.
Site Oluşturucu, çerçeve ve içerik yönetim sistemi
WordPress gibi İYS'lerin ve diğer site oluşturucuların duyarlı resimlerin kullanımını nasıl kolaylaştırabileceğini keşfedin.
Resim içeriği yayınlama ağları
Görüntü CDN'lerinin bir resmin içeriğini nasıl dönüştürüp optimize edebildiğini öğrenin.
Sonuç
Bazı ek kaynaklar.
Görseller hakkında bilgi edinmeye hazır mısınız?