Hangi web grafik formatlarını kullanmalı?

Web siteleri JPEG, GIF, PNG, SVG formatındaki grafikleri içerebilir. Hangileri ne zaman kullanılmalı?

JPG ne zaman kullanılır?

• fotografik görüntüler
• sıkıştırma önemli olmadığında

PNG ne zaman kullanılır?

• şeffaflığa ihtiyacınız olduğunda
• ne zaman desen varsa (arka planlar)

GIF ne zaman kullanılır?

• geriye doğru uyumlu animasyona ihtiyacınız olduğunda *
• bir görüntü esasen yalnızca bir avuç renkten oluştuğunda (2-16) **
• şeffaflığa ihtiyacınız olmadığında ve desenleme olduğunda (png tercih edilse de)

_{* Hemen hemen tüm tarayıcılar için CSS animasyonunun uygun bir seçenek olarak yükselmesiyle .GIF formatının kullanımı web animasyonunda go-to-go formatıdır. .jpg, .pngve .gifhepsi CSS kullanımı ile "animasyonlu" bir özelliğe sahip olacak şekilde ayarlanabilir. Animasyonlu gif rağmen olabilecek bazı senaryoları web tasarımında çekici kullanılabilir sadece bunları önlemek için en iyi olma eğilimindedir, böylece, istisnalar, nadirdir.}

_{** ( .gifresimler paletteki yalnızca 256 renkle sınırlandırılmıştır.)}

(yinelenen sorudan taşındı)

Bu tamamen saklamak istediğiniz görüntünün türüne bağlıdır.

• PNG , "vektör benzeri" bitmap grafikler için en uygun kayıpsız bir sıkıştırma formatıdır (yani aynı renkte ve net bir şekilde tanımlanmış kenarları olan geniş, düzenli alanları olan grafikler; açık metin içeren grafikler).

• SVG , vektör grafikleri ( en azından piksel koleksiyonları yerine geometrik elemanlar koleksiyonları) içermek için en uygun vektör formatıdır . SVG sınırsızca ölçeklendirilebilirken, bitmap grafikleri genişletildiğinde kalitesini kaybeder.

• JPG , kayıplı bir sıkıştırma formatıdır (diğer şeylerin yanı sıra, depolama alanından tasarruf etmek için görüntüdeki insan gözüyle görünmeyen nüansları da kaldırır). Fotoğraflar için en uygun olanı; Sıkıştırma yöntemi nedeniyle, vektör çizimleri veya metinler için uygun değildir.

Tarayıcı Uyumluluğu:

• PNG Grafikleri, PNG alfa saydamlığı içeriyorsa (saydam bölümler düz gri olarak oluşturulur) IE 6 ve PNG 100 opaklığa sahip bir HTML öğesinin içindeyse IE'nin tüm sürümleri hariç olmak üzere tarayıcılarda desteklenir % (ancak bu bir son durum).

• SVG her zaman bir seçenek değildir, çünkü şu anda tarayıcı desteği% 100 değildir . Normal bir <img>etikete başka davranışsal farklılıklar da olabilir . Bunu sadece ne yaptığınızı biliyorsanız kullanın.

• Standart JPG, CMYK yerine RGB modunda kaydedildiği sürece tüm tarayıcılarda desteklenir (eğer programınız ayrım yapmazsa, muhtemelen varsayılandır).

Birkaç önemli faktörün farkında olmalısın ...

İlk olarak, iki tür sıkıştırma vardır: Kayıpsız ve Kayıplı .

• Kayıpsız , görüntünün daha küçük hale getirildiği, ancak kaliteye zarar vermeyeceği anlamına gelir.
• Kayıp , görüntünün (hatta) daha küçük, ancak kaliteye zarar verdiği anlamına gelir. Görüntüyü Lossy biçiminde tekrar tekrar kaydettiyseniz, görüntü kalitesi giderek daha kötüleşir.

Ayrıca farklı renk derinlikleri de vardır (paletler): Dizinlenmiş renk ve Doğrudan renk .

• Dizine alınmış, görüntünün yalnızca Renk Haritası adı verilen bir şeyde yazar tarafından kontrol edilen sınırlı sayıda rengi (genellikle 256) saklayabilmesi anlamına gelir
• Doğrudan , yazar tarafından doğrudan seçilmeyen binlerce rengi saklayabileceğiniz anlamına gelir

