Web siteleri veya arayüzler oluştururken belirli görüntü dosyası türleri ne zaman kullanılmalıdır?
Güç ve zayıf yönleri nelerdir?
PNG kayıplı iken PNG ve GIF'in kayıpsız olduğunu biliyorum.
Peki PNG ve GIF arasındaki ana fark nedir?
Neden birini diğerine tercih etmeliyim? SVG nedir ve ne zaman kullanmalıyım?
Her bir pikseli umursamıyorsanız, "en hafif" olanı olduğu için her zaman JPEG mi kullanmalısınız?
Yanıtlar:
Birkaç anahtar faktörün farkında olmalısınız ...
İlk olarak, iki tür sıkıştırma vardır: Kayıpsız ve Kayıplı .
Ayrıca farklı renk derinlikleri (paletler) vardır: Dizine alınmış renk ve Doğrudan renk .
BMP - Kayıpsız / Endeksli ve Doğrudan
Bu eski bir biçim. Kayıpsızdır (kaydetmede görüntü verisi kaybolmaz), ancak hiç sıkıştırma yoktur veya hiç yoktur, yani BMP olarak kaydetmek ÇOK büyük dosya boyutlarına neden olur. Hem Endeksli hem de Doğrudan paletleri olabilir, ancak bu küçük bir teselli. Dosya boyutları o kadar büyük ki, hiç kimse gerçekten bu formatı kullanmıyor.
Şunun için iyi: Gerçekten bir şey yok. BMP'nin üstünlük sağladığı veya başka biçimlerde daha iyi olmadığı hiçbir şey yoktur.
Animasyon - Kayıpsız / Yalnızca Endeksli
GIF kayıpsız sıkıştırma kullanır, yani görüntüyü tekrar tekrar kaydedebilir ve hiçbir veri kaybetmezsiniz. Dosya boyutları BMP'den çok daha küçüktür, çünkü iyi sıkıştırma gerçekten kullanılır, ancak yalnızca Dizine Alınmış paleti saklayabilir. Bu , çoğu kullanım durumunda dosyada en fazla 256 farklı renk olabileceği anlamına gelir . Bu oldukça küçük bir miktar gibi geliyor ve öyle.
GIF görüntüleri de canlandırılabilir ve saydam olabilir.
Şunun için iyi: Logolar, çizgi çizimleri ve küçük olması gereken diğer basit resimler. Sadece gerçekten web siteleri için kullanılır.
JPEG - Kayıplı / Doğrudan
JPEG görüntüleri, insan gözünün fark etmeyeceği bilgileri kaldırarak ayrıntılı fotoğraf görüntülerini mümkün olduğunca küçük yapmak için tasarlanmıştır. Sonuç olarak bu bir Kayıp biçimidir ve aynı dosyayı tekrar tekrar kaydetmek zamanla daha fazla verinin kaybolmasına neden olacaktır. Binlerce renk paletine sahiptir ve fotoğraflar için harikadır, ancak kayıplı sıkıştırma logolar ve çizgi çizimleri için kötü olduğu anlamına gelir: Sadece bulanık görünmekle kalmayacak, aynı zamanda bu görüntüler GIF'lere kıyasla daha büyük bir dosya boyutuna sahip olacak!
Şunun için iyi: Fotoğraflar. Ayrıca, degradeler.
PNG-8 - Kayıpsız / Endeksli
PNG daha yeni bir biçimdir ve PNG-8 (PNG'nin dizine eklenen sürümü) GIF'lerin yerine iyi bir alternatiftir. Ne yazık ki, birkaç dezavantajı var: Öncelikle GIF gibi animasyonları destekleyemez (iyi olabilir, ancak her tarayıcı tarafından desteklenen GIF animasyonunun aksine sadece Firefox destekliyor gibi görünüyor). İkincisi, IE6 gibi eski tarayıcılarda bazı destek sorunları var. Üçüncüsü, Photoshop gibi önemli yazılımların biçimi çok zayıf bir şekilde uygulanmaktadır. (Lanet olsun, Adobe!) PNG-8, GIF'ler gibi yalnızca 256 renk depolayabilir.
Şunun için iyi: PNG-8'in GIF'lerden daha iyi yaptığı ana şey, Alfa Şeffaflığı'nı desteklemektir.
PNG-24 - Kayıpsız / Doğrudan
PNG-24, Kayıpsız kodlamayı Doğrudan renkle (tıpkı JPEG gibi binlerce renk) birleştiren harika bir biçimdir. Bu konuda BMP'ye çok benziyor, ancak PNG aslında görüntüleri sıkıştırıyor, bu yüzden çok daha küçük dosyalara neden oluyor. Ne yazık ki PNG-24 dosyaları hala JPEG'lerden (fotoğraflar için) ve GIF / PNG-8'lerden (logolar ve grafikler için) daha büyük olacaktır, bu yüzden gerçekten kullanmak istiyorsanız hala düşünmeniz gerekir.
PNG-24'ler sıkıştırma yaparken binlerce renge izin verse de, JPEG görüntülerinin yerini alması amaçlanmamıştır. PNG-24 olarak kaydedilen bir fotoğraf, görünür kalitede çok az gelişme ile eşdeğer bir JPEG görüntüsüne göre en az 5 kat daha büyük olacaktır. (Tabii ki, dosya boyutu konusunda endişe duymuyorsanız ve alabileceğiniz en kaliteli görüntüyü elde etmek istiyorsanız, bu istenen bir sonuç olabilir.)
PNG-8 gibi PNG-24 de alfa saydamlığını destekler.
SVG - Kayıpsız / Vektör
Şu anda popülaritesi artmakta olan bir dosya türü, bir vektör dosyası biçiminde (yukarıdakilerin tümü raster ) yukarıdakilerden farklı olan SVG'dir . Bu, aslında piksel yerine çizgiler ve eğrilerden oluştuğu anlamına gelir. Bir vektör görüntüsünü yakınlaştırdığınızda, yine de bir eğri veya çizgi görürsünüz. Raster görüntüyü yakınlaştırdığınızda pikselleri görürsünüz.
Örneğin:
Bu, SVG'nin Retina ekranlarda veya farklı boyutlarda keskinliğini korumak istediğiniz logolar ve simgeler için mükemmel olduğu anlamına gelir. Ayrıca, küçük bir SVG logosunun görüntü kalitesinde bozulma olmadan çok daha büyük (daha büyük) boyutta kullanılabileceği anlamına gelir - raster formatlarına sahip ayrı bir daha büyük (dosya boyutu açısından) dosya gerektirecek bir şey.
SVG dosya boyutları, görsel olarak çok büyük olsalar bile, genellikle küçüktür, bu da harikadır. Bununla birlikte, kullanılan şekillerin karmaşıklığına bağlı olduğunu akılda tutmaya değer. SVG'ler, eğri ve çizgilerin çizilmesinde matematiksel hesaplamalar bulunduğundan raster görüntülerden daha fazla hesaplama gücü gerektirir. Logonuz özellikle karmaşıksa, kullanıcının bilgisayarını yavaşlatabilir ve hatta çok büyük bir dosya boyutuna sahip olabilir. Vektör şekillerinizi olabildiğince basitleştirmeniz önemlidir.
Ayrıca, SVG dosyaları XML olarak yazılmıştır ve bu nedenle bir metin düzenleyicide (!) Açılabilir ve düzenlenebilir. Bu, değerlerinin anında manipüle edilebileceği anlamına gelir. Örneğin, bir web sitesindeki bir SVG simgesinin rengini değiştirmek için JavaScript'i kullanabilirsiniz, tıpkı bazı metinlerde olduğu gibi (yani ikinci bir resme gerek yoktur) veya hatta bunları canlandırabilirsiniz.
Hepsi, logolar veya grafikler gibi basit düz şekiller için en iyisidir.
Umarım bu yardımcı olur!
JPEG, her türlü resim (hatta çoğu) için en açık renk değildir. Köşeler ve düz çizgiler ve düz "dolgular" (düz renk blokları), sıkıştırma düzeyine bağlı olarak bulanık görünecek veya içlerinde kalıntılar olacaktır. Kayıplı bir biçimdir ve en iyi sonuçları net bir şekilde göremediğiniz fotoğraflar için çalışır. Düz çizgiler (çizimler ve çizgi romanlar gibi) PNG'de çok güzel sıkıştırır ve kayıpsızdır. GIF yalnızca şeffaflığın IE6'da çalışmasını veya animasyon olmasını istediğinizde kullanılmalıdır. GIF sadece 256 renk paletini destekler, aynı zamanda kayıpsızdır.
Temel olarak görüntü formatına karar vermenin bir yolu:
Yorumlandığı gibi, neyin hak kazanacağından emin değilseniz, her formatı farklı sıkıştırma oranlarıyla deneyin ve resmin kalitesini ve boyutunu tartın ve hangisinin en iyi olduğunu düşündüğünüzü seçin. Sadece basit kurallar veriyorum.
GIF'e göre birkaç avantajı olduğu için genellikle PNG ile giderim. GIF üzerinde patent kısıtlamaları vardı, ancak bunların süresi doldu.
GIF'ler, sınırlı sayıda renge sahip keskin kenarlı çizgi resimler (logolar gibi) için uygundur. Bu, formatın, iyi tanımlanmış kenarları olan düzgün renkte düz alanları tercih eden kayıpsız sıkıştırmadan yararlanır (JPEG'in aksine, düzgün degradeleri ve daha yumuşak görüntüleri destekler).
GIF'ler küçük animasyonlar ve düşük çözünürlüklü film klipleri için kullanılabilir.
GIF görüntü paletindeki 256 renk genel sınırlaması göz önüne alındığında, genellikle dijital fotoğrafçılık için bir format olarak kullanılmaz. Dijital fotoğrafçılar, fotoğrafları sıkıştırmak için daha uygun olan TIFF, RAW veya kayıplı JPEG gibi daha geniş bir renk yelpazesi üretebilen görüntü dosyası formatlarını kullanır.
PNG formatı, daha iyi sıkıştırma teknikleri kullandığından ve 256 renk sınırına sahip olmadığı için GIF görüntülerine popüler bir alternatiftir, ancak PNG'ler animasyonları desteklemez. Her ikisi de PNG'den türetilen MNG ve APNG biçimleri animasyonları destekler, ancak yaygın olarak kullanılmaz.
JPEG, keskin kenarlar vb. Etrafında düşük kaliteye sahip olacaktır ve bu nedenle çoğu web grafiği için uygun değildir. Fotoğraflarda mükemmeldir.
GIF ile karşılaştırıldığında PNG daha iyi sıkıştırma, daha büyük palet ve saydamlık dahil daha fazla özellik sunar. Ve kayıpsız.
GIF 256 renkle sınırlıdır ve gerçek saydamlığı desteklemez. Daha iyi sıkıştırma ve özellikler sunduğu için GIF yerine PNG kullanmalısınız. PNG, logolar, simgeler vb.Gibi küçük ve basit görüntüler için mükemmeldir.
JPEG, fotoğraf gibi karmaşık görüntülerle daha iyi sıkıştırmaya sahiptir.
Gerçek renkleri göstermek için GIF görüntülerini kullanmak için yapılabilecek bir kesmek var. 0 kare gecikmeli 256 renk paletli kareye sahip bir GIF animasyonu hazırlayabilir ve animasyonu yalnızca bir kez gösterilecek şekilde ayarlayabilirsiniz. Böylece, tüm kareler aynı anda gösterilebilir. Sonunda, gerçek bir renkli GIF görüntüsü oluşturulur.
Birçok yazılım bu tür GIF görüntülerini övme yeteneğine sahiptir. Ancak, çıktı dosyasının boyutu bir PNG dosyasından daha büyük. Gerçekten gerekliyse kullanılmalıdır.
png, gif'ten daha geniş bir renk paletine sahiptir ve png olmasa da gif mülktür. gif animasyonlar yapabilir, normal-png yapamaz. png-transparency sadece IE6'dan daha yeni tarayıcılar tarafından desteklenir, ancak bu sorun için bir Javascript düzeltmesi vardır. Her ikisi de alfa saydamlığını destekler. Genel olarak, fotoğraflar, ekran görüntüleri veya benzerleri için jpeg kullanırken çoğu web sitesi için png kullanmanız gerektiğini söyleyebilirim, çünkü png sıkıştırması thoose'da çok iyi çalışmıyor.
GIF, görüntü başına 256 renk paletine dayanır (en azından temel enkarnasyonunda). PNG "TrueColour" yapabilir, yani kutunun dışında 16,7 Milyon renk. Kayıpsız PNG, kayıpsız GIF'lerden daha iyi sıkıştırır. GIF "ikili" şeffaflık yapabilir (% 0 opaklık veya% 100 opaklık). PNG alfa asetatlarını işleyebilir.
Sonuçta, Alfa şeffaf görüntüleri kullanmanız ve IE6'yı desteklemeniz gerekmiyorsa, vektör çizimler ve benzeri için piksel mükemmel görüntülere ihtiyacınız olduğunda PNG muhtemelen daha iyi bir seçimdir. JPG fotoğraflar için rakipsizdir.
2018'den itibaren birkaç yeni formatımız, önceki formatlar için daha iyi destek ve görüntüler yerine video kullanmanın akıllıca saldırıları var.
Fotoğraflar için
jpg - hala en çok desteklenen görüntü formatı.
webp- Google'dan yeni biçim . Tarayıcı desteği büyük olmasa da iyi bir potansiyel .
Simgeler ve grafikler için
svg- her ne zaman mümkünse. Retina ekranlarında iyi ölçeklenir, metin editörlerinde düzenlenebilir ve DOM'a yüklenmişse JS / CSS ile özelleştirilebilir.
png- Raster grafikler içeriyorsa (örn. photoshop'ta oluşturulduğunda). Bu kullanım durumunda çok önemli olan şeffaflığı destekler.
Animasyonlar İçin
svg- artı vektör grafikleri için css animasyonları. Svg + css animasyonlarının tüm avantajları.
gif - hala en çok desteklenen animasyonlu görüntü formatı.
mp4- animasyonlu görüntüler aslında kısa video klipler ise. Twitter / Whatsapp gifleri mp4'e dönüştürür.
apng- iyi tarayıcı desteği (yani IE, Edge yok), ancak bunu oluşturmak gifler kadar basit değildir.
webp- mp4 kullanmaya yakın. Kötü destek
Bu, çeşitli animasyonlu görüntü formatlarının güzel bir karşılaştırmasıdır .
Son olarak, format hangisi olursa olsun, onu optimize ettiğinizden emin olun - Her format için araçlar vardır (örn. SVGO, Guetzli, OptiPNG vb.) Ve önemli ölçüde bant genişliği tasarrufu sağlayabilir.
Ana fark GIF patentlidir ve biraz daha yaygın olarak desteklenir. PNG açık bir özelliktir ve IE6'da alfa saydamlığı desteklenmez. IE7'de destek geliştirildi, ancak tam olarak düzeltilmedi.
Dosya boyutlarına gelince, GIF'in daha küçük bir varsayılan renk paleti vardır, bu nedenle ilk bakışta daha küçük dosya boyutları olma eğilimindedirler. PNG dosyaları daha büyük bir varsayılan palete sahiptir, ancak renk paletlerini küçültebilirsiniz, böylece yaptığınızda GIF'den daha küçük bir dosya boyutuyla sonuçlanırlar. Sorun yine bu özelliğin Internet Explorer'da desteklenmediğidir.
Ayrıca, PNG'ler alfa saydamlığını destekleyebildiğinden, ikili saydamlık dışında bir saydamlık varyasyonu istiyorsanız tek seçenektir.
JPEG'i seçerseniz ve bir web sitesi için resimlerle uğraşıyorsanız , serbestçe kullanılabilen Google Guetzli algısal kodlayıcıyı düşünmek isteyebilirsiniz . Deneyimlerime göre, sabit bir kalite için Guetzli, standart JPEG kodlama kitaplıklarından daha küçük dosyalar üretirken, JPEG standardıyla tam uyumluluğu koruyor (böylece resimleriniz ortak JPEG resimleriyle aynı uyumluluğa sahip olacak).
Tek dezavantajı Guetzli kodlamak için çok zaman alır olmasıdır .. ama bu faydaları sonsuza kadar kalır iken, web sitesi için görüntü hazırlarken, sadece bir kez yapılır! Daha küçük resimlerin indirilmesi daha az zaman alır, bu nedenle web sitenizin hızı günlük kullanımda artar.
GIF, 8 bit (256 renk) paletine sahiptir; burada PNG, 24 bit renk paletine kadar. Yani PNG daha fazla rengi destekleyebilir ve elbette algoritma sıkıştırmayı destekler
As olduğunu, @aarjithn tarafından işaret WebP fotoğraflarını saklamak için bir codec.
Bu aynı zamanda animasyonları depolamak için bir codec bileşenidir (animasyonlu görüntü dizisi). 2020'den itibaren, çoğu ana tarayıcı onun için kutudan çıkmış desteğe sahiptir ( uyumluluk tablosu ). Not için WIC bir eklenti mevcuttur.
Codec Bir video dayanır, çünkü GIF göre bazı avantajları vardır VP8 ve GIF 2'ye bunu genişler 256 renge sınırlar GIF, daha geniş bir renk aralığına sahiptir 24 hala alan önemli miktarda tasarruf = 16777216 renk.