Web İçin En İyi Görüntü Türü

Görüntü optimizasyonu esasında ihtiyaçlarınız için en iyi dosya formatını seçmekle başlar. Bu durum PNG vs JPG ‘den daha derin bir durumdur çünkü hepsine hükmedecek tek bir dosya formatı yok. Herkesin ihtiyacı farklıdır, tek bir sitedeki farklı görüntülerin bile farklı gereksinimleri vardır.

Bu yazıda, size WordPress siteniz için en iyi görüntü formatını nasıl seçeceğinizi göstereceğim. Eski favoriler, JPEG, PNG ve GIF’lerin yanısıra WebP ve SVG gibi bazı yeni nesilleri inceleyeceğiz. Görüntülerini bir profesyonel gibi optimize edebilmeniz için güçlü, zayıf yönlerini ve ideal kullanım durumlarını ele alacağız.

Doğru dosya formatını seçmek neden önemlidir?

Giderek daha fazla ziyaretçi mobil cihazlarda web sitelerini ziyaret ediyor. Ağ hızları yalnızca özel ağlara kıyasla nispeten daha yavaş olmakla kalmıyor, aynı zamanda herkesin sınırsız veri paketi yok.

Google, arama sonuçlarında daha düşük göstererek çok yavaş yüklenen sayfaları cezalandırdığından, yükleme sürelerini iyileştirmek trafiği, satışları ve dönüşümleri artırmak için daha akıllıca bir yoldur.

Yanlış görüntü formatını seçtiğinizde, istemeden gerekenden daha büyük bir görüntüyü yanlışlıkla sunabilirsiniz. Ek resim dosyası özellikleri (saydamlık gibi), gereksiz detaylar ve çok fazla renk resimlerinize şişkinlik katar. Bazen, bunlar zorunludur bazende değildir. Görüntünüzde saydamlık yoksa, saydamlığı desteklemeyen bir görüntü türü seçtiyseniz gerçekten hiçbir şeyden vazgeçmeyeceksiniz.

En Uygun Dosya Boyutunu Seçmek

En uygun dosya boyutunu seçmek için, resmi web sayfanızın geri kalanıyla ilgili olarak da göz önünde bulundurmanız gerekir. Ortalama web sayfası şu anda 2 MB civarındadır, bu nedenle nispeten hızlı bir siteye sahip olmak için bu sınırın altında kalmak istersiniz. Bu, yalnızca görüntülere değil, sitenizdeki tüm varlıkların toplamına bakmanız gerektiği anlamına gelir.

1 MB’lık geniş ve ayrıntılı bir kayan resim, çoğunlukla metin içeren bir sayfadaki tek resim buysa, önemli olmayacaktır; ancak her biri 1 MB büyüklüğündeki 10 resim gösterecekseniz, yüklenmesi daha zor olacaktır. Bu durumda daha az görüntü göstererek veya hepsini daha küçük boyutta göstererek ödün vermeniz gerekebilir.

Görüntüleri Sıkıştırma: Kayıplı yada Kayıpsız

İdeal görüntü formatını seçmek için, kayıplı ve kayıpsız sıkıştırma arasındaki farkı anlamanız gerekir. İdeal olarak, görüntünüz en küçük dosya boyutunu üretmek için bu algoritmik işlemlerin her ikisini de kullanmalıdır ama her format hepsini desteklemez.

Kayıplı sıkıştırma ile verilerinizin bir kısmı sonsuza dek kaybolur. Kayıplı görüntü sıkıştırma, görüntü verilerini kalıcı olarak kaldırır ve işlemdeki görüntüyü düşürür. Bu göründüğü kadar kötü değil, çünkü bu ek ayrıntıların bazıları insan gözüyle bile algılanamayabilir.

Kayıpsız görüntü sıkıştırma aksine, verileri korur, böylece hiçbir şey kaybolmaz. Kayıpsız algoritmalar, görüntüyü tam olarak yeniden oluşturmak için gerekli tüm verileri tutar.

İdeal olarak, görüntünüzün önce kayıplı sıkıştırma aşamasından geçmesi ve daha sonra kalanın optimize edileceği kayıpsız bir aşamadan geçmesidir.


JPEG

JPEG, Joint Photographic Experts Group (Birleşik Fotoğraf Uzmanları Grubu) anlamına gelir ve fotoğraflar için kullanılmak üzere tasarlanmıştır. Tüketici dijital kameralarının ve cep telefonlarının çoğu için standart dosya biçimi olarak hemen hemen her yerde bulabilirsiniz.