BMP - Kayıpsız / Endeksli ve Doğrudan

Bu eski bir formattır. Kayıpsızdır (kaydetme sırasında hiçbir görüntü verisi kaybolmaz) ancak sıkıştırma işlemi çok az veya hiç yoktur, bu da BMP'nin ÇOK büyük dosya boyutlarına neden olacağı anlamına gelir. Hem Dizine Alınmış hem de Direkt olarak paletlere sahip olabilir, ancak bu küçük bir tesellidir. Dosya boyutları o kadar gereksizdir ki hiç kimse bu formatı gerçekten kullanmaz.

Şunun için iyi: Gerçekten bir şey yok. BMP'nin geliştirdiği hiçbir şey yok veya başka biçimlerde daha iyi bir şekilde yapılmadı.

GIF - Kayıpsız / Yalnızca Dizine Eklendi

GIF kayıpsız sıkıştırma kullanır, yani görüntüyü tekrar tekrar kaydedebilirsiniz ve hiçbir zaman veri kaybetmezsiniz. Dosya boyutları BMP'den çok daha küçüktür, çünkü iyi sıkıştırma gerçekte kullanılır, ancak yalnızca Dizine Alınan bir paleti depolayabilir. Bu , çoğu kullanım durumunda , dosyada yalnızca maksimum 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 saydamlığa sahip olabilir.

Şunun için iyi: Logolar, çizimler ve küçük olması gereken basit resimler. Sadece gerçekten web siteleri için kullanılır.

JPEG - Kayıplı / Doğrudan

JPEG görüntüler, insan gözünün farkına varmayacağı bilgileri kaldırarak ayrıntılı fotoğraf görüntüleri mümkün olduğunca küçük yapmak için tasarlanmıştır. Sonuç olarak, Kayıplı bir formattır ve aynı dosyayı tekrar tekrar kaydetmek zaman içinde daha fazla veri kaybına neden olur. Binlerce renkten oluşan bir palete sahiptir ve fotoğraflar için mükemmeldir, 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 kalmaz, aynı zamanda bu tür görüntüler de GIF'lere kıyasla daha büyük bir dosya boyutuna sahip olur!

Şunun için iyi: Fotoğraflar. Ayrıca, gradyanlar.

PNG-8 - Kayıpsız / Endeksli

