Web İçin Doğru Görsel Biçimini Seçmek

Önce Sorulacak Üç Soru

Gerçek bir web sitesinde her görsel için yapılacak seçim üç soruya dayanır:

1. Görsel ne gösteriyor? Fotoğraflar JPG, kayıplı WebP ve AVIF gibi kayıplı biçimlere uygundur, çünkü küçük hatalar doğal ayrıntıların içinde gözden kaybolur. Ekran görüntülerinde, metinlerde, çizelgelerde ve düz renkli grafiklerde ise kayıplı sıkıştırmanın görünür haleler bırakabileceği keskin kenarlar bulunur. Bu yüzden bunlara kayıpsız biçimler (PNG, kayıpsız WebP) ya da şekillerle çizilmişlerse SVG uygundur.
2. Saydamlık veya animasyon gerekiyor mu? JPG ikisini de desteklemez. PNG, WebP ve AVIF yumuşak kenarlara olanak tanıyan tam bir alfa kanalı saklayabilir. GIF'te pikseller ya tamamen saydam ya da tamamen opaktır; bu nedenle kavisli kenarlar renkli arka planlarda tırtıklı veya saçaklı görünebilir. GIF, WebP, AVIF ve APNG (hareketli PNG) animasyon içerebilir, ancak kısa bir video çoğu zaman bir GIF'ten çok daha küçüktür.
3. Görsel nerede yayımlanacak? Kendi HTML sayfalarınızda birden fazla biçim sunabilirsiniz. Bir içerik yönetim sistemi (CMS), e-ticaret sitesi veya yükleme formu ise neyi kabul edeceğine kendisi karar verir ve dosyaları kendisi dönüştürebilir; bu yüzden güncel belgelerine bakın. E-posta programları arasındaki farklar tarayıcılar arasındakinden daha büyüktür; bu nedenle bültenlerde JPG ve PNG daha güvenli seçeneklerdir.

Her biçimin nasıl çalıştığını öğrenmek için JPG, PNG, WebP ve AVIF Karşılaştırması rehberine bakın.

İçeriğe Göre Biçim: Karar Tablosu

Kendi sayfalarınızda AVIF veya WebP sunduğunuzda, bu biçimleri görüntüleyemeyen tarayıcılar ve uygulamalar için bir JPG veya PNG sürümü de bulundurun. Bir platform yalnızca tek bir dosya kabul ediyorsa "Yedek veya alternatif" sütunundaki biçim genellikle güvenli seçimdir. Favicon'ların kendi kuralları vardır; bunun için Favicon Boyutları, Biçimleri ve HTML Etiketleri rehberine bakın.

Bir web sayfasında GIF benzeri bir döngü için autoplay, loop, muted ve playsinline öznitelikleri eklenmiş sessiz bir <video> yaygın bir alternatiftir, çünkü tarayıcılar sessiz videoların otomatik oynatılmasına genellikle izin verir. E-postada ise Outlook'un bazı masaüstü sürümleri hareketli bir GIF'in yalnızca ilk karesini gösterir; bu yüzden asıl mesajı o kareye yerleştirin.

WebP veya AVIF'i Yedek Bir Biçimle Sunmak

HTML'sini kendiniz yazdığınız sayfalarda <picture> öğesi, her tarayıcının desteklediği ilk biçimi almasını sağlar:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Bir kâse domatesli makarna" width="1600" height="1200">
</picture>

Tarayıcı <source> öğelerini sırayla okur ve type değerini desteklemediği öğeleri atlar. Zorunlu <img> öğesi alternatif metni ve tarayıcının sayfada yer ayırmasını sağlayan genişlik ile yüksekliği taşır; hiçbir kaynak eşleşmezse bu öğenin dosyası gösterilir. img { max-width: 100%; height: auto; } gibi bir CSS kuralıyla görsel dar ekranlara sığacak şekilde küçülür ve en-boy oranını korur. Bunun yanında birkaç farklı boyut da sunmak için her dosyayı genişliğiyle birlikte srcset içinde listeleyin ve bir sizes özniteliği ekleyin; ayrıntılar Görselleri Yeniden Boyutlandırma: Piksel, En-Boy Oranı ve DPI rehberinde anlatılıyor.

Birçok CMS ve görsel CDN'i WebP veya AVIF kopyaları oluşturup her ziyaretçi için bunlardan birini seçebilir. Kullandığınız sistem bunu yapıyorsa, görselin iki kez sıkıştırılmaması için daha önce yoğun biçimde sıkıştırdığınız bir dosya yerine yüksek kaliteli bir JPG veya PNG yükleyin ve dönüştürmeyi sisteme bırakın.

Uygulamalı Örnek: Bir Makalenin Görselleri