JPEG’lerin çeşitli avantajları vardır:

  • JPEG’ler milyonlarca renk içerebilir, böylece zengin, canlı görüntüler üretirler.
  • Bu kadar çok renkle bile nispeten küçük bir dosya boyutu üretirler.
  • Tüm modern tarayıcılarda desteklenirler.

JPEG temelde bu sebeplerden web için çok popülerdir ancak JPEG hareketsiz fotoğraflar için tasarlandığından, şeffaflığı veya animasyonu desteklemiyor.

JPEG Sıkıştırma

JPEG’ler, dosya boyutunu küçük tutmak için kayıplı sıkıştırma kullanır. JPEG sıkıştırma ya hep ya hiç ayarı değildir. Durumunuz için ideal dengeyi oluşturmak adına  sıkıştırma oranını % 0 (ağır sıkıştırma) ile % 100 (sıkıştırma yok) arasında ayarlamak size kalmış bir durumdur.

Genellikle, bir görüntünün %75-100 arasında sıkıştırılması görüntünün bütünlüğünü ve kalitesini koruyacaktır, %75 sıkıştırmada görüntü boyutu yarıya kadar düşmüş oluyor  Bu yüzden çoğu sosyal ağ, görüntülerini % 70-85 aralığında sıkıştırıyor. Örneğin Facebook, resimlerinizi %85 oranında sıkıştırır.

Ayrıca, sıkıştırılmış bir görüntüyü her zaman yeniden sıkıştırmaktan kaçınmalısınız. Hiç bir fotokopinin kopyasını yaptınız mı ya da sosyal medyada bir resim indirip yeniden yüklediniz mi? Kalite maalesef bozuluyor çünkü başka bir sıkıştırma işlemi daha geçiriyorsunuz.



PNG

Sırada web’in diğer favori resim dosya türü PNG var. PNG’ler, lisans sorunları nedeniyle GIF’in yerini almak üzere tasarlanmıştır, bu nedenle işlevsel benzerliklere sahiptir

PNG’nin gücü kayıpsız sıkıştırma algoritmasıdır. Sıkıştırma işlemi sırasında herhangi bir veri kaybetmezsiniz, böylece görüntü kalite kaybı olmadan yeniden oluşturulabilir. Sonuç olarak, PNG’ler, metin söz konusu olduğunda bile resimlerdeki ince ayrıntıları korur. Olumsuz tarafı, PNG dosya boyutlarının tüm bu verilerden dolayı diğer resim dosyası türlerine göre daha büyük olma eğiliminde olmalarıdır.

Diğer bir avantaj,ı şeffaflığı desteklemeleridir. Yalnızca şeffaf bir arka plana sahip bir logo dosyası oluşturmakla kalmaz, aynı zamanda PNG’lerle gelişmiş saydamlık gradyanları ve daha fazlasını da oluşturabilirsiniz.

PNG Dosyalarının Üç Çeşidi

Üç çeşit PNG vardır: PNG-8, PNG-24 ve gizemli PNG-32. Teknik olarak animasyonlu PNG’ler de var, ancak henüz desteklenmiyorlar.

PNG-8, PNG’lerin GIF değeri gibidir. PNG-8, 256 indeksli rengi destekler ancak JPEG eşdeğerinden bile daha küçük dosya boyutundadır. GIF’lerin aksine, PNG-8’in animasyon desteği zayıftır. PNG-8, logolar ve site simgeleri gibi şeffaf arka plana sahip basit web grafikleri için idealdir.

PNG-8 8 bit rengi desteklerken, PNG-24 24 bit rengi destekler, yani 16 milyon farklı renk demektir. PNG-24 daha çok JPEG formatında görseller üretir fakat çok daha büyük dosya boyutunda olurlar. Bunun yanısıra PNG-24’ün görüntü kalitesi, yakınlaştırıldığında bile mükemmeldir; bu e-ticaret fotoğrafları ve ekran görüntüleri veya metin içeren görüntüler için idealdir.

Photoshop Web İçin Kaydet iletişim kutusunda PNG oluşturursanız, seçenek olarak listelenen PNG-32’yi göremezsiniz, ancak saydamlık eklerseniz PNG dosyanız sessizce bir PNG-32’ye dönüştürülür.