PNG daha yeni bir formattır ve PNG-8 (PNG'nin dizine alınmış sürümü) gerçekten GIF'ler için iyi bir alternatiftir. Ne yazık ki, birkaç dezavantajı var: Birincisi GIF'in canlandırdığı animasyonları destekleyemiyor (her tarayıcı tarafından desteklenen GIF canlandırmasının aksine, yalnızca Firefox bunu 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 formatı çok zayıf bir şekilde uygular. (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ığı temel şey Alfa Şeffaflığı için destek olmak.

Önemli Not: Photoshop, en son sürümlerinde alfa saydamlığı için destek ekledi. Eski bir tanesine sahipseniz, saydamlıklarını korurken Photoshop PNG-24'ü PNG-8 dosyalarına dönüştürmenin yolları vardır. Bir yöntem PNGQuant , bir diğeri de dosyalarınızı Fireworks ile kaydetmektir .

PNG-24 - Kayıpsız / Doğrudan

PNG-24, Kayıpsız kodlamayı Direct renkle (JPEG gibi, binlerce renk) birleştiren mükemmel bir formattır. Bu konuda BMP'ye çok benziyor, PNG'nin aslında görüntüleri sıkıştırması dışında, daha küçük dosyalarda sonuçlanıyor. Ne yazık ki, PNG-24 dosyaları JPEG, GIF ve PNG-8 dosyalarından çok daha büyük olacaktır, bu yüzden gerçekten bir tanesini kullanmak isteyip istemediğinizi düşünmeniz gerekir.

PNG-24'ler, sıkıştırma sırasında binlerce renge izin vermesine rağmen, JPEG görüntülerini değiştirmek için tasarlanmamıştır. PNG-24 olarak kaydedilen bir fotoğraf, görünür kalitede çok az iyileştirme ile eşdeğer bir JPEG görüntüsünden en az 5 kat daha büyük olacaktır. (Elbette, dosya boyutuyla ilgilenmiyorsanız ve alabileceğiniz en iyi kalitede görüntü elde etmek istiyorsanız, bu istenen bir sonuç olabilir.)

PNG-8 gibi PNG-24 de alfa geçirgenliği destekler.

SVG - Kayıpsız / Vektör

Şu anda popülaritesi artmakta olan bir dosya türü SVG'dir; bu, bir vektör dosyası formatı olduğu için yukarıdakilerin hepsinden farklıdır (yukarıdakilerin tümü rasterdir ). Bu aslında piksel yerine çizgi ve eğrilerden oluştuğu anlamına gelir. Bir vektör görüntüsünü yakınlaştırdığınızda, hala bir eğri veya çizgi görüyorsunuz. Raster bir görüntüyü yakınlaştırdığınızda, pikselleri göreceksiniz.

Örneğin:

Bu, SVG'nin Retina ekranlarında veya farklı boyutlarda keskinliği korumak istediğiniz logolar ve simgeler için mükemmel olduğu anlamına gelir.

Ek olarak, SVG dosyaları XML kullanılarak yazılmıştır ve böylece bir metin düzenleyicide açılabilir ve düzenlenebilir, isterseniz anında yönetilebilir. Örneğin, bir web sitesinde bir SVG simgesinin rengini değiştirmek için biraz metin kullandığınız gibi (örneğin, ikinci bir görüntüye gerek kalmadan) JavaScript kullanabilirsiniz.

Umarım bu yardımcı olur!

JPG:

Avantajları:

• Birçok farklı sıkıştırma seviyesi mevcut
• Tüm resim düzenleyicileri ile kolayca işlenebilir

Uygunsuzluklar:

• Sıkıştırma eserleri

Kullanır:

• Çok sayıda renkli büyük fotoğraflar veya görüntüler
• Yüksek sıkıştırma gerektiğinde

PNG:

Avantajları:

• Alfa ile şeffaflık!
• Bir sürü renk
• Jpg yerini alabilir

Uygunsuzluklar:

• JPG'den daha az sıkıştırma (ancak bu kadar değil)
• IE6 ile uyumsuz (ve inanıyorum 7) - bunun için yamalı veya kesmeli kullanmalı. Ama kim umursar? A kullanmalısınız;)

Kullanır:

• Çok renkli küçük veya orta fotoğraflar / görüntüler
• Degrade saydamlığı istiyorsanız A kullanmanız gerekir
• Simgeler
• logolar

GIF:

Avantajları:

• Animasyonlu olabilir
• Sadece biraz renk kullanırsanız çok hafif (8 - 16 veya 32 farklı renk gibi)
• şeffaflık

Uygunsuzluklar:

• 255'ten fazla renk olamaz.
• Hareketli gif, insanların kaçmasına neden olabilir
• Şeffaflık için alfa yok (saydam mı değil mi!)

Kullanır:

• Hareketli gif (En çok bültenlerde onları kullanırım)
• Simgeler
• Animasyonlu favicon \ o /
• logolar

Web siteleri JPEG, GIF, PNG, SVG formatındaki grafikleri içerebilir. Hangileri ne zaman kullanılmalı?

Fotoğraflar için:

Saydamlığa gerek yoksa JPEG. Saydamlık gerektiren fotoğraf grafikleri için PNG.

% 100 doğru olmasa da, iyi bir kuraldır. Diğer biçimler hakkında daha fazla bilgi edinmek için bu sorunun diğer yanıtlarını inceleyin. Ayrıca, saydamlık olmadığında görüntüleri dijital olarak görüntülemek için hangi raster görüntü formatının daha iyi olduğunu görün; JPEG veya PNG? ve daha fazla bilgi edinmek için jpeg , png , gif & svg gibi dosya formatı etiketlerimizin bir seçimi .

Grafikler için:

PNG / JPEG Geri Dönüşlü SVG.

Bugün ve yaşta SVG vermemek için kesinlikle hiçbir neden yoktur. Neredeyse herhangi normal bir görüntüyle aynı şekilde ve çok yönlü olarak uygulanırlar.

