Junior
Web tasarımında kullanılan popüler görüntü formatları nelerdir?
sobes.tech yapay zeka
AI'dan gelen yanıt
- Raster (Raster Görüntüler):
- JPEG (.jpg, .jpeg): Fotoğraf için iyi, kayıplı sıkıştırma destekler. Saydamlığı desteklemez.
- PNG (.png): Saydamlığı destekler (alfa kanalı). PNG-8 basit resimler için, PNG-24 daha yüksek kaliteli ve tam renk gamı için. Kayıpsız sıkıştırma.
- GIF (.gif): Animasyon ve saydamlık destekler. 256 renk ile sınırlıdır. Basit animasyonlar ve ikonlar için kullanılır.
- WebP (.webp): Google tarafından geliştirilmiştir. Kayıplı ve kayıpsız sıkıştırma, animasyon ve saydamlık destekler. Genellikle JPEG ve PNG ile karşılaştırıldığında daha küçük boyutludur ve benzer kalitededir.
- Vektör (Vektör):
- SVG (.svg): Kaliteden ödün vermeden ölçeklenebilir. Logo, ikon ve grafikler için mükemmeldir. XML tabanlıdır.
| Format | Tip | Saydamlık | Animasyon | Sıkıştırma | En iyi kullanım |
|---|---|---|---|---|---|
| JPEG | Raster | Hayır | Hayır | Kayıplı | Fotoğraflar |
| PNG | Raster | Evet | Hayır | Kayıpsız | Saydamlık içeren görüntüler, grafikler |
| GIF | Raster | Evet (basit) | Evet | Kayıpsız | Basit animasyonlar, ikonlar |
| WebP | Raster | Evet | Evet | Kayıplı/Kayıpsız | Genel kullanım |
| SVG | Vektör | Evet | Evet (CSS/JS) | Kayıpsız | Logo, ikon, grafikler |
Format seçimi, görüntü türüne, kalite gereksinimlerine, saydamlık ve animasyon desteğine ve dosya boyutuna bağlıdır. <picture> veya <img> etiketi içindeki srcset özniteliği kullanılarak, tarayıcı desteğine göre farklı formatlar (örneğin, WebP ve JPEG) sunmak ve performansı optimize etmek mümkündür.