Birçok girişimci ve pazarlamacı için görseller işleri için çok önemlidir. Resimlerin hem kullanıcılar hem de bir web sitesinin performansı üzerinde muazzam bir etkisi olabilir, bu nedenle, sitenizin refahı için resim optimizasyonunda uzmanlaşmak çok önemlidir.
Görüntü optimizasyonu tam olarak nedir ve web siteleri için görüntüleri nasıl optimize edersiniz? Resimlerinizin sorunsuz bir şekilde yüklenmesini sağlamak için dikkat etmeniz gereken tüm gerekli adımları sizinle paylaşacağız.
Bu özette size aşağıdaki konularda yol göstereceğiz:
-
Görüntü Optimizasyonu ve Faydaları
-
Görüntüler Nasıl Optimize Edilir?
-
Görüntü Optimizasyon Araçları
Görüntü Optimizasyonu ve Faydaları
Görüntüleri optimize ettiğinizde, görüntü kalitesinden ödün vermeden boyutlarını küçültürsünüz. Ve dosyalarınızın boyutunu küçülttüğünüzde sayfalarınız daha hızlı yüklenir. Bu hem SEO’nuz hem de ziyaretçileriniz için önemlidir. İçeriğiniz ne kadar hızlı tamamen yüklenirse, hemen çıkma oranı o kadar düşük olur. Görüntüler söz konusu olduğunda akılda tutulması gereken bir diğer şey de, yüksek kaliteli görüntüler anlamına gelen iyi çözünürlüğün zorunluluğudur. Photoshop gibi araçları kullanarak bir görüntünün çözünürlüğünü artırmak oldukça kolaydır, bu yüzden onu atlamak için bahane bulmalısınız. Fakat hız amaçlı görüntü optimizasyonu olan bugünkü konumuza geri dönelim.
Yaklaşık on yıl önce Google, site hızını ilgili sıralama faktörleri arasına dahil etmeye karar verdi. Web yöneticilerinden biri olan John Mueller, 2016’da şöyle yazmıştı: web sitelerinin yüklenmesi 2-3 saniyeden az sürmelidirve bu hala bu günle alakalı.
Zaman içinde Google, insanların web sitelerinin hızını değerlendirmelerine yardımcı olmak için Google’ın PageSpeed Insights’ı gibi araçlar bile geliştirdi. Pingdom, GTmetrix veya Sayfa Ağırlığı (size sayfa hızınızı ne kadar resim etkilediğini söyler) gibi sayısız başka araç aynı amaca hizmet eder, fakat PageSpeed Insights, SEO uzmanları arasında oldukça popüler olmaya devam etmektedir.
Daha iyi sıralama için bazıları tamamen ücretsiz olan optimizasyon araçlarını kullanmayı unutmayın.
Resimleriniz çok büyükse, Google muhtemelen onları tarayamaz ve dizine ekleyemez ve bu, daha düşük sıralamalara katkıda bulunan başka bir faktör olabilir. Ziyaretçilerinizin bir kısmının Google Görsel Arama’dan geldiğini unutmayın (resim trafiğinizi Google Analytics’te kontrol edebilirsiniz), bu yüzden onları elinizde tutmak için elinizden gelenin en iyisini yapın.
Daha küçük görüntü dosyalarını kullanmanın bir başka yararı da, anında yedek oluşturabilmenizdir. Ayrıca daha az depolama alanı kaplarlar (bu da yedek depolama maliyetini düşürür) ve daha az bant genişliği emer. Çoğu barındırma planı, plan başına belirli bant genişliği limitleriyle birlikte gelir, bu nedenle resimlerinizi akıllıca kullanmalısınız.
Görüntüler Nasıl Optimize Edilir?
Resimlerinizi ideal şekilde optimize etmek için dikkat etmeniz gereken birkaç şey vardır:
-
Dosya formatları
-
Görüntü Boyutları
-
Görüntü Sıkıştırma
-
Resim Adları
-
Görüntüleri Bulanıklaştır
Dosya Biçimlendirme
Size uygun dosya formatını nasıl seçeceğinizi göstererek başlayalım. Orada çok sayıda görüntü formatı var, fakat en yaygın üçü:
-
JPEG : Bu durum web’de en yaygın kullanılan görüntü dosyası türlerinden biridir. Bu durum kayıplı bir biçimdir, bu da resimlerin sıkıştırıldığı ve orijinal kalitelerinin bir kısmının kaybolduğu anlamına gelir. Genel sıkıştırma oranı 10:1’dir, bu nedenle görüntünüz 10MB ise, onu bir JPEG dosyası olarak dışa aktardıktan sonra, boyutu 1MB olacaktır. JPEG dosyalarının harika bir yanı da, görüntünüzü Photoshop veya GIMP’de bile ne kadar sıkıştırmak istediğinizi seçebilmenizdir. Dosyalarınızı JPEG olarak kaydetmenin dezavantajı, sıkıştırma sırasında atılan bilgileri geri alamamanız ve şeffaflık desteğinin olmamasıdır. Bulanık görünebileceklerinden, metin ağırlıklı veya çok sayıda tanımlanmış çizgi içeren görüntüleri kaydederken bundan kaçının.
-
PNG : saydamlığı destekleyen kayıpsız bir biçimdir. PNG-8 ve PNG-24 olmak üzere iki tür PNG formatı vardır. İlki, piksel başına 8 bit olan görüntüleri (basit renkli logolar ve resimler gibi) ifade eder ve ikincisi, bir görüntünün piksel başına 24 bit olduğu anlamına gelir (16 milyona kadar rengi destekler, bu da onu karmaşık fotoğraflar için uygun hale getirir) . JPEG daha yaygın olmasına rağmen şeffaf piksellere ihtiyaç duyulduğunda PNG göze çarpan bir seçimdir.
-
GIF : Bu durum kayıpsız sıkıştırma kullanan başka bir yaygın biçimdir. Fakat bir GIF görüntüsü yalnızca 256 renk içerir, bu da onu afişler gibi çok fazla renk içermeyen basit görüntüler için uygun hale getirir. Bir görüntüyü, her biri 256 renk içeren birden çok bloğa bölebilirsiniz, böylece blokları tek bir görüntüde birleştirdiğinizde, çok daha fazla renge sahip bir dosyanız olur. Fakat bunu yaparsanız, dosyanız oldukça büyük olacaktır, bu yüzden ondan kaçınabilirsiniz.
Görüntü Boyutları
Akıllı telefonunuzla veya profesyonel bir kamerayla çektiğiniz görüntülerin 300 dpi civarında büyük çözünürlükleri ve en az 2000 px ve üzeri boyutları vardır. Fakat o kadar büyük fotoğraflar web sitelerine uygun değildir, yüklenmesi sonsuza kadar sürer. Elbette, görsellerinizin etkileyici görünmesini istersiniz, fakat yine de yükleme süresinin kısa olması gerekir. Bu yüzden web sitenize eklemeden önce Photoshop’ta veya seçtiğiniz başka bir görüntü düzenleme yazılımında görüntü boyutunu değiştirmeniz gerekir. Çözünürlüğün kendisi sonuçta, 100 kb veya maksimum 150 kb’nin altında kalması gereken görüntünün ağırlığı kadar önemli değildir. Ama bir sonraki bölümde bunun hakkında daha fazla bilgi.
Görüntü Sıkıştırma
Aşırıya kaçarsanız ve görüntünüzü çok fazla sıkıştırırsanız, bu, küçük bir dosya boyutuna ve düşük kaliteli bir görüntüye neden olur. Öte yandan, bir sıkıştırma oranı büyük olmadığında, görüntüler harika kaliteye sahiptir ancak aynı zamanda büyüktür.
Genel bir kural olarak, web sitenizin toplam ağırlığı 2 MB’ı geçmemelidir. İdeal olarak, hızlı yüklenen web sitesinin boyutu yaklaşık 1 MB olmalıdır.
Bunu göz önünde bulundurarak, görüntülerinizi yaklaşık 150 KB veya daha küçük tutmayı düşünün. PNG biçimini kullanıyorsanız, 100 KB’yi aşmayın.
İki tür sıkıştırma vardır: kayıplı ve kayıpsız.
Kayıplı veya geri alınamaz sıkıştırma, verilerin ve kalitenin bir kısmının orijinal sürümden kaybolacağı anlamına gelir. Dosyanın boyutunu önemli ölçüde azalttıktan sonra bile, gözle görülür bir fark yokmuş gibi görünecektir. Elbette, daha yakından incelendiğinde, bu farklılıklar daha belirgin olacaktır. Yeni dosya boyutu çok küçükse, görüntünüzde bazı pikselli alanlar ve pürüzlü kenarlar görebilirsiniz.
Kayıpsız sıkıştırma, görüntü boyutunu kalitesini düşürmeden küçültmenizi sağlayan bir yöntemdir. Bir dosya kayıpsız bir şekilde sıkıştırıldığında hiçbir veri kaybolmaz, yani orijinal veriler herhangi bir zamanda kurtarılabilir. Fakat hiçbir veri kaldırılmadığından dosyalar %50’den fazla sıkıştırılamaz.
Resim Adı
Bu adımı gözden kaçırmayın. Google ve diğer arama motorları resim dosyalarınızın adlarını taradığından, resim dosyalarınıza uygun adlar vermek resim SEO için önemlidir. Jenerik adlardan kaçının, bunun yerine açıklayıcı yoldan ilerleyin ve anahtar sözcükleri ekleyin. Örneğin web sitenizde bir araba resmi varsa, dosya adında markasını ve modelini belirtebilirsiniz.
Alt nitelikleri, diğer bir deyişle resimlere metin alternatiflerini optimize etmek de önemlidir. Herhangi bir nedenle tarayıcı bir görüntüyü oluşturamazsa, bunun yerine alternatif metin gösterilir. Bir sayfa tamamen yüklendiğinde bile, bir resmin üzerine geldiğinizde alt nitelikler görünür. Web sitenizin SEO’sunu etkiledikleri ve resimlerinizin Google görsel aramada görünme şansını artırdıkları için oldukça önemlidirler. Arama motorları bunu yaptığınız için sizi cezalandırabileceğinden, alt niteliklerinizi anahtar kelimelerle aşırı doldurmamaya dikkat edin.
Bulanık Görüntü Önizlemesi
Bu adım, önce bir görüntünün daha düşük kaliteli sürümünü yükleyerek hızlı yüklenen, yüksek kaliteli görüntüler izlenimi yaratmakla ilgilidir. Ziyaretçileriniz web sitesinin tamamen yüklenmesini beklerken, görüntünün daha küçük hali görünür. Orijinal boyutuna kadar uzatılmış ve bulanık görünüyor, fakat bu, tam boyutlu görüntü yüklenmeden önce yalnızca çok kısa bir süre sürüyor. Bazı temel CSS bilgisi gerektirse de, bulanıklaştırma efekti oluşturmak aslında oldukça yapılabilir.
Görüntü Optimizasyon Araçları
Görüntü optimizasyon araçları, görüntülerinizi ihtiyaçlarınıza göre değiştirmenize olanak tanır. Bunları sıkıştırabilir, dosya türlerini değiştirebilir, görüntü boyutlarını vb. değiştirebilirsiniz.
Adobe photoshop
En popüler görüntü düzenleme aracı şüphesiz Adobe Photoshop’tur. Bazı etkileyici görüntü düzenleme özellikleri içerir, fakat Web için Kaydet seçeneği özellikle ilgi çekicidir.
Kalitesinden ödün vermeden fotoğraflarınızdan birinin boyutunu küçültmeniz gerektiğinde bu seçeneği kullanın. Görüntü türünü, görüntü kalitesini ve boyutları seçmenize olanak tanır. Kalite ve Bulanıklaştırma seçeneklerine dikkat edin. Bunları değiştirerek (diğer ayarlara dokunmadan bile), çok ağır olmayan yüksek kaliteli bir görüntü elde edebilirsiniz.
Photoshop’un yanı sıra Gimp, TinyPNG, JPEG Mini, Paint.NET, ImageOptim (Mac kullanıcıları için), Trimage, Ezgif ve diğerlerini de kullanabilirsiniz.
WordPress’te Görüntü Optimizasyon Eklentileri
WordPress, fotoğraflarınızı çok fazla uğraşmadan optimize etmenize yardımcı olabilecek pek çok şık eklentiyle birlikte gelir. Fakat her biri ne kadar güçlü olursa olsun, resimlerinizi WordPress’e yüklemeden önce yeniden boyutlandırmanız gerekir, aksi takdirde çok sayıda değerli barındırma alanını kaybedebilirsiniz.
Görüntü optimizasyonu için en iyi eklentilerden bazıları arasında Optimole, EWWW Image Optimizer Cloud, Imagify, Smush, Optimus – WordPress Image Optimizer ve Compress JPEG & PNG Images bulunur.
Smush, 1 milyondan fazla aktif indirme ile en popüler olanıdır, fakat hangi eklentiyi seçerseniz seçin, web sitenizin daha hızlı yüklenebilmesi için resimleri optimize etmenize yardımcı olacaktır. Dikkat edebileceğiniz tek şey, yüklediğiniz bir eklentinin görüntüleri kendi sunucularında harici olarak sıkıştırabilmesi ve optimize edebilmesidir. Bu şekilde, sayfa yükleme süreniz resim boyutlarından etkilenmeyecektir.
Çözüm Yolu
Görsel optimizasyonu, web sitenizin kusursuz performansı için belirleyici faktörlerden biridir. Kötü yapılırsa, düşük sıralamalar, yüksek yükleme süreleri, büyük sıçrama ve düşük dönüşüm oranları riskine girersiniz. Görüntüleri düzgün bir şekilde optimize etmek, yalnızca daha başarılı bir online iş yürütmenize yardımcı olmakla kalmaz, aynı zamanda web siteniz gelişmeye ve genişlemeye devam ederken kesinlikle ihtiyaç duyacağınız çok sayıda site depolama alanından tasarruf etmenizi sağlar.
Kötü kullanıcı deneyiminden hiçbir zaman iyi bir şey çıkmadı, bu nedenle web için görselleri nasıl optimize edeceğinize ilişkin ipuçlarımızı izleyin ve web siteniz saat gibi çalışacaktır.