SEO Dostu Olmak İçin Resimlerinizi Optimize Etme (Komple Kılavuz)

Web sitenizin performansı, seçtiğiniz web barındırıcısından, aşağıdaki web sitesi erişilebilirlik yönergelerinden, kullandığınız görüntü dosyası boyutlarına kadar çeşitli faktörlere bağlıdır..


Ancak bunları uygun boyutta biçimlendirmek, yaptığınız değişiklikler nedeniyle kaliteyi düşürebilir. İyi haber şu ki, en iyi görüntü kalitesini koruyabilir ve birkaç teknik ve püf noktası ile doğru boyutu elde edebilirsiniz.

Görüntü Optimizasyonu Nedir?

görüntü optimizasyonu boyutlarıBüyük resimler olduğunda web sayfaları önemli ölçüde yavaşlayabilir. Bu, yükleme sürelerini azaltabilir ve site ziyaretçileriniz için genel deneyimi alt düzeyde kılabilir.

Dosya boyutunu küçültmek görüntü optimizasyonudur. Bunun için bir komut dosyası veya eklenti kullanabilirsiniz.

Bu, sayfalarınız için daha hızlı yükleme süreleri sağlar. Kayıpsız ve kayıplı sıkıştırma en yaygın iki optimizasyon yöntemidir.

Görüntü Biçimlendirmenin Yararları

web'deki ortalama resim boyutlarıBir web sayfasının toplam ağırlığının yaklaşık yüzde 54’ünün resimlerden kaynaklandığı tahmin edilmektedir.

Web sitesi optimizasyonu üzerinde çalışırken, resimleriniz bu nedenle ilk göreviniz olmalıdır. Görüntü biçimlendirmenin avantajları şunları içerir:

  • Geliştirilmiş sayfa yükleme hızı
  • Yedek oluşturmak daha hızlı
  • Daha az sunucu depolama alanı gerekir
  • Doğru SEO eklentisi ile geliştirilmiş SEO
  • Daha az bant genişliği kullanılır

Görüntü Optimizasyonu ile Performansı Artırma

Amaç, kabul edilebilir kaliteyi ve mümkün olan en düşük dosya boyutunu eşit bir şekilde dengelemektir. Bunu yapmanın birden fazla yolu var. Yüklemeden önce resimlerinizi sıkıştırmak yaygın bir seçenektir. Bu amaçla bir araç veya eklenti kullanabilirsiniz (burada birkaç tane vardır).

Kullandığınız sıkıştırma türünü ve dosya biçimini dikkate almak önemlidir. Doğru kombinasyon, resminizin boyutunu beş kata kadar azaltmanıza olanak tanır.

İhtiyaçlarınıza en uygun kombinasyonu belirlemek için farklı dosya biçimleri ve sıkıştırma türleriyle denemeler yapın.

En İyi Dosya Biçimini Seçin

En iyi dosya türünü seçmek için, hangilerinin kullanılabilir olduğunu bilmek önemlidir. Bunlar en yaygın olanlarıdır:

  • JPEG: Bu tür kayıpsız ve kayıplı optimizasyon kullanır. Kalite seviyesini ayarlayarak dosya boyutu ve kalite arasında sağlam bir denge kurabilirsiniz.
  • PNG: Bu tür daha büyük bir dosya boyutuna sahip olma eğilimindedir, ancak görüntülerin kalitesi daha yüksektir. Kayıplı veya kayıpsız sıkıştırmayı kullanabilirsiniz.
  • GIF: Animasyonlu görüntüler için idealdir. Yalnızca kayıpsız sıkıştırmayı kullanabilirsiniz. Yalnızca 256 renk kullanır.

görüntü dosyası formatları

Başka seçenekler de var, ancak bunlar en yaygın ve en kolay çalışılabilenler arasında. Diğer seçenekler arasında JPEG XR ve WebP bulunur. Tüm tarayıcılar bu ikisini desteklemediğinden, bunun farkında olun.

Bununla birlikte, bunlar uygun bir seçim olabilir. Örneğin, karşılaştırılabilir bir JPEG görüntüsüyle karşılaştırıldığında, WebP ile ortalama yüzde 30 oranında bir azalma var.

