Çana sayfarimiçi görüntü yeniden boyutlandırma ve optimizasyon

Eğer harika fotoğraflardan oluşan bir koleksiyonunuz varsa, bunları web sitenizde müşterilerinizle paylaşmak isteyeceğinizden eminim. Güzel bir slayt gösterisi hazırlayabilir, galeriler oluşturabilir veya tek bir sayfaya ya da bloga resim ekleyebilirsiniz. Hangi seçeneği seçerseniz seçin, uzman olmayan içerik düzenleyicilerde karşılaşacağınız tek bir zorluk olacaktır: resim boyutlandırma.

Aşağıda, size yardımcı olabilecek bazı görüntü boyutlandırma önerileri bulunmaktadır.

İçeriğinize uygun boyutta ayarlayın

Görsellerinizi her zaman içeriğin boyutuna veya genişliğine göre yeniden boyutlandırın. Örneğin, içerik alanınız 650 piksel genişliğinde sınırlıysa, görselinizi 650 pikselden daha büyük boyutlandırmanıza gerek yoktur, çünkü sayfanız yalnızca 650 piksele kadar görüntülenecektir. Görsel boyutu kapsayıcıdan daha küçük veya daha büyükse, görüntü kalitesi bozulacaktır.

Web için görüntü çözünürlüğünü uyarlayın

Herhangi bir web sitesi tasarımında "inç başına" (PPI) ifadesi yer almayacaktır. PPI (inç başına piksel) ve DPI (inç başına nokta) değerleri, resminizi e-posta, blog yazma veya sosyal medyada paylaşma gibi herhangi bir amaçla düzenlerken veya yeniden boyutlandırırken hiçbir önem taşımaz. Baskı ve ekran görüntüsü dışında, görüntü özelliği veya kalitesinde herhangi bir farklılık göremeyeceksiniz.

Bu durum özellikle PDF'ler için geçerlidir ; 72 dpi'den daha yüksek çözünürlüğe sahip görseller içeren PDF'leri web'de okunabilir hale getirmekten kaçının. Bu durumda ImageRecycle PDF optimizasyon aracı yardımcı olabilir; 300 dpi çözünürlüğe sahip görseller içeren bir PDF'yi optimize ederek, web'de okunabilir mükemmel kalitede bir PDF'nin boyutunu %98 oranında küçültebilirsiniz.

ImageRecycle ile en iyi JPG dışa aktarma kalitesi

Photoshop kullanıyorsanız, web için JPEG resimlerinizi en fazla %20 sıkıştırma ile kaydetmeniz önerilir. Ayrıca, sizin için en iyi sonucu veren çeşitli JPEG değerleriyle de denemeler yapabilirsiniz. Genel bir sıkıştırma uygulamak, boyut ve kalite arasında bir denge meselesidir.

ImageRecycle görüntü optimizasyon algoritmasıyla süreç artık oldukça farklı. ImageRecycle mana sayfacut görüntü sıkıştırma oranını algılıyor ve buna göre görüntüyü optimize ediyor. Sıkıştırma tüm görüntüye uygulanmadığı için, aşağıdaki test sizi gerçekten şaşırtacak.

Unutmayın: Orijinal görüntü ne kadar az sıkıştırılırsa, optimizasyon ve boyut o kadar iyi olur.

Aşağıdaki örnekte, Photoshop kullanarak %60 | %80 | %90 | %100 kalite seviyelerinde 4 adet JPG görseli dışa aktardım.
ImageRecycle kullanarak görselleri optimize ettim , işte boyut sonucu. Kalite açısından %90 ve %100'lük görseller diğer ikisine göre biraz daha iyi. Buradaki ders şu: JPG görsellerinizi mümkün olduğunca az sıkıştırılmış olarak dışa aktarın, gerisini ImageRecycle

Son görüntüleri optimize edin

Çalıştırdığınız web sitesine bağlı olarak, aynı resimler farklı sayfalarda farklı boyutlarda görüntülenebilir. Bu genellikle slayt gösterisi, ürün listesi, ürün detayları vb. içeren e-ticaret sitelerinde görülür.
Yeniden boyutlandırma işlemi genellikle GD gibi çevrimiçi bir PHP kütüphanesi tarafından yapılır. Orijinal ve nihai kullanıcı resimlerinizin kalitesini ve boyutunu kontrol edin. Çevrimiçi kütüphanelere ve önbellek oluşturuculara güvenmeyin, aksi takdirde kalite ve boyut sorunları yaşayabilirsiniz. Orijinal resminiz bant genişliğini ve sayfa yükleme hızını düşürmek için (kalite, renkler, sıkıştırma arasında ince ayar yaparak) zaten optimize edilmişse, bazı web eklentisi yeniden boyutlandırma kütüphaneleriyle tüm bunları kaybedebilirsiniz!

Çözüm:

• Son istemci tarayıcınızda görüntülenen resme optimizasyon uygulayın. Bunu her resim için ve her boyut için manuel olarak yapabilir veya son resimlerinizin saklandığı klasörü seçmek için API'mizi veya ImageRecycle CMS uzantımızı kullanabilirsiniz. Ardından otomatik optimizasyonu çalıştırın.
• Orijinal resimler için yeniden boyutlandırma aracımızı kullanın. Sunucu depolama alanından tasarruf edebilir, resimlerinizi daha hızlı işleyebilir ve genellikle son görüntülemede 1600 pikselden daha geniş bir resme ihtiyacınız olmaz

Sırada ne var: HTML5 ve<picture> element

Medya sorgularını içeren duyarlı tasarım teknikleri, web tasarımcılarının bir site düzenini masaüstü bilgisayarlardan akıllı telefonlara kadar çok çeşitli cihazlara uyarlamasının ve sürekli olarak keskin görünmesini sağlamasının yoludur. Buradaki sorun ekran değil, performanstır; bu, akıllı telefon ve tablette görüntülenen ve yüklenen masaüstü görüntüsüdür.

O<picture> HTML5 öğesi bu sorunu çözmeye çalışıyor. Yerel olarak optimize edilmiş resim kaynağının avantajı, özellikle yavaş mobil internet bağlantısına sahip kullanıcılar için önemli olan yükleme süresidir.<picture> Bu öğe, tarayıcıya yalnızca bir HTML komutu vererek gerçek anlamda dinamik boyutlandırmayı mümkün kılar.

Kod örneği:

Şu anki sınırlama, bunun düzgün çalışması için çok yeni bir Chrome sürümü (39) ve bazı JavaScript kodları gerektirmesidir. Yakın gelecekte, bu teknoloji bir görüntü optimizasyon aracıyla birleştirildiğinde, web sitesi yükleme süresi için en iyi sonuçları bekleyebiliriz.