İmaj Optimizasyonu Nedir ve Web Sitelerinin Daha Hızlı Yüklenmesini Nasıl Sağlar?

Günümüzde her önde gelen teknoloji şirketi, Amazon, eBay, Facebook ve Google da dahil olmak üzere imaj optimizasyonunu ciddiye alıyor. Sizce neden? Çünkü imaj optimizasyonunun sayfa yükleme hızına doğrudan etkisi vardır. Dünyanın en iyi web sitesine sahip olsanız bile sayfa yükleme süreniz 3 saniyeden daha uzunsa, şimdiden ziyaretçilerinizin %53’ünü kaybetmiş sayılırsınız.

Sayfa Yüklenme Süresi ile İmaj Optimizasyonu Arasındaki İlişki

İmaj verilerinin dağıtımı, günümüzde tüm internet trafiğinin yaklaşık% 72’sini oluşturmakta, bu nedenle imajların çok fazla depolama alanı gerektirdiğini rahatça varsayabiliriz… İmajların büyüklüğünü kelimelere oranla karşılaştırmak gerekirse, 70.000 kelimelik bir roman yaklaşık 140 KB alanı kaplar. Öte yandan bir akıllı telefon tarafından çekilen normal bir fotoğrafın ise bu alanın 14 ila 35 katına ihtiyacı olacaktır. 

imaj javascript Bazı web sayfaları sadece düz metinlerden oluşurken e-ticaret platformları, sosyal medya kanalları ve blogların çoğu imaj içeriğiyle doludur. Tek bir imaj koca bir romanın 35 katı kadar alan kapladığından, imaj optimizasyonunun neden bu kadar önemli olduğunu görebilirsiniz.

Optimize edilmemiş tek bir imaj bile bir web sayfasının yüklenme süresini iki ya da üç katına çıkarabilir. Bu, imaj optimizasyonunun sayfa indirme süreleri ve genel kullanıcı deneyimi üzerinde doğrudan bir etkisi olduğu anlamına gelir. İşte, önde gelen global internet şirketlerinin imaj optimizasyonunu kullanıcı deneyiminin en önemli unsurlarından biri olarak görmelerinin nedeni budur.

İmaj Optimizasyonu Yöntemleri

İmaj optimizasyonu için birçok yöntem vardır. Bunların çoğu, .jpeg, .jpg, .png, .tiff, .gif gibi farklı imaj biçimlerine sıkıştırma biçimidir. Bazı dosya türleri, animasyon veya tasarım için faydalı olsa da, çoğu özünde dosya boyutunu azaltmaya çalışır.

Bu bizi imaj kalitesi problemine getiriyor.

Kayıplı ve Kayıpsız İmaj Sıkıştırma

Kayıplı ve kayıpsız sıkıştırma terimleri, orijinal imajın sıkıştırılmış veriden kusursuz bir şekilde yeniden oluşturulduğu sıkıştırma yöntemlerine karşılık gelir.

 a. Kayıpsız İmaj Sıkıştırma

Kayıpsız imaj sıkıştırma algoritmaları, orijinal verilerin sıkıştırılmış verilerden eksiksiz bir şekilde yeniden oluşturulmasına izin verir. Orijinal ve sıkıştırılmış verilerin birbiriyle aynı olması gerektiği yerlerde veya arşivleme ya da üretim operasyonları gibi orijinal verilerden sapmaların istenmediği yerlerde kullanılırlar. PNG veya GIF gibi imaj dosyası formatları sadece kayıpsız sıkıştırma kullanır.

Kayıpsız sıkıştırma yöntemleri orijinal verinin mükemmel bir şekilde yeniden yapılandırılmasına odaklandığından büyük imajların boyutunu azaltmak için en iyi seçenek değildir. Sonuç olarak bu yöntemler, imaj kalitesinin imaj boyutundan daha önemli olduğu uygulamalarda tercih edilirler.

Kayıpsız İmaj Dosya Tipleri

-PNG – Portable Network Graphics
-TIFF – Tagged Image File Format
-WebP – (RGB ve RGBA imajlarının yüksek yoğunluklu kayıpsız veya kayıplı sıkıştırması)
-BPG – Better Portable Graphics (HEVC bazlı kayıplı/kayıpsız sıkıştırma)
-FLIF – Free Lossless Image Format
-JPEG-LS – (kayıpsız/neredeyse kayıpsız sıkıştırma standardı)
-TGA – Truevision TGA
-PCX – PiCture eXchange
-JPEG 2000 – (Sunil Kumar tarafından kanıtlanan kayıpsız sıkıştırma yöntemini içerir, Prof San Diego State University)
-JPEG XR – eski adıyla WMPhoto ve HD Photo, kayıpsız sıkıştırma yöntemini içerir
-ILBM – (Amiga IFF imajlarının kayıpsız RLE sıkıştırması)
-JBIG2 – ( B&W imajlarının kayıpsız veya kayıplı sıkıştırması)
-PGF – Progressive Graphics File (kayıpsız veya kayıplı sıkıştırması)

b. Kayıplı İmaj Sıkıştırma

Kayıplı imaj sıkıştırma yöntemleri içeriği temsil etmek için bazı hatalı aproksimasyon yollarını -kısmi veri atılması(partial data discarding)- kullanır. İçeriği saklamak, işlemek ve iletmek için imaj boyutunu küçültmenin imaj kalitesinden daha önemli olduğu veya daha çok tercih edildiği uygulamalarda kayıpsız imaj sıkıştırma yöntemlerine kıyasla daha iyi bir seçenektir.

Kayıplı imaj sıkıştırma yöntemlerinde belirli miktarda veri ve kalite kaybı olmasına rağmen, iyi tasarlanmış kayıplı sıkıştırma teknolojileri genellikle dosya boyutlarını büyük ölçüde azaltır ve imaj kalitesindeki bozulma kullanıcı tarafından fark edilemez. Sonuç olarak da, yükleme hızlarına öncelik veren web uygulamaları için en çok tercih edilen imaj sıkıştırma yöntemi bu olmuştur.

Kayıplı İmaj Dosya Tipleri

-Better Portable Graphics, BPG (kayıplı veya kayıpsız sıkıştırma)
-Cartesian Perceptual Compression, CPC
-DjVu
-Fraktal sıkıştırma
-ICER, Mars Rovers tarafından kullanılmıştır ve wavelet kullanımı açısından JPEG 2000 ile bağlantıdır,
-JBIG2 (kayıplı veya kayıpsız sıkıştırma)
-JPEG
-JPEG 2000, JPEG’in wavelet kullanan devam formatı (kayıplı veya kayıpsız sıkıştırma)
-JPEG XR, JPEG’in yüksek dinamik aralık ve geniş renk gamı piksel formatlarını destekleyen devam formatı (kayıplı veya kayıpsız sıkıştırma)
-PGF, Progressive Graphics File (kayıplı veya kayıpsız sıkıştırma)
-S3TC, 3D bilgisayar grafik donanımı için texture sıkıştırma
-Wavelet sıkıştırması

İmaj Ölçeklendirme veya Yeniden Boyutlandırma

Bir imajın ölçeklendirilmesi veya yeniden boyutlandırılması için birçok yol mevcut ve aslında bu yolların birçoğunun imajın görsel boyutuyla ilgisi bulunmamakta. Bazı sıkıştırma yöntemleri imajı veri hacmi açısından azaltır. Diğerleri boyutları piksel olarak (raster imajlar) veya geometrik olarak (vektör imajlar) değiştirir.

Web siteleri genellikle imajları hedef kitlelerine göre ölçeklendirir veya yeniden boyutlandırır.Mobil ağırlıklı bir ziyaretçi kitlesine sahip bir sitemiz olduğunu varsayalım. Yani, sayfa ziyaretçilerimizin çoğunun mobil cihaz kullandığını söyleyebiliriz. Bu durumda yüksek çözünürlüklü imajlar kullanmak, kullanıcılara somut bir fayda sağlamaz; aksine, sayfa yükleme hızlarını yavaşlatarak kullanıcı deneyimini negatif bir şekilde etkiler. Buna karşılık, masaüstü kullanıcıları için ise imajlar daha büyük ekranlar için optimize edilmelidir.

optimizasyon öncesi sonrası

Web Sayfaları İmaj Optimizasyonunu Nasıl Yönetebilir?

Görüleceği gibi imajları optimize etmek sitelerinin kendi yararına olan bir konu. Bunun nasıl yapılacağına da gelin beraber bakalım. 

Her gün yalnızca birkaç imajın yüklendiği bir blog sayfamız olduğunu farz edelim. Bu durumda, en kolay opsiyon imajları manuel bir şekilde yeniden boyutlandırmaktır.

Ancak, manuel imaj sıkıştırma yalnızca birer birer veya sınırlı gruplar halinde gerçekleştirilebilir. Bu süreç özellikle optimize edilmesi gereken çok fazla sayıda imaj olduğunda sıkıcı olabilir ve hiç pratik olmayabilir.

Otomatik vs. Manuel İmaj Optimizasyonu

Tabii ki de internette sadece sınırlı sayıda imaj içeriğine sahip blog sayfaları bulunmuyor. 

Blog sayfalarının dışında birçok sosyal medya platformu, e-ticaret sitesi ve yoğun imaj odaklı içeriğe sahip web sitesi de mevcut. Buna ek olarak bir de son kullanıcıların oluşturduğu, yüklediği içerik üzerine kurulu olan ve kullanıcılarını imaj yüklemeden önce optimize etmeye zorlayamayacak siteler de var. Instagram veya Facebook’u, kullanıcılarından fotoğraflarını platforma yüklemeden önce optimize edip boyutlarını küçültmelerini istemelerini hayal etmek gerçekten de zor.

Teknoloji ilerledikçe, yeni sıkıştırma yöntemleri ve imaj formatları tüm medya kütüphanelerinin dönüştürülmeye veya yeniden düzenlenmeye ihtiyaç duymasına neden olur.

Sonuç

Peki, web sitesi veya platform sahipleri imaj optimizasyonunu nasıl daha iyi yönetebilir? Aslında cevap son derece basit: Otomatik imaj optimizasyon özelliklerine sahip bir CDN sağlayıcısı kullanın.

Medianova gibi sağlayıcılar ayrıca imaj sıkıştırma sürecinin tamamını spesifik web sitelerine, resimlere ve izleyicilere göre uyarlayabiliyor. Buna ek olarak, Medianova’nın CDN sunucuları, kullanıcı tarafından oluşturulan içeriği mevcut web sitesi yapısına, kaynak koduna ve medya kütüphanelerine uyacak şekilde yönetebiliyor. Peki ya yeni teknolojiler için ne olacak? Medianova bu yeni teknolojileri ve güncellemeleri piyasaya çıktıkça entegre etmeye devam edecek.

Manuel optimizasyon yöntemleri az miktarda imaj için mümkün olsa da, e-ticaret platformları veya kullanıcı tarafından oluşturulan içeriğe dayanan web siteleri için pratik değildir. Otomatik ve optimize edilmiş imaj sıkıştırma özelliklerine sahip bir CDN, tüm web ürünleri için en iyi opsiyondur.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors