Görünür arka planı olmayan bir görüntü gerekiyorsa doğru dosya biçimi önemlidir. PNG, WebP, AVIF, SVG ve GIF saydamlık içeren durumlarda kullanılabilir; birbirinin yerine geçmezler. Görüntüleri farklı saklarlar, farklı saydamlık yetenekleri sunarlar ve farklı grafik türlerine uyarlar.
Birçok raster grafik için PNG, saydam arka planlarda en basit ve en güvenilir seçeneklerden biri olmaya devam eder. Modern web teslimi için WebP ve AVIF çekici alternatifler olabilir. Vektör çalışmadan gelen logo ve simgeler için SVG daha iyi bir seçim olabilir; raster görüntülerdeki pikselleşme olmadan ölçeklenebilir. GIF de saydamlık temsil edebilir; renk ve saydamlık sınırları onu birçok modern statik grafik için daha az uygun kılar.
Bu rehber başlıca saydam görüntü biçimlerinin nasıl ayrıldığını ve logo, ürün görüntüsü, simge, web sitesi, sosyal grafik ve diğer yaygın kullanımlar için nasıl seçileceğini açıklar.
Saydam görüntü nedir?
Saydam bir görüntü, arkasında ne varsa onun görünür kalmasına izin veren alanlar içerir. Saydamlık yapabilen bir biçim, her pikseli opak bir renkle doldurmak yerine tümüyle veya kısmen saydam piksel ya da alanlar temsil edebilir.
Bir web sitesinde görünen şirket logosunu düşünün. Logo dosyası beyaz dikdörtgen bir arka plan içeriyorsa logo sayfanın koyu bir bölümüne konduğunda o dikdörtgen görünür kalır. Logonun çevresi saydamsa sayfa arka planı görünür ve logo tasarıma doğal biçimde karışabilir.
Saydamlık özellikle logolar, simgeler, ürün kesitleri, bindirmeler, arayüz grafikleri, imzalar, çıkartmalar, filigranlar ve farklı arka planların üzerinde görünmesi gereken diğer varlıklar için yararlıdır.
Hangi görüntü biçimleri saydam arka planı destekler?
Yaygın kullanılan birkaç görüntü biçimi saydamlık temsil edebilir. Modern görüntü iş akışları için en ilgili seçenekler PNG, WebP, AVIF, SVG ve GIF'tir. Standart JPEG, saydam pikseller için bir alfa kanalı sunmaz.
| Biçim | Saydamlık | Görüntü türü | Tipik kullanım |
|---|---|---|---|
| PNG | Evet | Raster | Logolar, simgeler, ekran görüntüleri, kesitler, grafikler |
| WebP | Evet | Raster | Optimize web grafikleri ve görüntüler |
| AVIF | Evet | Raster | Modern web görüntü teslimi |
| SVG | Evet | Vektör | Logolar, simgeler, çizimler ve ölçeklenen grafikler |
| GIF | Sınırlı | Raster | Basit grafikler ve animasyonlar |
| JPEG | Standart alfa saydamlığı yok | Raster | Fotoğraflar ve sürekli tonlu görüntüler |
PNG: saydam raster görüntüler için genel amaçlı seçim
PNG saydam arka planlarla güçlü biçimde ilişkilidir çünkü biçim kayıpsız sıkıştırmayı saydamlık desteğiyle birleştirir. Logolar, simgeler, arayüz grafikleri, ekran görüntüleri ve keskin kenarların korunmasının önemli olduğu görüntüler için yaygın kullanılır.
PNG birden fazla renk türünü ve saydamlık düzeneğini destekler. Truecolor PNG görüntüleri bir alfa kanalı içerebilir; pikseller farklı saydamlık düzeyleri taşıyabilir. Bu, yumuşak kenarları, gölgeleri ve kısmen saydam öğeleri mümkün kılar.
PNG sıkıştırması kayıpsız olduğu için görüntüyü PNG olarak kaydetmek, kayıplı sıkıştırmanın yaptığı gibi görsel bilgiyi bilerek atmaz. Bu, metin, keskin çizgiler ve kesin arayüz öğeleri içeren grafikler için değerli olabilir.
Dezavantajı, PNG'nin web teslimi için her zaman en boyut verimli biçim olmamasıdır; özellikle büyük veya fotoğrafa benzer görüntülerde. WebP veya AVIF gibi modern biçimler, içeriğe ve kodlama ayarlarına bağlı olarak daha kompakt dosyalar üretebilir.
Saydamlık için PNG ne zaman en iyisidir?
Güvenilir saydamlık ve kayıpsız görüntü saklama isteyen bir raster görüntü gerektiğinde PNG güçlü bir seçenektir. Yaygın örnekler belirli piksel boyutlarında dışa aktarılmış saydam logolar, arayüz öğeleri, yazılım ekran görüntüleri, ürün kesitleri, diyagramlar ve metin içeren grafiklerdir.
PNG, geniş bir grafik uygulaması ve görüntü işleme aracı yelpazesinin açabildiği düz bir biçim istendiğinde de yararlıdır.
WebP: saydam PNG'ye modern bir alternatif
WebP web için geliştirilmiş bir görüntü biçimidir; hem kayıplı hem kayıpsız sıkıştırmayı ve saydamlığı destekler. Bu, geleneksel olarak PNG ile ilişkilendirilen birçok işi ek sıkıştırma seçenekleriyle yapabilmesini sağlar.
Web sitelerinde, aktarılan görüntü verisini küçültmek öncelikliyse saydam WebP görüntüleri yararlı olabilir. Saydam bir ürün görüntüsü veya arayüz varlığı, eşdeğer PNG'den bazen WebP olarak daha verimli teslim edilebilir.
Dosya boyutu karşılaştırmaları yayımlanan gerçek görüntülerle yapılmalıdır. Her PNG'nin WebP'ye çevrilince boyutunu sabit bir yüzdeyle küçülteceğini varsaymak yanıltıcıdır. Görüntü boyutları, renk karmaşıklığı, saydamlık, kodlayıcı ayarları ve kaynak görüntü sonucu etkiler.
Saydam arka planlar için PNG ve WebP
Hem PNG hem WebP saydam görüntüler temsil edebilir; karar yalnız saydamlığın desteklenip desteklenmediği değildir.
Kayıpsız raster saklama, düzenleme iş akışları ve düz uyumluluk öncelikliyse PNG özellikle yararlıdır. Sıkıştırma verimi önemliyse web teslimi için WebP özellikle çekicidir.
Pratik bir iş akışı ikisini de kullanabilir. Tasarımcı düzenlenebilir veya dağıtım varlığı olarak yüksek nitelikli bir PNG saklarken site, destekleyen tarayıcılar için optimize WebP sürümleri üretebilir.
AVIF: saydamlığı olan başka bir modern biçim
AVIF, AV1 görüntü dosyası biçimine dayanır ve saydamlıklı görüntüler temsil edebilir. WebP gibi modern görüntü sıkıştırması düşünülerek tasarlanmıştır ve web görüntü optimizasyonu için giderek daha ilgili hale gelir.
Aktarım boyutunu küçültmenin önemli olduğu karmaşık görüntüler için AVIF çekici olabilir; onu seçmek dosya uzantılarını karşılaştırmaktan fazlasıdır. Kodlama ve çözme performansı, yazılım desteği, görüntü özellikleri ve iş akışı gereksinimleri AVIF'in uygun olup olmadığını etkileyebilir.
Yalnız birkaç düz renk içeren basit bir logoda biçim değiştirmek, zaten iyi optimize edilmiş bir PNG'ye veya uygunsa SVG'ye göre az pratik yarar sağlayabilir. Saydamlıklı karmaşık raster görüntülerde AVIF'i test etmek daha değerli olabilir.
Saydam görüntüler için PNG ve AVIF
PNG ve AVIF görüntü saklamaya farklı yaklaşır. PNG temelde, PNG filtrelemesi ve DEFLATE tabanlı sıkıştırma süreci kullanan kayıpsız bir raster biçimdir. AVIF, AV1 video kodlama ekosisteminden türetilmiş teknoloji kullanır ve modern görüntü sıkıştırma özelliklerini destekler.
Kesin kayıpsız raster koruma ve alışılmış bir grafik iş akışı ana gereksinimse PNG ile çalışmak daha kolay olabilir. Ana hedef web teslim verimiyse AVIF'i PNG ve WebP ile karşılaştırmak değerli olabilir.
En iyi sonuç gerçek varlığa bağlıdır. Temsili görüntüleri test etmek, bir biçimin her zaman kazanacağını varsaymaktan daha güvenilirdir.
SVG: vektör logolar için çoğu zaman daha iyi seçim
SVG, PNG, WebP ve AVIF'ten temelden farklıdır çünkü SVG bir vektör grafik biçimidir. Görüntüyü öncelikle sabit bir piksel ızgarası olarak temsil etmek yerine grafik öğeleri XML tabanlı işaretlemeyle tanımlar.
Bu, özgün olarak vektör çalışması olarak üretilmiş logolar, simgeler, diyagramlar ve çizimler için SVG'yi özellikle değerli kılar. Bir vektör logo genellikle sabit çözünürlüklü bir PNG'yi büyütmenin yol açtığı raster pikselleşme olmadan farklı boyutlarda gösterilebilir.
SVG doğal olarak saydam alanlar da içerebilir çünkü öğelerin tüm SVG görünüm alanını kaplaması gerekmez. Grafik öğelerin opaklığı ayrıca kontrol edilebilir.
Saydam logolar için PNG ve SVG
Logo gerçek vektör çalışmasıysa web kullanımı için SVG çoğu zaman düşünülmeye değerdir. Farklı ekran boyutları ve çözünürlüklerinde keskin kenarları koruyarak verimli ölçeklenir.
Raster bir sürüm gerektiğinde, çalışma vektör olarak uygun temsil edilmesi zor raster etkiler içerdiğinde veya belirli bir uygulama raster girdi beklediğinde PNG yararlı kalır.
Birçok kuruluş bu yüzden ikisini de tutar: uygun uygulamalar için bir vektör ana kopya veya SVG sürümü ve raster iş akışları için gereken piksel boyutlarında PNG dışa aktarmaları.
GIF saydamlığı destekliyor mu?
GIF saydamlığı destekler; yetenekleri PNG ile özdeşleşen yumuşak alfa saydamlığından çok daha sınırlıdır. GIF palet tabanlı bir renk modeli kullanır ve bir palet girişini saydam olarak işaretleyebilir.
Bu basit grafikler için işe yarayabilir; yumuşak yarı saydam kenarlar ve gölgeler için tipik olarak kullanılan esnek piksel başına alfa saydamlığını sağlamaz.
GIF öncelikle tarihsel rolü ve animasyon desteği nedeniyle önemli kalır. Yüksek nitelikli saydamlık isteyen modern statik grafiklerde PNG, WebP, AVIF veya SVG çoğu zaman daha uygun olur.
Bir JPG'nin saydam arka planı olabilir mi?
Standart JPEG, saydam pikseller için bir alfa kanalını desteklemez. Alışılmış bir .jpg veya .jpeg görüntü bu yüzden saydam alanları PNG, WebP veya AVIF'in yaptığı gibi koruyamaz.
Saydam bir görüntü JPEG'e çevrildiğinde saydam alanlar genellikle bir arka plana birleştirilmek zorundadır. Yazılıma ve dışa aktarma ayarlarına göre bu beyaz, siyah veya seçilen başka bir arka plan rengi olabilir.
Bu yaygın bir sorunu açıklar: biri bir logonun arka planını kaldırır, sonucu JPEG olarak kaydeder veya dönüştürür ve arka planın geri geldiğini görür. Arka plan kaldırma doğru çalışmış olabilir; seçilen çıktı biçimi gereken alfa saydamlığını koruyamaz.
PNG ve JPEG: hangisi saydamlığı destekler?
Alışılmış PNG ile JPEG arasında saydam pikseller gerektiğinde seçilecek biçim PNG'dir. PNG saydamlığı koruyabilir; JPEG standart alfa saydamlığı sağlayamaz.
JPEG'in yine önemli bir rolü vardır. Saydamlığın gereksiz olduğu ve kayıplı sıkıştırmanın kabul edilebilir olduğu fotoğraflar ve sürekli tonlu görüntüler için yaygın kullanılır. Görüntü aslında saydamlık istemediği halde sırf saydamlığı desteklediği için PNG seçmek gereksiz büyük dosyalar üretebilir.
PNG'm hâlâ neden beyaz arka plana sahip?
.png uzantısı görüntünün saydam piksel içerdiğini garanti etmez. PNG saydamlığı destekler ama tümüyle opak görüntüler de saklayabilir.
Bir PNG konunun çevresinde beyaz bir dikdörtgen gösteriyorsa birkaç açıklama mümkündür. Beyaz arka plan gerçek görüntü içeriği olabilir, arka plan dışa aktarmadan önce kaldırılmamış olabilir, düzenleme uygulaması çalışmayı beyaza düzleştirmiş olabilir veya görüntüyü gösteren yazılım saydamlığı beklenmedik biçimde sunuyor olabilir.
Bir görüntüyü test etmek için onu açıkça farklı bir arka plan rengine koyun. Beyaz bir dikdörtgen görünür kalıyorsa o pikseller büyük olasılıkla saydam değil, görüntünün parçasıdır.
Saydam görüntüler neden dama deseni gösterir?
Grafik uygulamaları saydam alanların arkasında yaygın olarak bir dama deseni gösterir. Desen, kullanıcıların saydamlığı beyaz piksellerden ayırmasına yardım eder.
Dama deseni normalde dışa aktarılan görüntüde yoktur. Arama motorlarında bulunan veya sitelerden indirilen görüntüler bazen görüntünün içine düzleştirilmiş bir dama deseni içerir. O durumda kareler gerçek piksellerdir; kaldırmak gerçek bir arka plan kaldırma veya düzenleme süreci ister.
Alfa kanalı nedir?
Dijital raster görüntüler görünür rengi yaygın olarak kırmızı, yeşil ve mavi bileşenlerle temsil eder. Bir alfa kanalı opaklık veya saydamlığı anlatan bilgi ekler.
Kavram olarak bir piksel tümüyle opak, tümüyle saydam veya bu iki durumun arasında olabilir. Ara alfa değerleri kenarların arkalarında görünenle yumuşak biçimde karışmasını sağlar.
Bu, eğri logo kenarları, ürün veya portre kesitlerindeki saç, yumuşak gölgeler, parıltılar ve kenarı yumuşatılmış grafikler için özellikle önemlidir. Yalnız ikili saydamlık, kısmi saydamlığın gerektiği yerlerde gözle görülür pürüzlü kenarlar üretebilir.
Saydam arka plan ve arka planın olmaması
Günlük konuşmada 'arka plan yok' ve 'saydam arka plan' çoğu zaman birbirinin yerine kullanılır; teknik olarak daha yararlı tanım saydamlıktır.
Tuvalin büyük bölümü saydam olsa bile bir raster görüntü hâlâ dikdörtgen bir piksel tuvali kaplar. O saydam pikseller, alttaki içeriğin görünür olması gerektiğini belirten bilgi içerir.
Bir saydam PNG'nin arka planı yokmuş gibi görünmesinin, görüntünün yine tanımlı genişlik ve yüksekliğe sahip olmasının nedeni budur.
Bir logo için en iyi saydam biçim nedir?
Logolarda önce özgün çalışmanın vektör mü raster mı olduğunu belirleyin.
Logo öncelikle yollar, şekiller ve uygun biçimde vektör öğelere çevrilmiş metinden oluşan vektör çalışmasıysa SVG iyi bir web biçimi olabilir; birden fazla raster çözünürlük istemeden ölçeklenir.
Saydamlıklı raster bir logo gerekiyorsa PNG güvenilir genel amaçlı bir seçenektir. Optimize web teslimi için WebP düşünülebilir; sitenin teslim stratejisinde modern görüntü optimizasyonu varsa AVIF de test edilebilir.
Tek bir şirket aynı logonun SVG, PNG ve WebP sürümlerini farklı amaçlar için meşru biçimde kullanabilir.
Ürün görüntüleri için en iyi saydam biçim nedir?
Saydam ürün kesitleri genellikle vektör değil raster görüntülerdir çünkü fotoğraflar karmaşık doku, renk ve ince ayrıntı içerir.
Kayıpsız saklama ve saydamlık önemliyse PNG yaygın kullanılır. Birçok büyük ürün görüntüsü sunan bir sitede, görüntü niteliği kabul edilebilir kaldığı sürece sayfa ağırlığını düşürmek için WebP veya AVIF sürümleri üretmek değerli olabilir.
Biçimi yalnız kurama göre seçmek yerine sitede kullanılan boyutlardaki gerçek kodlanmış dosyaları karşılaştırın. Hem görsel niteliği hem dosya boyutunu değerlendirin.
Saydam simgeler için en iyi biçim nedir?
Vektörden gelen simgeler için SVG çoğu zaman çok uygundur çünkü farklı boyutlarda keskin kalır. Raster simgeler için PNG düz bir seçenektir; web optimizasyonu için WebP düşünülebilir.
Çok basit raster grafikler indexed PNG kodlamasından da yararlanabilir çünkü sınırlı bir palet onları tam truecolor veri istemeden verimli temsil edebilir.
Ekran görüntüleri için en iyi biçim nedir?
Ekran görüntüleri çoğu zaman metin, keskin arayüz sınırları ve düz renk alanları içerir; bu kayıpsız sıkıştırmayı yararlı kılar. PNG bu yüzden, özellikle birebir yeniden üretim önemliyse, ekran görüntüleri için yaygın kullanılır.
Tam bir ekran görüntüsü için saydamlık genellikle gerekmez. Ekran görüntüsü öncelikle web içeriği olarak teslim ediliyorsa PNG'yi WebP veya AVIF ile karşılaştırmak daha küçük dosya fırsatları gösterebilir.
Bir web sitesi için hangi biçim en iyisidir?
Modern bir web sitesinin her varlık için tek görüntü biçimi kullanması gerekmez. Farklı biçimler içeriğe göre seçilebilir.
SVG uygun vektör logo ve simgelere hizmet edebilir. PNG, kayıpsız raster temsil isteyen grafikler için tutulabilir. WebP veya AVIF, uygun raster görüntülerin optimize teslimi için üretilebilir. JPEG, saydamlığın gereksiz olduğu fotoğraf içeriği için hâlâ uygun olabilir.
HTML'nin <picture> öğesi alternatif görüntü kaynakları sunmak için de kullanılabilir; tarayıcılar işaretlemeye ve desteklenen biçimlere göre mevcut kaynaklar arasından seçim yapabilir.
PNG'yi WebP'ye çevirmek saydamlığı korur mu?
WebP saydamlığı desteklediği için bir dönüştürme iş akışı saydam bilgiyi koruyabilir. Gerçekten koruyup korumadığı kullanılan dönüştürücüye ve ayarlara bağlıdır.
Dönüştürmeden sonra sonuç görüntüyü her zaman inceleyin. Bir araç görüntüyü düzleştirebilir, alfa bilgisini atabilir veya amaçlanan sonuca uymayan ayarlar uygulayabilir.
PNG'yi AVIF'e çevirmek saydamlığı korur mu?
AVIF saydamlığı desteklediği için saydam görüntü iş akışları mümkündür. WebP'de olduğu gibi çıktının nasıl üretildiğini dönüştürme yazılımı ve kodlayıcı ayarları belirler.
Dönüştürmeden hemen sonra özgün PNG'yi silmeyin. Bir kaynak veya ana varlık saklamak, daha sonra farklı boyut, biçim veya kodlama ayarı üretmeniz gerekirse güvenilir bir başlangıç noktası sağlar.
PNG'yi JPEG'e çevirmek saydamlığı kaldırır mı?
Alışılmış JPEG alfa saydamlığını temsil edemediği için saydam alanlar bir JPEG çıktısında standart saydam piksel olarak tutulamaz. Dönüştürme sırasında bir arka plana birleştirilmeleri gerekir.
Saydamlık gerekliyse onu destekleyen bir çıktı biçimi kullanın.
Saydamlığı olan her görüntü için PNG kullanılmalı mı?
Hayır. PNG güçlü bir genel amaçlı saydam raster biçimdir; en iyi biçim içeriğe ve hedefine bağlıdır.
Bir vektör logo SVG olarak daha iyi teslim edilebilir. Yoğun trafikli bir sayfadaki büyük saydam raster görüntü WebP veya AVIF optimizasyonundan yararlanabilir. Düzenleme ve dağıtım için amaçlanan basit bir grafik PNG olarak tutmak en kolay olabilir.
Önemli ayrım kaynak varlıklarla teslim varlıkları arasındadır. Yüksek nitelikli kaynak olarak sakladığınız biçim, her site ziyaretçisine gönderilen biçim olmak zorunda değildir.
Doğru saydam görüntü biçimi nasıl seçilir?
Çalışmanın türünden başlayın. Gerçek vektör çalışmasıysa SVG'yi düşünün. Raster çalışmasıysa ve kesin kayıpsız temsil önemliyse PNG'yi düşünün. Raster görüntü öncelikle bir web sitesi üzerinden teslim ediliyorsa ve aktarım boyutu önemliyse optimize WebP ve AVIF sürümlerini PNG kaynağıyla karşılaştırın.
Sonra saydamlık karmaşıklığını değerlendirin. Yumuşak kenarlar, gölgeler ve kısmi opaklık içeren grafikler bu etkileri düzgün koruyabilen bir biçim ve kodlama yapılandırması ister.
Son olarak uyumluluğu ve iş akışını düşünün. Etkileyici biçimde küçük bir dosya üreten bir görüntü biçimi, görüntüye ihtiyaç duyan yazılım, platform veya sonraki iş akışı onu doğru işleyemiyorsa yararlı değildir.
Kısa öneriler
| Kullanım | Önce düşünülecek biçim | Alternatif |
|---|---|---|
| Saydam raster logo | PNG | WebP |
| Vektör logo | SVG | PNG dışa aktarma |
| Saydam ürün görüntüsü | PNG | Web teslimi için WebP veya AVIF |
| Ölçeklenen simge | SVG | PNG |
| Ekran görüntüsü | PNG | WebP |
| Saydamlıksız fotoğraf | JPEG, WebP veya AVIF | İş akışına bağlı |
| Basit animasyon | Gereksinimlere bağlı | GIF, WebP veya desteklenen başka animasyon biçimleri |
Son karar: en iyi saydam görüntü biçimi hangisi?
Evrensel bir kazanan yoktur; görüntünün türü bilindiğinde karar kolaylaşır.
Saydamlıklı güvenilir kayıpsız bir raster biçim gerektiğinde PNG'yi seçin. Çalışma vektöre dayalıysa ve temiz ölçeklenmesi gerekiyorsa SVG'yi seçin. Saydam raster görüntüler verimli web teslimi istediğinde WebP'yi düşünün. Modern sıkıştırma öncelikliyse ve teslim ile uyumluluk gereksinimlerinize uyuyorsa AVIF'i düşünün.
GIF basit saydamlık temsil edebilir ama modern alternatiflere göre önemli sınırları vardır; alfa saydamlığı gerektiğinde alışılmış JPEG seçilmemelidir.
Birçok gerçek sitede en iyi strateji tek bir biçimi dışlayıcı olarak seçmek değildir. Uygun yüksek nitelikli bir kaynak saklayın ve görüntü türüne, tarayıcı ortamına ve performans gereksinimlerine göre optimize teslim biçimleri üretin.