Bu iki seçenek için evrensel desteğin bulunmaması nedeniyle, uygulamanızın uygun kaynağı sağlamak için sunucularınızda veya uygulamanızda ek mantığa ihtiyacı olacaktır:

  • Görüntü optimizasyonu, WebP ve JPEG XR dağıtımı dahil olmak üzere bazı CDN’ler tarafından sağlanan bir hizmettir.
  • İstemciyi algılamak için, mevcut en iyi görüntü biçimini sağlayın ve desteklenen biçimleri kontrol edin, ek uygulama mantığı eklemek mümkündür.
  • Bazı açık kaynaklı araçlar uygun varlıkların konuşmasını, optimizasyonunu ve sunumunu otomatikleştirir.

Boyut ve Sıkıştırma Kalitesi

Düşük sıkıştırma daha yüksek kalitede olma eğilimindedir, ancak dosya boyutları genellikle daha büyüktür. Yüksek sıkıştırma ile bunun tersi geçerlidir. Dosyalar daha küçüktür, ancak kalite düşme eğilimindedir.

görüntü kalitesi ve sıkıştırma

İdeal olarak, web sayfanızın toplam ağırlığı için toplam bir ila iki MB istersiniz. Bu nedenle, kaç resim kullanmanız gerektiğini düşünün ve bu sayıyı yaklaşık 1,5’e böl. Bu size en iyi yükleme hızını sağlayan görüntü başına boyut verir.

Kayıpsız ve Kayıplı Optimizasyon

Bunlar kullanacağınız iki sıkıştırma türüdür. Ne yaptıklarını anlamak önemlidir:

  • kayıpsız vs kayıplı sıkıştırmakayıpsız: Bu verileri sıkıştırır ve bir filtredir. Görüntüyü oluşturmadan önce sıkıştırılmamış olması gerekir. Ancak, kalite azalmaz. Kayıpsız sıkıştırma yapan çeşitli araçlar vardır.
  • kayıplı: Bu bazı verileri ortadan kaldırır ve bir filtredir. Ne kadar azaltma yaptığınıza dikkat edin, çünkü görüntüyü bozacaktır. Görüntünün kalite ayarlarını yapmak için farklı görüntü düzenleyicileri ve araçları kullanabilirsiniz.

Kayıpsız veya kayıplı konfigürasyonun optimum konfigürasyonu, tanıtılan eserler ile dosya boyutu arasındaki ödünleşim ve görüntü içerikleri gibi kendi kriterlerinize bağlıdır..

Tüm görüntüler için geçerli olan tek bir evrensel ayar yoktur. Sonuçta, hangisinin en iyi sonuç verdiğini görmek için farklı görüntülerle oynamak istersiniz.

Görüntüleri Ölçeklendirmek İçin Yeniden Boyutlandırma

WordPress gibi sitelerdeki duyarlı sayfalar sayesinde, medya kitaplığınızda birkaç dosya boyutu elde edersiniz. Tarayıcınız en iyi boyutu seçip indirebilir. Tarayıcının seçtiği boyut, cihazın çözünürlüğüne bağlıdır.

wordpress'te görüntüyü yeniden boyutlandırma

Orijinal dosyaya dokunulmaz ve saklanır. İsterseniz orijinal disk alanından tasarruf etmek için eklentileri kullanabilirsiniz..

Görüntüleri Değiştirme ve Ortadan Kaldırma

Bir web sayfasındaki tüm resimlere mi ihtiyacınız var? Değilse, gereksiz olanları çıkarın. Ancak, tümü içeriğe uygunsa, daha büyük veya daha düşük kaliteli görüntüleri daha iyi seçeneklerle değiştirmeyi düşünün.

Bazı durumlarda, web yazı tipleri ve CSS efektleri görüntülerin yerini alabilir ve yine de sayfada güzel bir görsel estetik sağlar. Web yazı tipleri ile güzel yazı tipleri kullanılabilirliği artırmaya ve sayfalarınıza daha uygun bir görünüm sağlamaya yardımcı olabilir.

Ayrıca okunabilirliğinizi ve markanızı geliştirebilir. Okunabilirlik sorunları yaşamadan metni kolayca arayabileceğiniz, seçebileceğiniz ve yeniden boyutlandırabildiğinizden emin olun.

CSS efektleri, gölgeler ve degradeler gibi öğeleri içerir. Bunlar da daha fazla marka bilinci oluşturabilir. Animasyonlar, web sayfanızda her yakınlaştırma düzeyinde ve çözünürlükte görsel çekicilik sağlayabilir. Görüntü dosyaları ile karşılaştırıldığında, bunlar baytların bir kısmıdır.

Raster ve Vektör Görüntüleri

rastor vs vektör

Raster ve vektör, birincil görüntü dosyası türlerinden ikisidir. Raster görüntüler oluşturmak için piksel tabanlı programlar, tarayıcı veya kamera kullanılır.