Bu nedenle, herhangi bir modern web tasarımcısı için iş akışı tamamen değişmedi, güncellendi. Grafikler için PNG'leri ve JPEG'leri hala hazırlıyor ve sunuyorsunuz, ancak bunlar yalnızca SVG'nin çalışmadığı durumlarda geri dönüşlerdir.

SVG nedir?

SVG kısaltmasıdır Scalable Vector Graphic. Çok teknik olmadan, SVG'ler ve diğer piksel tabanlı formatlar arasındaki fark, grafik kompozisyonu için verilerin matematiksel hesaplamalar olarak saklanmasıdır. Bir tarayıcı bir SVG'yi açtığında, SVG'yi oluşturmak için hesaplamalar yapmak zorundadır. Daha eski tarayıcılar bu hesaplamaları yapma ya da SVG'leri kullanma işlevselliğine sahip değildir, ayrıca, eski bilgisayarlar 10 yıl önce kullanılmış olsalar bile (ki yapamadıkları) bir SVG ağır web sayfası oluşturmak için mücadele etmiş olabilirler. SVG için veriler onaltılık formatta (base-16) saklanır ve piksel verilerinin ikili depolanmasına kıyasla çok küçük dosya boyutlarında optimize edilmesini sağlar.

Geri dönüş tekniğine nasıl ulaşılacağı hakkında daha fazla bilgi edinmek için bazı kaynaklar:

1. Bir retina ağı için SVG kullanımında uzmanlaşma, PNG komut dosyasıyla geri dönüşler

2. Şeffaf veri URI'leri ile performans ve aşamalı gelişim için SVG iş akışını gözden geçirme

3. CSS Püf Noktaları - SVG Fallbacks

İlk bağlantıdan kopyalanan aşağıdaki JavaScript pasajı, tüm tarayıcılarda olmasa da çoğu durumda SVG desteğini tespit etmek ve PNG geri dönüşlerini sağlamak için dosya adını değiştirmek için tek ihtiyacınız olan şeydir.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

SVG ne zaman kullanılır?

• Olabildiğince, en küçük dosya boyutu ve çözünürlükten bağımsız olduğu zaman, herhangi bir cihaz piksel oranını kaldırabilir (örneğin, retina ekranları).
• Sanatınız vektör dosyası formatları için uygun olduğunda (özellikle simgeler)
• Yalnızca modern tarayıcıları hedefleme lüksüne sahipseniz (SVG desteği bazı tarayıcılar için nispeten yenidir)

Simge yazı tipleri ne zaman kullanılır?

• Kapsamlı bir simge setine ihtiyacınız olduğunda
• Ne zaman, SVG gibi, vektör dosya formatlarının faydalarını istediğinizde
• Yalnızca modern tarayıcıları hedefleme lüksüne sahipseniz (web font desteği bazı tarayıcılar için nispeten yenidir)

</DA01>

SVG neden en iyi seçenek?

• Tek bir dosyadan herhangi bir boyuta güzel bir şekilde ölçeklendirin ( @2x.jpgretina ekranları için hizmet vermeye veya grafiği genişletmeye gerek kalmaz )

• JPEG ve PNG'den çok daha küçük dosya boyutları

• Neredeyse hiçbir zaman logodaki kaliteden ödün vermek zorunda kalmazsınız

• Duyarlı tasarımı birçok yönden kolaylaştırır

notlar

• Destek, satır içi SVG'ler için daha az yaygındır, bu nedenle güvenlik için dosyalara şu anda görüntü etiketleriyle bağlantı vermek en iyisidir. (Grafiği başka bir yerde, yani gezinme simgelerinde yeniden kullanacaksanız, tarayıcının önbelleğe alması ve diğer sayfaların yüklenmesinde zaman kazandırması için yine de harici olarak bağlamak istiyorsunuz.)

• IE, SVGZSVG grafikleri için mevcut olan sıkıştırılmış formatı desteklememektedir . Tarayıcılar ve en son sürümler arasında en iyi uyumluluk için SVG 1.0, bu noktada kullanmak en iyisidir .

• SVG ile sprite yapraklarını diğer görüntü formatlarında yaptığınız gibi yapabilirsiniz, ancak her görüntünün x ve y koordinatlarını tanımlamak için gerçek piksel değerlerini kullanmak yerine, yüzdelik tabanlı değerler kullanın.

  Yüzde değerleri yeterince doğru olmadığında bu durumlardan ne haber?

  Sprite sayfasını hem genişliği hem de yüksekliği 100 ile bölmek ve tam sayıları veya en fazla 1 ondalık basamaklı sayıları elde etmek amacıyla oluşturmalısınız. Örnek olarak, 10px x 10pxbir grafik sayfasında 7 x simgesi birlikte düzenliyorsanız , olduğu gibi bir tuval oluşturmayın 70px x 10px.

  Neden? Çünkü 100'ü 7'ye böldüğünüzde 14.285714285714285714285714285714, yuvarlatılmış bir yüzde olarak kesinlikle bir yerde bazı kusurlu matematiğe yol açacaksınız.

  Bunun yerine, bir 80px x 10pxtuval oluşturun ve boş% 12.5 için endişelenmeyin. Simgeler tam olarak% 12,5'lik artışlarla olacak ve bunun söylenmeye gerek yok.

Çok fazla renkli fotoğraflar veya görüntüler için .jpeg kullanmalısınız. .Gif dosya tipi, hareketli görüntüler için veya saydamlığın gerekli olduğu yerlerde kullanışlıdır, ancak kullanımda azalmaktadır. En popüler format .png'dir ve bu da .gif dosya türünden alfa saydamlığı ve daha fazla renk aralığı sunabilir. Daha ayrıntılı bir genel bakış için Jonathan Snook'un Hangi Görüntü Formatının En İyi Olduğu adlı makalesine göz atın .

Güzel bir formül fotoğraflarda JPEG kullanmak ve diğer her şey için PNG olabilir.

Tabii ki, alfa saydamlığına ihtiyaç duymayan ve 256'dan az renge sahip grafikleriniz varsa, GIF size bir miktar bant genişliği kazandırabilir ancak kesinlikle bu yolda.

PNG'yi hemen hemen her şey için kullanıyorum, çünkü JEPG'nin yaptığı sıkıştırma eserleri yok ve bugünlerde evrensel olarak uyumlu (bugünlerde pek iyi sonuç vermeyen birkaç site editörü gördüm) Homestead'in SiteBuilder yazılımının masaüstü sürümü, ancak bununla ilgili).

Görüntünüzü, elde etmek istediğiniz sıkıştırma / kalite düzeyinde temel olarak seçmelisiniz.

Web, bilgi indirme hızı ile ilgilidir ve daha küçük bir resim boyutu ise, sayfa yükleme hızı için iyidir.

JPG : Milyonlarca renkli görüntüler için (fotoğrafçılık)

PNG ve GIF : Şeffaflık ve az miktarda renk için. Yalnızca 64/128 farklı renk altında, ancak genellikle 256'nın altında kullanıyorum. (Simgeler, raster olması gereken vektör görüntüleri, yüksek kontrast renkli, az renkli gradyanlar)

PNG ve GIF arasında nasıl seçim yapılır?

Her şeyden önce Sıkıştırma / kalite optimizasyonunu kontrol edin ve daha az ağırlık için kimin daha iyi sonuç vereceğini seçin. Hala geniş GIF kullanıyorum ve bazen aynı görüntüler için PNG'den daha iyidir. Bir biçimi diğerine ayırmayın, yalnızca optimizasyonunuz için daha uygun görünen formatı kontrol edin.

• GIF'yi seçin: 256 renkten fazla olmayan animasyonlu görüntüler için
• Animasyona ihtiyacınız yoksa, PNG'yi seçebilirsiniz. Doğru PNG'yi Seçti: 2 tür 8 bit ve 24 bit var. 8bit , kalite / sıkıştırma için animasyon kullanmadan GIF'in daha iyi bir sürümü olma eğilimindedir (ama her zaman dediğim gibi, Web için kaydettiğinizde kontrol edin). 24bit sıkıştırması yoktur (bu nedenle bazı özel grafik efektleri için pek kullanılmaz) ve sayfaya şeffaflık kullanmak için alfa ölçütü vardır (sayfaya özel bir filtre veya .htc davranışı uygulamıyorsanız, Eski IE tarayıcıları bunu desteklemiyordur). ).

Çeşitli makalelerden görebiliyorum, web tasarımcılarının % 90'ı hala PNG'nin sadece kayıpsız bir formatta olduğunu düşünüyor . Birçok profesyonel PNG-8'in varlığını bile bilmiyor.

Fakat açıkçası PNG-8, PNG-32 yerine web için kullanmaları gereken şey. Çünkü kabul edilebilir kalitede 2x-5x daha küçük dosya boyutları sunar.

Bazen bir görüntü için hangi sıkıştırmanın daha iyi olduğuna karar vermek zor olabilir. Örneğin, bir fotoğraf değilse de, birçok renk ve degradeye sahipse. Bu araç her iki kayıp formatını görsel olarak karşılaştırmanıza ve en iyi değişkeni seçmenize izin verir.

İşte kayıp PNG ve JPEG formatlarını karşılaştırmak için güzel bir araç: PNG vs JPEG

Ana Web grafik formatları GIF, JPG ve PNG'dir. Farklılıkları bilmek ve her resim için en iyi formatı seçmek önemlidir, böylece resimlerin iyi görünmesi ve olabildiğince kompakt olması için site ziyaretçinizin ekranında hızlı bir şekilde görünmeleri gerekir.

GIF - Grafik Bilgi Formatı

GIF grafik formatı, yalnızca birkaç renkli görüntüler için en iyisidir: grafikler, grafikler veya grafik olarak ayarlanan metinler. Ne kadar az renk kullanırsanız, o kadar verimli GIF dosyaları da olur. GIF dosyaları ...

• 256 renge kadar içerebilir.

• Saydamlık adı verilen ve 256 renkten bir rengin saydam olarak ayarlandığı bir özelliği destekleyin. Bu, grafiklerin sanki sanki sanki sanki Web sayfasının arka planını göstermesine izin vererek görünmez olduğu için sanki sanki sanki sanki sanki sanki sanki sanki içeri girmişler.

• canlandırılabilir. Tek bir dosyanın içinde birçok resim çerçevesi ve her karenin ne kadar süreyle gösterilmesi gerektiğini belirten bir dizin bulunur. Animasyonlu GIF standart bir görüntü dosyası olarak değerlendirilir, bu nedenle standart etiketle yüklenir.

• kayıpsızdır, bu, görüntü kalitesinin sıkıştırma işlemi tarafından düşürülmediği anlamına gelir.

• titreşimli olarak yerleştirilebilir, böylece yüklenirken düşük kaliteden yüksek kaliteye kadar solma gibi görünürler. Bu, ziyaretçilerinize beklerken bakacakları bir şey verir.

• fotoğraflar için iyi değil - kalitesini kaybedersiniz ve dosyalar küçük olmaz. Fotoğraflar için JPG grafik formatını kullanın.

JPG - Birleşik Fotoğraf Uzmanları Grubu

JPG grafik formatı, fotoğraflar veya taranmış resimler gibi birçok renkli görüntüler için en iyisidir. JPG dosyaları ...

• 16 milyon renge kadar içerebilir.

• değişken sıkıştırma desteği. Her görüntüye daha fazla veya daha az sıkıştırma uygulayabilirsiniz. Ne kadar çok sıkıştırma uygularsanız, o kadar çok kalite kaybedersiniz. Dosya boyutları bu grafik formatı ile oldukça küçük yapılabilirken, genellikle dosya boyutu ile resim kalitesi arasında uzlaşmanız gerekir. Daha yeni grafik yazılımı kaydetmeden önce size bir önizleme sunar - bu, kalite ve dosya boyutu arasındaki en iyi uyumu seçmek için çeşitli sıkıştırma düzeyleriyle deneme yapmanıza olanak sağlar.

• üç tipte gelir: taban çizgisi veya standart, taban çizgisi optimize edilmiş veya standart optimize edilmiş ve aşamalı. Taban çizgisi, bugünlerde eski olduğunu düşündüğümüz tarayıcılar için tasarlanmıştır (örneğin, Internet Explorer sürüm 1). Taban çizgisine göre optimize edilmiş standart taban çizgisine göre daha fazla sıkıştırma sunar ve hemen hemen her tarayıcı bu tür bir resmi okuyabilir. Geçmeli bir GIF dosyası gibi ilerici bir JPG, görüntünün kaba bir şekilde gösterilmesinden bitmiş görünümüne doğru, indirilirken oluşturulur. Bu güzel bir Web grafik formatı olsa da, eski tarayıcıların tümü bu formatı desteklememektedir.

• Grafik olarak ayarlanan metinler veya düz renk alanlı görüntüler gibi, yalnızca birkaç renkli görüntüler için uygun değildir. Bu grafikler için JPG kullanıyorsanız, gerekenden daha büyük olacaktır ve "benekli" görünecektir.

PNG - Aşamalı Ağ Grafikleri

PNG en yeni Web grafik formatıdır. PNG dosyaları ...

• tüm modern tarayıcılar tarafından desteklenir. Bu dosyalar eski tarayıcılarda görünmeyebilir, bu nedenle bu grafik biçimini kullanmak, web sitenizi ziyaret eden bazı kişilerin resimlerinizi görememesine neden olabilir.

• Kompakt ve çok yönlüdür ve GIF ve JPG'nin şeffaf arka plana sahip olma veya milyonlarca renk içeren görüntüler içerme gibi en iyi özelliklerini bir araya getirir.

• Hala daha yaşlı tarayıcılar tarafından desteklenmediği için hala yaygın olarak kullanılmamaktadır.

Hangisini ne zaman kullanmalı?

Doğru Web grafik formatını seçmek, resimlerinizin iyi görünmesini ve ziyaretçinizin bilgisayarında hızlı bir şekilde görünmesini sağlayabilir. Yanlış formatın seçilmesi resimlerinizin kötü görünmesine ve indirilmesi sonsuza dek sürmesine neden olur.

İnsanların Web'de yaptıkları en yaygın grafik hatası, görüntüleri için yanlış grafik biçimini kullanmaktır. Ama seçim gerçekten çok basit ...

• Grafikleriniz çok fazla renk içeriyorsa (fotoğraf gibi) JPG'yi seçin.

• Grafiklerinizin renkleri azsa, GIF'yi seçin. GIF kullanırken, yalnızca kullanılan renkleri içeren optimize edilmiş paletleri deneyin - dosya boyutlarını yarıya indirebilirler.

İdeal bir dünyada, bu aşağı gelirdi:

JPEG - Raster görüntüler ve fotoğraflar için

PNG - Vektör grafikleri için (örneğin, logolar, vb.)

Ne yazık ki, Internet Explorer 6 (yine de ne yazık ki çok sayıda kullanıcı) PNG görüntülerinde saydamlığı desteklememektedir. Yani PNG şeffaflık içeriyorsa, sorunlara yol açabilir. Neyse ki, zarif bir şekilde olmasa da, bu sorunu atlamak için kullanılabilecek bir kesmek var:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Ayrıca, IE 7'nin bile PNG'lerin bazı özellikleri ile ilgili sorunları olduğunu düşünüyorum.)

GIF’lerin PNG’ye göre yalnızca iki avantajı vardır:

1. (Neredeyse) mükemmel tarayıcı desteği (saydamlık olmamasına rağmen, bu fazladan bir bonus değil)
2. Animasyonlu olabilirler, ancak animasyonlu grafikler web tasarımında az miktarda kullanılmalıdır.

EDIT: PNG açık bir format olduğu için PNG her zaman desteklendiği ve kullanılabildiği yerlerde GIF'e tercih edilir.

En çok belirtildiği gibi, JPEG fotoğrafçılıkta ve PNG metinler ve grafiklerle grafikler için iyidir. GIF, animasyonu desteklemesi ve çok dikkatli kullanılması gereken tek avantajı vardır.

Görüntünüzü JPEG ve PNG olarak dışa aktarmak iyi bir ipucudur. Neredeyse her zaman grafikleriniz için daha iyi olan format daha küçük bir dosyaya yol açar. Fotoğraflar JPEG kadar küçük, grafikler PNG kadar küçük. Hangisini seçeceğinizden emin değilseniz, bu iyi bir karar olabilir.