Bir yemek tarifi makalesinde üç görsel olduğunu ve metin sütununun en fazla 760 CSS pikseli genişliğinde olduğunu varsayalım.

• Ana fotoğraf. Telefonla çekilen orijinal 4032 × 3024 pikseldir, yani yaklaşık 12,2 megapiksel. CSS pikseli başına iki cihaz pikseli olan bir ekranda 760 piksellik bir sütun için yatayda yaklaşık 1.520 piksel gerekir; bu yüzden 1600 × 1200 boyutu 4:3 oranını korur ve 1,92 megapiksel içerir, bu da orijinalin yaklaşık %16'sıdır. Önce yeniden boyutlandırın, ardından AVIF veya WebP sürümüyle birlikte yedek bir JPG kaydedin. Tam boyutlu orijinalde 1600 × 1200 sürümün altı katından fazla piksel vardır ve tarayıcı küçültme sırasında bunların çoğunu atardı.
• Saydam arka planlı logo. Tasarımcının PNG dosyası 1000 × 500 pikseldir ve 200 CSS pikseli genişliğinde gösterilir; bu yüzden CSS pikseli başına iki cihaz pikseli olan ekranlar için 400 × 200 yeterlidir. Logoyu PNG veya WebP olarak tutun. JPG saydam alanları düz bir renkle doldurur ve bu, renkli bir üst bilgi alanında kutu olarak görünür. Tasarımcı SVG olarak dışa aktarabiliyorsa bu daha da iyidir.
• Bir zamanlayıcı uygulamasının ekran görüntüsü. Metin ve düz renklerden oluşur: PNG olarak kaydedin. JPG harflerin çevresinde benekler oluşturabilir ve okuyucular bunu bir fotoğraftaki küçük hatalardan daha kolay fark eder.

LeedyBox Görsel Dönüştürücü ile Dosya Dönüştürme

Görsel Dönüştürücü, bir veya daha fazla görselin biçimini görsel verilerini LeedyBox'a yüklemeden tarayıcınızda değiştirir.

1. "Dosyaları seçin veya buraya sürükleyip bırakın" alanına tıklayın ya da PNG, JPG, WebP, BMP, GIF veya AVIF dosyalarını bu alana bırakın. HEIC veya SVG gibi diğer türler ve tarayıcınızın çözemediği dosyalar bir mesajla reddedilir.
2. Her dosyanın kendi biçim menüsü vardır (geniş ekranlarda "To:" etiketiyle gösterilir) ve bu menü başlangıçta JPG olarak ayarlıdır. JPG, PNG, WEBP, BMP, AVIF veya ICO biçimini her dosya için ayrı ayrı ya da "Toplu seçenekler" altındaki "Tüm biçimleri şuna ayarla..." menüsüyle tüm dosyalar için seçin.
3. "Dönüştür ve İndir" düğmesine tıklayın. Tek bir dosya örneğin logo_converted.webp adıyla kaydedilir; birden fazla dosya ise leedybox_converted_images.zip arşivinde gelir.

• ICO dışında piksel boyutları aynı kalır. Önce Görsel Boyutlandırıcı ile yeniden boyutlandırın ya da Görsel Sıkıştırıcı aracındaki "Genişliği ve yüksekliği de sınırla" seçeneğini kullanın.
• Dönüştürücü JPG, WebP ve AVIF için tarayıcıdan 0 ile 1 arasındaki ölçekte 0,92 kalite ister; kalite kaydırıcısı yoktur. Bu ayar, dosya boyutundan çok ayrıntıyı gözetir. Aynı zamanda WebP'nin kayıplı olarak kaydedildiği anlamına gelir: kayıpsız WebP seçeneği yoktur, bu yüzden ekran görüntülerini ve metin içeren grafikleri PNG'ye dönüştürün. Daha küçük dosyalar için sıkıştırıcı bir kalite kaydırıcısı (varsayılan 75) ve hedef dosya boyutu seçeneği sunar; Görsel Sıkıştırma Ayarları Açıklaması rehberine bakın.
• JPG dosyalarında ve dönüştürücünün oluşturduğu BMP dosyalarında saydamlık yoktur; bu yüzden saydam alanlar beyaza döner. Bu BMP dosyaları ayrıca sıkıştırılmamıştır: piksel başına 3 bayt (her satır 4 baytın katına tamamlanır) ve buna ek olarak 54 baytlık bir başlık kullanır. 1200 × 800 boyutundaki bir görsel, ne gösterdiğinden bağımsız olarak 2.880.054 bayt (yaklaşık 2,9 MB) olur; bu nedenle BMP'nin web sayfalarında yeri yoktur.
• ICO dosyası tek bir PNG görseli içerir ve saydamlığı korur. Bir kenarı 256 pikselden uzun olan görseller 256 × 256 içine sığacak şekilde küçültülür; örneğin 1000 × 500 boyutundaki bir logo 256 × 128 olur. Daha küçük görseller boyutlarını korur. 16, 32 ve 48 piksellik boyutlar içeren bir favicon.ico ile birlikte PNG ve Apple Touch simgeleri için Favicon Oluşturucu aracını kullanın.
• AVIF yalnızca tarayıcınız AVIF dosyası oluşturabiliyorsa seçilebilir; şu anda birçok tarayıcı bunu yapamaz. Bu durumda seçenek "AVIF (bu tarayıcı desteklemiyor)" olarak listelenir. Tarayıcı seçilen biçimi oluşturamazsa (WebP çıktısı da tarayıcıya bağlıdır), yanlış uzantılı PNG verisi kaydedilmez; bunun yerine bir mesaj görünür ve hiçbir dosya kaydedilmez. Birden fazla dosya varsa böyle tek bir hata tüm toplu işlemi durdurur ve ZIP dosyası oluşturulmaz.
• Her görsel yeniden çizilip baştan kodlandığı için orijinalin EXIF verileri, GPS konumu ve renk profili aktarılmaz; hareketli bir GIF, WebP veya AVIF ise tek kareden oluşan durağan bir görsele dönüşür. Dönüştürücü SVG, GIF veya hareketli dosya oluşturmaz.

Sık Görülen Sorunlar ve Çözümleri

• Saydam bir logonun çevresinde beyaz veya siyah bir kutu görünüyor. Logo büyük olasılıkla JPG olarak ya da saydamlık içermeyen bir BMP olarak kaydedilmiştir. Bunun yerine PNG veya WebP kullanın; ayrıntılar için JPG'de saydamlığın neden kaybolduğunu anlatan rehbere bakın.
• PNG, dönüştürüldüğü JPG'den çok daha büyük. PNG, JPG'deki gürültü ve sıkıştırma bozulmaları dahil her pikseli birebir saklar; dönüştürme de JPG'nin daha önce kaybettiği ayrıntıyı geri getirmez. Fotoğraflar için WebP veya JPG kullanın.
• Bir yükleme formu WebP veya AVIF dosyasını reddediyor. Bazı formlar yalnızca JPG ve PNG kabul eder. Fotoğrafları JPG'ye, saydam grafikleri PNG'ye dönüştürün. Yalnızca dosya uzantısını değiştirmek biçimi değiştirmez.
• WebP dosyası JPG'den pek küçük değil, hatta daha büyük. Orijinal JPG zaten yüksek oranda sıkıştırılmış olabilir; dönüştürücünün 0,92 kalitesi ise JPG'nin kendi bozulmaları dahil pek çok ayrıntıyı korur ve bunları saklamak da bayt gerektirir. Dosya her iki biçimde de çok büyükse görsel hâlâ kameranın tam boyutunda olabilir. Görseli görüntüleneceği boyuta küçültün, ardından sıkıştırıcıyı kullanıp sonuçları karşılaştırın.
• Renkler orijinaldekinden daha soluk görünüyor. Dönüştürücü her görseli, varsayılan olarak sRGB ile çalışan bir tarayıcı tuvaline (canvas) çizer ve orijinal renk profilini korumaz. Display P3 veya Adobe RGB gibi daha geniş bir renk uzayındaki fotoğraflar en doygun renklerinin bir kısmını kaybedebilir; bu fark en çok geniş renk gamlı ekranlarda göze çarpar. Fotoğraf düzenleyicinizden sRGB bir kopya dışa aktarın, kopyayı orada kontrol edin ve ardından onu dönüştürün.
• Telefondan gelen HEIC fotoğrafı kabul edilmiyor. HEIC, dönüştürücünün desteklediği biçimler arasında yer almaz. Birçok telefon fotoğrafları JPG olarak dışa aktarabilir veya paylaşabilir; o kopyayı dönüştürün.

Yayımlamadan Önce Kontrol Edilecekler

• Sayfayı iki farklı tarayıcıda ve bir telefonda açın. <picture> kullanıyorsanız AVIF ve WebP kaynaklarını geçici olarak kaldırarak yedek biçimi de test edin.
• Yeni dosyayı orijinaliyle gerçek boyutta karşılaştırın; özellikle yüzlere, metinlere ve renk geçişlerine bakın.
• Tarayıcının geliştirici araçlarındaki Ağ (Network) panelinde hangi dosyanın indirildiğini ve boyutunu kontrol edin.
• Sitenizde karanlık mod varsa saydam görsellere hem açık hem koyu arka planlarda bakın.
• Orijinalleri saklayın ve dönüştürmeleri onlardan yapın; kayıplı bir dosyayı yeniden kaydetmek, eski hatalara yenilerini ekler.

Sık Sorulan Sorular