Bunlar internette yaygın olarak kullanılmaktadır ve daha yaygın olarak kullanılmaktadır. Vektör görüntüleri oluşturmak için vektör yazılımı kullanılır. Bunlar fiziksel ürünlere giren görüntüler ve mühendislik, CAD ve 3D grafiklerde yaygındır.

Vektör görüntüleri çözünürlük ve zumdan bağımsızdır. Geometrik şekiller söz konusu olduğunda, vektör idealdir. Görüntüler karmaşık olduğunda ve çok fazla ayrıntıya ve düzensiz şekillere sahip olduğunda, tarama görüntüleri tercih edilir.

Raster grafikler, bir görüntüyü temsil etmek için dikdörtgen bir ızgara içindeki her pikselin ayrı ayrı değerlerini kodlar. Vektör grafikleri noktalar, çizgiler ve çokgenler kullanarak bir görüntüyü temsil eder.

Yüksek Çözünürlüklü Ekran Sonuçları

Cihaz piksellerini ve CSS piksellerini içeren iki farklı piksel türünü birbirinden ayırmak önemlidir. Tek bir CSS pikseli içinde birden fazla cihaz pikseli bulunabilir. Ekrandaki ayrıntılar daha fazla cihaz pikseli ile daha ince hale geliyor.

css pikseli vs cihaz pikseliDaha yüksek cihaz pikseli sayımlarından tam olarak yararlanmak için resim öğelerinin daha fazla ayrıntıya sahip olması gerekir.

Bu görev keskin sonuçlar üretebildikleri için vektör görüntüler için ideal herhangi bir çözünürlükte oluşturulduğunda.

Raster görüntüler, görüntü verilerini kodlamak için piksel başına bir temel kullandığından, daha zordur. Bu, piksel arttıkça tarama dosya boyutlarının artmasıdır.

Bu nedenle, yüksek çözünürlüklü ekranların avantajları elde etmek için yüksek çözünürlüklü görüntülere ihtiyacı vardır. Vektör görüntüleri yüksek çözünürlüklü ekranlar için en iyisi çünkü çözünürlükten bağımsız olduğu için her zaman keskin sonuçlar sağlarlar.

Çözünürlük ne olursa olsun, görüntü optimizasyon tekniklerinin aynı olduğunu unutmayın.

Vektör Görüntülerini Optimize Etme

Ölçeklenebilir Vektör Grafikleri (SVG) tüm modern tarayıcılar tarafından desteklenir.

Bu iki boyutlu grafikler için idealdir ve format XML-görüntü tabanlıdır. SVG dosyaları, tercih ettiğiniz metin düzenleyicisi kullanılarak veya çoğu vektör tabanlı yazılım türüyle elle oluşturulabilir.

SVG dosyalarının boyutunu azaltmak için küçültülmeleri gerekir. SVG dosyaları sıkıştırılırken GZIP kullanılmalıdır.

Raster Görüntüleri Optimize Etme

Bir piksel ızgarası raster görüntü oluşturur. Tek tek pikseller iki boyutlu bir kılavuzda bulunur. Örneğin, 10.000 piksellik bir dizi 100 x 100 piksellik bir görüntü oluşturur. Her piksel saydamlığı ve renk bilgilerini kodlar.

Raster ağırRGBA değerleri her piksel tarafından saklanır. Bunlar:

  • Kırmızı kanal
  • Mavi kanal
  • Yeşil kanal
  • Alfa (şeffaflık) kanalı

256 renk (değer) dahili olarak tarayıcı tarafından atanır. Kanal başına, bu sekiz bit anlamına gelir. Piksel başına bu dört bayttır. Bu, ızgara boyutlarını kullanarak dosya boyutunu hesaplamayı mümkün kılar. Dosya boyutunun çok büyük olması fazla zaman almaz.

Bu nedenle, görüntü dosyasının boyutunu azaltmak için birkaç strateji vardır:

  • Görüntünün bit derinliğini azaltın. Daha küçük bir renk paleti kullanarak bunu yapabilirsiniz.
  • Tek tek piksellerin depoladığı verileri optimize edin.

Araçlar ve Parametre Ayarlama

Her görüntü için çalışacak mükemmel bir görüntü aracı, optimizasyon parametreleri veya format seti yoktur. Görüntü içeriği ve teknik ve görsel gereksinimleri, hangisini kullanmanız gerektiğini belirleyecektir.