PNG-32’ler, gelişmiş saydamlık özellikleri için ekstra 8 bit alfa kanalıyla 24 bit renkleri destekler. PNG-32’ler, saydamlık gradyanlarına sahip gelişmiş görüntüler oluşturma yeteneğine sahip olacak şekilde tasarlanmıştır.

Bu gelişmiş yetenekler, PNG-32’nin çok daha büyük dosya boyutları ürettiği anlamına gelir. Karmaşık saydamlık gerektiren bir görüntü oluşturmuyorsanız, PNG-24’e sadık kalın.

JPG ve PNG

JPEG’ler, yüksek kontrastlı görüntüler için zayıf bir seçimdir. Bu nedenle, beyaz arka planlarda siyah metin içeren JPEG ekran görüntüleri bulanık olma eğilimindedir.

JPEG, fotoğraflar için, özellikle metinsiz olanlar için, daha küçük bir görüntü dosyasının görüntü kalitesine öncelik vermesi durumunda, ideal görüntü dosyası türüdür. Örneğin profesyonel fotoğrafçılığa dikkat çeken büyük resimler. JPEG’ler PNG’lerden önemli ölçüde daha küçüktür, neredeyse 3.5 kat kadar.



WebP

En iyi PNG ve JPEG özelliklerini bir araya getirmek harika olmaz mıydı? Google da aynı şeyi düşündü ve açık kaynaklı WebP biçimini icat etti.

WebP, görüntüleri optimize etme konusunda en iyi saklanan sırlardan sadece biri olabilir. YouTube ve eBay gibi büyük siteler, site performansını iyileştirmek için düşük seviyelerde kullanmaya başladı.

İki tür WebP görüntüsü vardır. Biri basitçe WebP olarak bilinir ve kayıplı sıkıştırma kullanır. Bunu WebP formatının JPEG versiyonu olarak düşünebilirsiniz. Photoshop gibi bir programda kayıplı bir WebP oluşturduğunuzda, sıkıştırma oranını seçersiniz.

Diğer sürüm WebP Kayıpsız olarak bilinir ve daha çok bir PNG gibidir. Daha yüksek bir dosya boyutu elde edersiniz, ancak ayrıntılarını kaybetmezsiniz.

Her iki tür WebP formatı da JPEG ve PNG benzerlerinden çok daha küçük bir görüntü oluşturur. Peki tam olarak ne kadar? Google’ın verilerine göre ortalama olarak, WebP görüntüleri JPEG’lerden % 25-34, PNG’lerden% 26 daha küçüktür.

Öyleyse neden hepimiz WebP görüntülerine geçmedik?

WebP, 2010 yılında görüntü sahnesine adım atmasına rağmen, Firefox ve Safari desteklemiyor. Yani şu anda, WebP tamamen tarayıcı destekli bir çözüm değil. WebP desteği olmayan bir tarayıcı kullanan ziyaretçiler için PNG veya JPEG eşdeğeri sunarak bu sınırlamayı aşabilirsiniz.



İki Farklı Görüntü Türünün Anlamı

İki tür görüntü türü vardır; vektör ve raster.

Vektör görüntüleri, geometrik şekiller oluşturmak için çizgiler ve eğrilerle birbirine bağlanan bir dizi noktadan matematiksel olarak üretilir. Vektör grafikleri ile, bir görüntü, görüntünün kalitesine zarar vermeden irili ufaklı herhangi bir şekilde yeniden boyutlandırılabilir.

Raster grafikler, aksine, her pikselin bir rengi temsil ettiği bir ızgarada düzenlenmiş piksellerden oluşur. Raster grafikler yalnızca görüntülenmeleri istenen çözünürlükte yüksek kalitede görünürler. Görüntü daha büyük bir boyuta ölçeklendirilirse, piksellenme meydana gelir.

SVG

Bir şeyi açıklığa kavuşturalım, SVG’ler aslında bir görüntü formatı değildir. SVG, iki boyutlu grafikler oluşturmanıza olanak sağlayan bir işaretleme dilidir. SVG , PNG’lerden veya JPEG’lerden çok HTML gibidir. SVG’ler teknik olarak XML tabanlıdır ve Javascript – CSS ile manipüle edilip canlandırılabilir.

SVG’ler de benzersizdir çünkü şu ana kadar ele aldığımız görüntü biçimlerinin aksine, vektör görüntüleri oluştururlar. Bu, görüntülerin kademesiz ölçeklenebilir olduğu ve tüm çözünürlüklerde iyi görüneceği anlamına gelir. Bu da onları farklı cihazlara adapte olma konusunda harika kılar.

Diğer görüntü dosyası türlerinde meydana gelen pikselleşmeyi elde etmezsiniz. Bununla birlikte, SVG’ler logolar, bayraklar, çizelgeler ve simgeler gibi geometrik şekillere dayalı basit görüntüler göstermek için tasarlandığından fotoğrafçılık için iyi çalışmazlar.

SVG’leri Adobe Illustrator, Inkscape, Vectr, Sketch gibi bir vektör programında oluşturabilirsiniz. Basit görüntüler oluşturursanız, ortaya çıkan dosya boyutu PNG, JPEG veya WebP görüntüsünden çok daha küçük olacaktır, hatta yüksek çözünürlükteki büyük görüntüler verecektir. Karmaşık SVG dosyaları olsa da bu avantajları dezavantaja çevirecektir.

Bir biçimlendirme dili olmasına rağmen, Google SVG’leri indexler, böylece resim aramalarında görünürler ve tüm tarayıcılarla uyumludurlar.

Size SVG’lere sevdirdiysek ve bu makaleyi okurken WordPress’e bir tane yüklemeye çalıştıysanız, WordPress’in güvenlik nedeniyle SVG’lere izin vermediğini fark etmiş olabilirsiniz. Ancak WordPress bu konuda tek değil. Medium, Tumblr ve Facebook gibi sosyal ağlar da SVG’lere izin vermiyor.

Bunu aşmayı deneyebilir ve fonksiyon dosyanızı SVG’lere izin verecek şekilde değiştirebilirsiniz, ancak bunu tavsiye etmeyiz. SVG’ler bir biçimlendirme dili oluşturduğundan, kötü amaçlı yazılım enjeksiyonuna açıktır. Bir site yöneticisiyseniz ve SVG’leri etkinleştirirseniz, ancak sitenizin yazarları ve katkıda bulunanları risklerin farkında olmazsa, tehlikeli SVG dosyalarını bilmeden yükleyebilirler.

SVG’lere izin verecek bir eklenti yüklemeye karar verirseniz, yalnızca güvendiğiniz kişilerden SVG’leri yüklemelisiniz ve kişilerin SVG’leri yükleme özelliğini sınırlandırmalısınız.

GIF

En meşhur dosya türünü son olarak sona sakladık. Şakaları ironik bir şekilde canlandırmak için harika olsa da, GIF’ler bugünlerde pek iyi değil. Twitter’daki hareketli GIF’ler artık GIF bile değil! Onlar WebM dosyaları.

Çünkü gerçek şu ki, GIF’ler asla animasyonlar için tasarlanmamıştır. Son derece büyük dosya boyutları üretirler. Daha fazla kare, daha da kötüleşir. Bir WebM dosyasına geçerseniz, 9 kat daha küçük ve daha yüksek kalitede bir dosyanız olur. MP4’ler, tüm tarayıcılarla uyumlu başka bir uygulanabilir seçenek.

GIF’ler 256 renkten oluşan sınırlı bir renk paletine sahiptir ve kayıpsız sıkıştırma kullanır. Ancak, PNG-8 dosyaları da çok daha küçük dosya boyutunda ve şeffaflığı da var.

Bu nedenle, belki de GIF’ler için tek kullanımlık durum, HTML 5’i desteklemeyen eski tarayıcılarla uyumlu bir şey sunmaya çalıştığınızda, yada kasten kötü veya nostaljik bir etki yaratmak istediğinizdedir.


En Uygun Dosya Boyutu Olası En Küçük Olandır

Sitenizdeki görüntüleri göstermek için harika olsa da, bu ucuza gelmiyor! Yayınlamak için çok fazla kaynak harcıyorlar. En iyi yaklaşım, ihtiyacınız olanı ve daha fazlasını sağlayan dosya biçimini seçmektir.

WordPress, görüntüleri otomatik olarak sıkıştırarak görüntü optimizasyon bölümünde yardımcı olmaya çalışır, ancak fazla bir şey yapmaz. Bunun dışında özel bir araç size çok zaman kazandırabilir ve görüntüleri düşündüğünüzden daha hızlı bir şekilde sunar.

Kullanabileceğiniz En İyi Optimizasyon Eklentileri:

1. reSmush.it
2. EWWW Image Optimizer
3. Compress JPEG & PNG images
4. ShortPixel Image Optimizer
5. WP Smush

 

 

Site Footer