WordPress siteniz için resim optimizasyonu (4 basit adımda)
18 Haziran 2015’te güncellendi
Dijital dünyada, hızlı olmak başarılı olmak demektir. Hızlı web siteleri daha fazla isabet, daha fazla pay ve daha fazla satış anlamına gelir. Bununla birlikte, bu hıza duyulan ihtiyaç, net görsel arzularınızla çelişebilir. Ayrıca, web sitesi resim olmadan ne anlama geliyor? Görüntü bir web sayfası karakteri verir ve kullanıcıyı içerir. Ve bir fotoğraf web siteniz varsa, zengin bir ortam kesinlikle gereklidir. Ancak, görüntüler siteyi yükleyebilir. Bu yüzden onu optimize etmeniz gerekiyor. Bu yazıda, görüntü optimizasyonunun neden çok önemli olduğunu tartışacağım ve görüntü dosyanızı daha küçük hale getirmek için izleyebileceğiniz dört basit adım vereceğim – gerçek kaliteyi kaybetmeden – siteniz daha hızlı yükleme süresi ve pürüzsüz bir kullanıcı deneyimi görür.
Görüntünüzü neden optimize etmelisiniz, görüntünün boyutunu azaltmak sitenizi hızlandıracaktır; Bildiğinizden daha büyük olabilecek faydalar. Görüntüler, sayfanızın yüklenmesi için gereken sürenin saniyelerinin üzerinde birikir. Ve sitenizi yavaşlatan web öğesi söz konusu olduğunda, görüntüler genellikle nedendir. Google, “görüntüler genellikle web sayfaları tarafından genellikle indirilir ve genellikle önemli görsel alanları işgal eder.” Dedi. Siteniz fotoğrafçılığa güçlü bir odaklanıyorsa, sıradan web yöneticisinden daha fazla resminiz var. Sadece hız problemini kötüleştirdi.
Görüntüler sitenizi yavaşlatır. Devam et? Site hızında yapılan araştırmaların tartışmaya girdiği yer burası. Mesele şu ki, yavaş yükleme süresi işinize zarar verecektir. Google, arama sıralamasını belirlerken aslında site hızını faktör olarak kullanır. Bu sıralamanın temel bir bileşeni değildir, ancak yine de önemlidir. Kissmetrics Infographics, site hızının neden önemli olduğunu kısaca açıklar. Daha da önemlisi, sayfanızın her saniye geciktiğini, dönüşümde% 7’lik bir düşüş görebilirsiniz. Bu sayıyı bir gösterge olarak düşünerek, örneğin, sitenizden ayda 3.000 $ üretirseniz, her takvim değişikliğinde 210 $ gelir kaybedersiniz – yıl boyunca 2.520 $ kayıp.
Peki bir fotoğrafçı olarak görüntü tabanlı web sitelerinin potansiyel tuzağından nasıl kaçınırsınız? Daha iyi performans için görüntüleri nasıl optimize edeceğiniz aşağıda açıklanmıştır: Adım 1: Resminizi Budama
Bu ilk adım oldukça basit: Görüntünüzü kesin. Neden? Niye? İki neden: estetik çekicilik. Daha düşük dosya boyutu.
Birincisi oldukça açık. Görsel çekiciliği artıran görüntüleri kesmenin çeşitli yolları vardır. Yaratıcı bir profesyonel olarak, kırpma olabilir. Değilse, bu, istenmeyen ayrıntıları silmek, çekimlere vurguyu yeniden odaklamak için kesimleri nasıl kullanabileceğinizi düşünmeye başlamanın zamanıdır.
Ancak estetik çekicilik sadece bir bonus. Büyük etki, dosya boyutunu azaltma kablolu kabiliyetinde yatmaktadır. Resmin tüm kısmını keserseniz – sol taraftan birkaç piksel kesmek veya çevre üzerinde daha geniş bir alanı ortadan kaldırmak anlamına mı geliyor – ziyaretçilere aktarılması gereken veri miktarını azaltırsınız. Adım 2: Doğru dosya türünü seçin Görüntüyü kestikten sonra, görüntüyü optimize etmenin ilk adımı dosya türünü seçmektir. Bazı dosya formatları web’deki resimler için genel kullanımı görüntüleyin ve her biri farklı şeyler için iyidir. Bu sorun değil Her şeyi yönetmek için bir dosya türü var (bu yüzüklerin efendisi değildir). Tersine, araç kutusundaki araçlar gibi dosya türleri; İş için doğru olanı seçmelisiniz.
İşte göz önünde bulundurmanız gereken ana dosya biçimi: jpeg
‘Kayıp’ JPEG (aşağıda) sıkıştırma (yukarıda) ile sıkıştırılmayan görüntü örnekleri. Bu dosya biçimi, özellikle fotoğraf verilerini, özellikle fotoğraf verilerini etkili bir şekilde sıkıştırmak için özel olarak oluşturulur. Bu, önemli ayrıntılarla fotoğraf veya diğer gerçekçi görüntüler için en iyi seçimdir. JPEG’nin ‘kayıplı’ bir sıkıştırması vardır, yani iyi optimize etseler bile, bunu bazı bilgiler pahasına yaparlar. Ortalama fotoğrafınız için, iyi sıkıştırılmış JPEG, biraz görüntü kaybı ile iyi bir iş çıkaracak.
Bugün yaygın olarak kullanılan en eski görüntü dosyası türü olmasına rağmen, GIF hala yararlıdır. Sadece 256 rengi destekliyorlar, bu yüzden asla illüstrasyonlar, resimler veya fotoğrafçılık için kullanmak istemeyeceksiniz. Bununla birlikte, GIF’in şeffaf bir arka planı, iyi bir arka planı olabilir. Sonra karakteristik bir gif var: animasyon. Küçük dosya boyutlarının buraya gelmesi kolaydır, bu nedenle görüntünüzü basitse veya animasyon içeriyorsa GIF olarak saklamayı düşünün. Png PNG’nin keskin kalitesi ve şeffaflık özelliklerine örnekler. GIF gibi, PNG dosyaları şeffaf arka planı destekler. Ancak GIF’den farklı olarak, gerçekten ‘kayıpsız’ ve çeşitli renkleri birleştirebilirler. Fotoğrafları PNG olarak kaydetmek istemezsiniz, ancak farklı geçişlere ve düz renklere sahip geniş alanlara sahip görüntüleriniz varsa (metin ve grafikler göz önünde bulundurulur), PNG biçimi en iyi şekilde çalışacaktır.
SVG
SVG ölçekli mülk örnekleri. Bu dosya türü kısaltma ölçeklenebilir vektör grafikleri anlamına gelir. SVG, çeşitli boyutlara taburcu edilebilecek görüntüler üretmek için işaretleme dili kullanır. SVG biçimi iki boyutlu grafikler için idealdir ve site hızını büyük ölçüde artıracaktır. Ancak, bu tür bir dosya hala erken aşamalardadır ve tarayıcı desteği biraz düzensizdir. Adım 3: İyi bir görüntü optimizasyon programı seçin. Kesme ve dosya türleri hakkında karar vermek yorucu olabilir. Neyse ki, dosya boyutunu azaltmanın en iyi yollarından biri, yanınızda birkaç karar içerir. Görüntü optimizasyon programları çok ağır işler yapıyor. İşte bazı harika olanlar:küçük. Bu web tabanlı uygulama, PNG dosyanızdaki renk sayısını seçici olarak azaltır, bu da dosya boyutunu neredeyse görünmez görüntü kalitesi farklılıkları ile azaltır. JPEGMINI. Bu yazılımın altında yatan şey, kaliteyi etkilemeden görüntünün büyüklüğünü mümkün olduğunca azaltmaya çalışan bir patent bekleyen bir teknolojidir. Ücretsiz bir deneme alabilir veya sürekli olarak kullanmak için ödeme yapabilirsiniz. Huzursuzluk. Ücretsiz olarak indirebileceğiniz radikal görüntü optimizasyon araçları, görüntü dosyası boyutlarını azaltmak için çeşitli teknikler kullanın. Bu program düzgündür, çünkü orijinal görüntünün ve yeni optimize edilmiş görüntünün yanında ekran yan yana verir.
Optin görüntüsü. Bu, kaliteyi mümkün olduğunca korurken görüntü boyutunu azaltmak için çeşitli teknikler kullanan Mac için ücretsiz bir uygulamadır.
Mandiri uygulamasının dışında WordPress, aynı hedeflere daha kolay ulaşmanıza izin veren bir dizi eklenti sunar. Bunlar ilk üçümüz: Optimal görüntü ewww
WordPress için Tinypng
WP smush.it
4. Adım: Bir Küçük Resim Oluşturun
Küçük resim, küçük dosya boyutları ve büyük yüksek çözünürlüklü görüntüler arasındaki dengeyi dengelemenin iyi bir yoludur. Varsayılan işlevselliğin bir parçası olarak, WordPress, görüntünün küçük önizlemelerini (hem fiziksel hem de dosya boyutunda) üreten bir küçük resim seçeneği sunar. Bu görüntüler sayfa yükleme süresini önemli ölçüde azaltabilir. Küçük bir resimle ilgili sorun, elbette, belirli fotoğrafların veya görüntülerin canlı ayrıntılarını gösterememenizdir. Neyse ki, WordPress bunun üstesinden gelmek için kolay bir yol sağlar. Küçük resimleri bir gönderi veya sayfaya girdiğinizde, ek menüsünü açıp “Medya Dosyaları” nı seçerek orijinal görüntüye bir bağlantı ekleyebilirsiniz. Ziyaretçiler daha sonra görüntünün genişlemiş versiyonunu yüksek çözünürlükle görmek için mini görüntüyü tıklayabilir. Sonuç Sitenin hızı önemlidir. Onsuz yaşayabilirsin, ama gelişmeyeceksin. Yükleme sayfalarının hızını azaltmak için ana kaldıraç noktası, görüntünüzü çevrimiçi yerleştirmeden önce optimize etmektir. Görüntüleri optimize etmek için hangi taktikleri veya programları kullanıyorsunuz? Yorumlara satır bırakarak bize söyleyin. Ve bir sorunuz varsa, sormaktan çekinmeyin! Kredi resmi: Wikimedia