İyi bir ayar kümesi bulduğunuzda, ileride zaman kazanmak için benzer görüntüler için kullanabilirsiniz. Ancak, tüm resimleri sıkıştırmak için aynı ayarların kullanılması gerektiğini asla varsaymadığınızdan emin olun.

Birkaç yaygın araç hakkında bilgi edinmek, doğru seçimi yapmanıza yardımcı olabilir. Bu dördü en sık kullanılanlar arasındadır:

  • Gifsicle: Bu, çeşitli GIF görüntülerini optimize etmenize ve oluşturmanıza olanak tanır.
  • OptiPNG: Kayıpsız PNG optimizasyonuna izin vermek için kullanılır.
  • jpegtran: Bu, JPEG görüntülerini optimize etmenizi sağlar.
  • Pngquant: Bu kayıplı PNG optimizasyonuna izin vermek için kullanılır.

Ölçekli Görüntü Varlıklarını Teslim Etme

Görüntü optimizasyonu yaparken göz önünde bulundurmanız gereken iki temel kriter vardır:

  • Bir görüntünün toplam piksel sayısını optimize etme.
  • Bir görüntüdeki her pikseli kodlamak için kaç bayt gerektiğini optimize etme.

görüntü formatı ağacıResim dosyanızın boyutu tek tek piksel kodlaması için gereken toplam bayt ile çarpılan toplam piksel sayısı. Budur. Web sitenizdeki görüntü dosyaları için en uygun boyutu belirlemeye çalışırken bunu aklınızda bulundurun.

Bu nedenle, görüntüleri optimize etmenin en etkili ve kolay yolu, varlığı tarayıcıda kesinlikle istenen boyutta göstermeniz gereken daha fazla piksel göndermediğinizden emin olmaktır..

Yani, resimleri yeniden ölçeklendirmek için tarayıcınıza güvenmeyin. Bu, daha düşük çözünürlükte görüntülenmelerine neden olabilir. Ayrıca çok fazla CPU kaynağı kullanır.

Teslim edilen her bir varlık için tam ekran boyutunu garanti etmek genellikle mümkün değildir. Ancak, gereksiz tüm pikselleri minimumda tuttuğunuzdan emin olmak önemlidir..

Büyük varlıklarınızı ekran boyutlarına olabildiğince yakın bir şekilde teslim etmeniz de zorunludur..

Görüntü Optimizasyonu Kontrol Listesi

Buradaki tüm bilgiler, web sayfalarınızın daha hızlı olması için resimlerinizi optimize etmenize olanak tanır. Yine de güzel resimler kullanabileceksiniz, ancak sayfanızın yükleme sürelerinde önemli bir yavaşlamaya neden olmayacaklar.

Bu, ziyaretçilerinizi mutlu edecek ve web sitenizin genel işlevini geliştirecektir. Resimlerinizi optimize ederken aşağıdaki kontrol listesi noktalarını göz önünde bulundurun:

  • Ölçek ve çözünürlükten bağımsız oldukları için yüksek çözünürlüklü ve birden fazla cihazda çalıştıkları için vektör biçimlerini göz önünde bulundurun.
  • Tüm SVG varlıkları sıkıştırılmalı ve minimize edilmelidir. Bu gereksiz meta verileri kaldırır.
  • Raster formatları için en uygun kalite ayarlarıyla oynayın. Bu size önemli sayıda bayt kazandırabilir.
  • Her varlık için işlevsel gereksinimlerinizi bulun ve tarama görüntüleri için en iyi formatı seçin.
  • Tutarlı görüntü optimizasyonu sağlamak için mümkün olduğunda otomatikleştirin.
  • Ölçekli görüntüler sunarak doğal görüntü boyutu ve ekran boyutu mümkün olduğunca benzer olur.

Özetle, görüntü optimizasyonu için hem bir bilim hem de bir sanat vardır. Oldukça geliştirilmiş algoritmalar ve teknikler bilim görevi görür.

Bireysel görüntü sıkıştırma ile ilgili kesin cevapların olmaması sanattır. Sonuçta, etrafta oynamalı ve deney yapmalısınız. Bu, görüntü dosyalarınız ve web sayfanızın hızına nasıl katkıda bulundukları için en iyi seçimi yapmanıza olanak tanır.

Wix gibi üçüncü taraf web sitesi oluşturucularının artan popülaritesi ve karmaşıklığı ile tasarımcıların özensizleşmesi kolaydır, ancak bir şablonu tokatlamak veya sıfırdan bir site oluşturmak için iyi görüntü optimizasyon süreçleri geliştirmeye ve sürdürmeye odaklanın.

Referanslar ve resim kredileri:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector