Web siteleri için en iyi resim biçimi!PNG, JPG, GIF ve WebP
Görüntü optimizasyonu, ihtiyaçlarınız için en iyi dosya biçimini seçmekle başlar. Bu PNG ve JPEG’nin ötesine geçiyor. Her şeyi yönetmek için tek bir dosya biçimi yoktur. Her insanın imajının ihtiyaçları farklıdır, bir sitedeki farklı görüntülerin bile farklı gereksinimleri vardır. Ama endişelenme, size yardım ediyoruz. Bu yazıda, WordPress siteniz için en iyi resim biçimini nasıl seçeceğinizi öğreteceğim. Eski favori JPEG, PNG ve GIF’i ve WebP ve SVG gibi sonraki birkaç kuşak tartışacağız. Görüntülerinizi bir profesyonel gibi optimize edebilmeniz için güçlü yönleri, zayıf yönleri ve ideal kullanım vakalarını tartışacağız. Ayrıca, başvurabilmeniz için indirilmiş PDF hile sayfalarını da topluyorum! Kopyanızı almak için buraya tıklayın
Görüntünüz için en iyi dosya türlerini bulmak için dosyaları biçimlendirmek için Smush kılavuzunu kullanın.Verileri asla akrabalarınızla paylaşmanız gerekmez ve bu doğru dosya biçimini seçmenin neden önemli olduğu görülür? Çünkü giderek daha fazla ziyaretçi mobil cihazlarda web sitelerini ziyaret ediyor. Sadece ağ hızı özel ağlara kıyasla nispeten daha yavaş değil, aynı zamanda herkesin sınırsız verisi yoktur. Google, arama sonuçlarında daha düşük görüntüleyerek çok yavaş içeren bir sayfayı cezalandırdığından, yükleme süresinin arttırılması trafiği, satışları ve dönüşümü artırmanın kolay bir yoludur.
Yanlış görüntü formatını seçtiğinizde, yanlışlıkla gerekenden daha büyük bir görüntü sunabilirsiniz. Ek görüntü dosyalarının (şeffaflık gibi), gereksiz detayların ve çok fazla renk yeteneği görüntünüze şişkinlik katar. Bazen, bu gereklidir ve bir dahaki sefere değil. Örneğin, görüntünüzde şeffaflık yoksa, şeffaflığı desteklemeyen görüntü türünü seçerseniz gerçekten pes etmeyeceksiniz. Anahtar sadece ihtiyacınız olanı eklemektir. Optimal dosya boyutunu seçme, optimal dosya boyutunu seçmek için web sayfalarınızın geri kalanıyla ilgili olarak görüntüleri de göz önünde bulundurmanız gerekir. Ortalama web sayfası şu anda 2MB’ye yakındır, bu nedenle nispeten hızlı bir siteye sahip olmak için bu sınırın altında kalmak istersiniz. Bu, sadece resimler değil, sitenizdeki toplam varlıkları görmeniz gerektiği anlamına gelir. 1MB ölçen büyük ayrıntılı kahramanlar, sayfada çoğu metin içeren tek resim ise büyük bir sorun olmayacaktır; Ancak, 1 MB boyutunda sayfalarda 10 büyük görüntü gösterecekseniz, yükleme çok ağır olacaktır. Daha az görüntü görüntüleyerek veya her şeyi daha küçük boyutta görüntüleyerek uzlaşabilirsiniz. Görüntüler nasıl sıkıştırılır: Kayıplı ve Kayıpsız İdeal Görüntü Biçimi 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 iki algoritmik işlemi kullanmalıdır. Tüm formatlar her ikisini de desteklemez.
Kayıplı sıkıştırma ile, verilerinizin bir kısmı sonsuza dek kaybolacaktır. Kaybeden görüntü sıkıştırması, görüntü verilerini kalıcı olarak siler ve işlemdeki görüntüleri düşürür. Bu göründüğü kadar kötü değil, çünkü bu ek detaylardan bazıları insan gözü tarafından bile görülmeyebilir. Kayıpsız görüntü sıkıştırması, tersine, hiçbir şeyin eksik olmayacak şekilde verileri tutar. Kayıpsız algoritma, görüntüyü doğru bir şekilde yeniden oluşturmak için gereken tüm verileri saklar. İdeal olarak, görüntünüz önce kayıplı sıkıştırma aşamasından ve daha sonra kalanların optimize edileceği kayıpsız fazdan geçecektir. JPEG JPEG görüntü optimizasyonu, ortak fotoğraf uzmanları grubunun kısaltmasıdır ve fotoğraflar için kullanılmak üzere tasarlanmıştır. Çoğu dijital tüketici ve mobil kamera için standart bir dosya biçimi olarak, her yerde bulacaksınız. JPEG’nin çeşitli avantajları var:
JPEG, zengin ve canlı görüntüler üretmek için milyonlarca renk içerebilir
Çok fazla renkte bile nispeten küçük dosya boyutları üretiyorlar
Tüm modern tarayıcılarda desteklenirler.
JPEG’nin web için popüler bir dosya biçimi olduğuna şaşmamalı. JPEG sessizlik fotoğrafları için tasarlandığından, JPEG şeffaflığı veya animasyonu desteklemez.
JPEG JPEG Sıkıştırma, dosya boyutunu küçük tutmak için kayıplı sıkıştırma kullanır. JPEG Sıkıştırma TÜM ayarlar değil veya hiç değil. Durumunuz için ideal bir denge oluşturmak için sıkıştırma oranını% 0 (şiddetli sıkıştırma)% 100’e kadar (sıkıştırmadan) ayarlayabilirsiniz. Genel olarak, görüntülerin% 75-100’ü arasında sıkıştırılması yüksek bütünlük ve görüntü kalitesini koruyacaktır, ancak görüntünün% 75’inde yarısıdır. Yarım! Bu nedenle çoğu sosyal ağ, görüntülerini%70-85 aralığında sıkıştırır. Facebook Örneğin, görüntünüzü%85 sıkıştırın. Görüntünüzü Adobe Photoshop veya Lightroom’da hazırlarken, kaydırıcıyı hareket ettirmekten korkmayın. Sadece bu iki resme bakın. Biri sıkıştırılmamış ve 229K, diğeri ise% 75 ve 95K sıkıştırılmıştır.
Seçenekler 1
Hangisini söyleyebilir misin?
Seçenekler 2 JPEG-2000 adı verilen bir JPEG kayıpsız format vardır, ancak yaygın olarak benimsenmez. Ayrıca, sıkıştırılmış görüntülerin sıkışmasını her zaman önlemelisiniz. Hiç bir fotokopinin bir kopyasını yaptınız mı veya sosyal medyada görüntüleri indirip yeniden oluşturdunuz mu? Sıkıştırma dönüşünü tekrar geçeceğiniz için kalite bozulacaktır.
(Bu arada, Seçenek 1 sıkıştırılmış bir görüntüdür) Boyutu değiştirmenin ve WordPress JPG VS ile azaltılan görüntüleri servis etmenin doğru yoludur. PNG JPEG, yüksek kontrastlı görüntüler için zayıf bir seçimdir. Bu yüzden JPEG’nin beyaz arka planda siyah metin olan ekran görüntüleri bulanık olma eğilimindedir. JPEG, fotoğraflar için, özellikle metinsiz olanlar, daha küçük görüntü dosyaları görüntü kalitesine öncelik verdiğinde ideal bir görüntü dosyası türüdür. Örneğin, JPEGS profesyonel fotoğrafçılığını vurgulayan büyük bir kahramanın resmi PNG’den önemli ölçüde daha küçüktür. Yukarıdaki manzaramızın PNG olarak resmi 329K, sıkıştırılmış versiyondan neredeyse 3.5x daha büyük. Bu, yukarıdaki aynı resmin PNG sürümü sadece 329kb PNG diğer favori web görüntü dosyaları seks hadi, png. PNG, lisans sorunları, dolayısıyla fonksiyonel benzerlikler nedeniyle GIF’in yerini alacak şekilde tasarlanmıştır. PNG 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 yapılabilir. Sonuç olarak, PNG, metin açısından bile resimde ince ayrıntıları korur. Dezavantajı, PNG dosya boyutlarının tüm bu veriler nedeniyle diğer görüntü dosyası türlerinden daha büyük olma eğiliminde olmasıdır.
Diğer bir avantaj şeffaflık için destektir. Sadece şeffaf bir arka plana sahip bir logo dosyası oluşturmakla kalmaz, aynı zamanda gelişmiş şeffaflık gradyanları ve PNG ile daha fazlasını da yapabilirsiniz. Üç tip PNG, gizemli olan üç tip PNG: PNG-8, PNG-24 ve PNG-32’dir. Teknik olarak bir animasyon da var, ancak bunu tartışmayacağız çünkü yaygın olarak desteklenmedi. PNG-8 PNG’den GIF gibi. PNG-8, 256 endeksli rengi destekler, ancak çok daha küçük bir dosya boyutuna sahip, eşdeğer JPEG’den bile daha küçük. GIF’den farklı olarak, PNG-8’in zayıf animasyon desteği vardır. PNG-8, site logoları ve simgeler gibi şeffaf arka planlara sahip basit web grafikleri için idealdir. PNG-8 8 bit rengi desteklerken, PNG-24 24 bit rengi destekler, bu da 16 milyon rengi desteklemek anlamına gelir. EVET! PNG-24 daha çok JPEG’ye benziyor, ancak çok daha büyük bir dosya boyutuna sahip. Ancak PNG-24 görüntü kalitesi, büyütüldüğünde bile çok iyidir, bu da e-Niaga fotoğrafları ve ekran görüntüleri veya metinli görüntüler için idealdir.
Web için Photoshop Kaydet iletişim kutusunda PNG yaparsanız, PNG-32’nin bir seçenek olarak kayıtlı olduğunu görmezsiniz, ancak şeffaflık için destek eklerseniz PNG’niz gizlice PNG-32 olarak değiştirilecektir. Nedenmiş? PNG-32, gelişmiş şeffaflık özellikleri için ekstra 8 bit alfa kanalları ile 24 bit rengi destekler. PNG-32, şeffaflık gradyanlarıyla gelişmiş görüntüler yapma yeteneğine sahip olacak şekilde tasarlanmıştır. Bu sofistike yetenek, PNG-32’nin çok daha büyük bir dosya boyutu ürettiği anlamına gelir.Karmaşık şeffaflık gerektiren görüntüler yapmazsanız, yine de PNG-24 kullanın.Solmayan görüntülerin bir yer paylaşımı yaparsanız, bu PNG-32 için bir iştir.Örnekleri burada görebilirsiniz.Photoshop’ta yaptığım resim, tam opaklıktan renksiz şeffaflığa dönüşen iki renge sahip şeffaf bir gradyana sahiptir.Bunu göstermek için, .png-32/166kb kullanarak görüntünün arkasındaki arka planı siyah olmayı sağladım
Siyah arka planın görüntünün nasıl görüntülendiğini nasıl etkilediğini görebilirsiniz, çünkü gradyan boyunca renkleri zimmetine geçirir.
PNG-8 / 37KB Yukarıdaki PNG-8 için bu etki bozulur. PNG-8 görüntüsü yalnızca bir şeffaflığı destekler, böylece şeffaflık sadece üstteki ince bir çarpık şeritte görünür. WebPS PNG ve JPEG’den en iyisini birleştirebiliyorsanız daha iyi değil mi? Google aynı şeyi düşünüyor ve açık kaynak webp formatını buluyor. WebP, görüntüleri optimize etme açısından en iyi sırlardan biri olabilir. YouTube ve eBay gibi büyük siteler site performansını artırmak için kullanmaya başladı. İki tür webp görüntüsü vardır. Bunlardan biri sadece WebP olarak bilinir ve kayıplı sıkıştırma kullanır. Bunu WebP formatının JPEG sürümü olarak değerlendirebilirsiniz. Photoshop gibi programlarda kayıplı bir webp oluşturduğunuzda, sıkıştırma seviyesini seçmelisiniz. Başka bir sürüm kayıpsız webp olarak bilinir ve daha çok PNG gibidir. Daha yüksek bir dosya boyutu alacaksınız, ancak ayrıntıları kaybetmeyeceksiniz. Her iki WebP formatı da JPEG ve PNG formatlarından çok daha küçük görüntüler üretir. Tam olarak ne? Google verilerine göre, ortalama olarak,% 25-34, karşılaştırılabilir JPEG’den daha küçük ve karşılaştırılabilir PNG’den% 26 daha küçük. Bu çok büyük! Öyleyse neden hepimiz WebP görüntülerine geçmedik?
İşte kötü haber. WebP 2010’da bir görüntü sahnesine adım atmasına rağmen, Firefox ve Safari bunu desteklemedi. Safari hala değil, Firefox şimdi yükselmiş olsa da, muhtemelen sadece bir zaman meselesi. Yani şu anda WebP, tarayıcı tarafından tam olarak desteklenen bir çözüm değildir. WebP’yi desteklemeden bir tarayıcı kullanan ziyaretçilere eşdeğer olan PNG veya JPEG’yi sunarak bu sınırın üstesinden gelebilirsiniz. WordPress için bu harika webp dosyasını oluşturmak için, bunu sizin için yapmak için bir eklenti kullanabilirsiniz. Aslında, Smush Pro CDN görüntüleri WebP’ye dönüştürür. Birisi sitenizi WebP’yi destekleyen bir tarayıcıda ziyaret ederse, Smush resimlerinizi dönüştürür ve WebP görüntüleri sunar. WebP’yi desteklemeyen bir tarayıcı kullanırlarsa, günlük JPEG veya PNG’nizi alırlar. İki tür görüntü grafiğinin hikayesi iki tür görüntü, vektör ve raster grafik vardır. Matematik vektör görüntüleri, geometrik şekiller oluşturmak için çizgiler ve eğrilerle bağlanan bir dizi noktadan üretilir. Bir vektör grafiği ile görüntüler, görüntü kalitesine zarar vermeden büyük veya küçük herhangi bir şekle dönüştürülebilir. Raster grafiği, tersine, bir ızgarada düzenlenmiş piksellerden oluşur ve her piksel rengi temsil eder. Raster grafikleri yalnızca görüntülenmesi amaçlanan çözünürlükte yüksek kalitede görünür. Görüntü daha büyük bir boyuta renk değiştirilirse, pikselasyon meydana gelir. SVG Bir şeyi düzeltelim, SVG aslında bir görüntü dosyası biçimi değil. SVG, iki boyutlu grafik yapmanızı sağlayan bir işaretleme dilidir. SVG, PNG veya JPEG’den daha çok HTML gibidir.
SVG teknik olarak XML’ye dayanır ve JavaScript ve CSS ile manipüle edilebilir ve canlandırılabilir. Sadece bu inanılmaz kahraman resmine bakın. SVG de benzersizdir, çünkü şimdiye kadar tartıştığımız görüntü formatı gibi değil, SVG bir vektör görüntüsü yaptı. Bu, görüntünün sınırsız boşaltılabileceği ve tüm çözünürlüklerde iyi göründüğü anlamına gelir. Bu da onları farklı cihazlara uyum sağlamada mükemmel hale getirir. Diğer görüntü dosyası türlerinde meydana gelen bir piksel alamazsınız. Bununla birlikte, SVG logolar, bayraklar, grafikler ve simgeler gibi geometrik şekillere dayalı basit görüntüler görüntüleyecek şekilde tasarlanmıştır. Fotoğraf için iyi çalışmıyorlar. Adobe Illustrator, Inkscape, Vectr, SVG-Düzenli veya Sketch gibi vektör programlarında SVG oluşturabilirsiniz. Basit bir görüntü yaparsanız, ortaya çıkan dosya boyutu PNG, JPEG veya WebP görüntülerinden, hatta yüksek çözünürlüklü büyük görüntülerden çok daha küçük olacaktır. Karmaşık SVG dosyası bu karı ortadan kaldıracaktır. Bu işaretleme dili olmasına rağmen, Google SVG’yi dizine ekledi, böylece SVG görüntü aramasında göründü. Ve tüm tarayıcılarla uyumludurlar. SVG’ye mi yoksa SVG’ye mi? Sizi SVG’de satmışsam ve bu makaleyi okurken WordPress’e yüklemeye çalışırsanız, WordPress’in güvenlik nedeniyle SVG’ye izin vermediğini fark edebilirsiniz. Ancak WordPress tek kişi değil. Orta, Tumblr ve Facebook gibi sosyal ağlar da SVG’ye izin vermez. Bunun etrafında çalışmayı deneyebilir ve SVG’ye izin vermek için işlev dosyalarınızı değiştirebilirsiniz, ancak tavsiye etmeyeceğim. SVG bir işaretleme dili olduğundan, kötü amaçlı yazılım enjeksiyonuna açıktır.
Sitenin yöneticisiyseniz ve SVG’yi etkinleştirirseniz, ancak sitenizin yazar ve katkıda bulunduğu risklerin farkında değilse, bilmeden sızan SVG dosyalarını yükleyebilirler. SVG’ye izin vermek için bir eklenti yüklemeye karar verirseniz, SVG’yi yalnızca güvendiğiniz kişilerden yükleyebilir ve SVG’yi SVG’yi güvenli bir şekilde nasıl yükleyeceğini anlayan kişilere yükleme yeteneğini sınırlayabilirsiniz. GIF Son zaman için en ünlü dosya türünü kaydettim. Şakaları kötü bir şekilde canlandırmak iyi olsa da, GIF son zamanlarda diğer birçok şey için iyi değildir. Aklını patlatacak bir şey bilmek ister misin? Twitter’daki GIF animasyonu artık GIF bile değil! Bu bir webm dosyası. Çünkü gerçekte, GIF asla animasyon için tasarlanmadı. Çok büyük bir dosya boyutu üretirler. Ne kadar çok çerçeve olursa, sonuçlar o kadar kötü olur. WebM dosyalarına geçerseniz, 9 kat daha küçük ve kalite çok daha yüksek bir dosyanız olacaktır. MP4, tüm tarayıcılarla uyumlu bir başka iyi seçenektir. GIF, 256 renk sınırlı bir renk paletine sahiptir ve kayıpsız sıkıştırma kullanır. Ancak, PNG-8 dosyalarının yanı sıra ve çok daha küçük bir dosya boyutunda ve aynı zamanda şeffaflık var. Bu yüzden belki de GIF için tek kullanım durumu, HTML 5’i desteklemeyen eski bir tarayıcı ile uyumlu bir şey sunmaya çalıştığınızda, kasten kötü veya nostaljik etkiler için görünür.En uygun dosya boyutunu hızlandırmak için ana mega kılavuz WordPress, niyetinizi iletmek için sitenizdeki görüntüleri kullanmak iyi olsa da mümkün olan en küçük olanıdır, 1000 kelime ucuz değildir! Hizmet etmek için çok fazla kaynak alıyorlar. En iyi yaklaşım, ihtiyacınız olanı veren ve daha fazlasını vermeyen bir dosya biçimi seçmektir. Hızlı işlevsellik özetini takip etmek WordPress, görüntüleri otomatik olarak sıkıştırarak görüntü optimizasyonu departmanında yardımcı olmaya çalışır, ancak çok yardımcı olmaz. Bunun için, Smush Pro gibi özel araçlar çok zaman kazandırabilir ve hayal ettiğinizden daha hızlı görüntüler gönderebilir. Bu yazıyı yazıp WebP görüntüleri, sıkıştırma ve diğer resimler optimizasyon tekniklerini öğrendiğimde, kişisel sitemi geliştirmek için bulduğum yeni bilgiyi kullanmaya istekliydim. Smush Pro’nun düğmeyi çevirerek bunu yaptığını öğrendiğimde bir webp görüntüsü nasıl yapılacağına dair uzun bir öğretici okumak üzereydim. Ayrıca CDN Smush’ı etkinleştirdim ve açılış sayfamı gördüm. Smush Pro yükleme görüntüleri birkaç sayfada 3 saniye sürmeden önce, ancak WebP’ye dönüştükten ve Smush CDN’yi kullandıktan sonra bir saniyeden daha kısa bir sürede yayınlanacaktır. Hayran kalmıştım. Ücretsiz Smush Pro’yu deneyebilirsiniz. Lütfen ve siteniz için farkın ne kadar büyük olduğunu görün.
Şimdi resminizi seçme yeteneğine daha fazla güveniyor musunuz? Sitenizdeki ipuçlarımdan birini deniyor musunuz? Sayfa hızını nasıl artırıyorsunuz?
Etiket:
görüntü formatı
Resim Optimizasyonu
smuş
WebP
