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

İnanılmaz resimlerden oluşan bir kümeniz varsa, web sitenizdeki müşterilerinizle paylaşmak istediğinizden eminim. Güzel bir slayt gösterisi yapabilir, galeriler oluşturabilir veya tek bir sayfaya veya blog'a resim ekleyebilirsiniz. Hangi seçeneği seçerseniz seçin, uzman olmayan içerik düzenleyicisiyle karşılaştığınız tek zorluk olacaktır: görüntü yeniden boyutlandırma.

Aşağıda, yeniden boyutlandırma için size yardımcı olacak bazı öneriler.

Boyutu içeriğinize uyacak şekilde uyarlayın

Resimlerinizi daima içeriğin boyutuna veya içeriğin genişliğine göre yeniden boyutlandırın . Örneğin, içerik alanınız 650 piksel genişliğiyle sınırlıysa, sayfanız yalnızca 650 piksele kadar görüntüleyeceği için, görüntünüzün 650 pikselden daha büyük boyutlandırılmasına gerek yoktur. Görüntü boyutu özelliği kaptan daha küçük veya daha büyükse, görüntü kalitesi bozulacaktır.

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

Herhangi bir web sitesi taslağında "inç başına" izlenimi olmayacaktır. PPI, yani inç başına piksel ve DPI, yani inç başına nokta, resminizi e-posta, blog yazmak veya sosyal medya üzerinden paylaşmak gibi herhangi bir amaçla düzenlediğinizde veya yeniden boyutlandırdığınızda herhangi bir ilgisi yoktur. Baskı dışında, ekran görüntüsünde görüntü özelliği veya kalitesinde herhangi bir ayrım yapamayacaksınız.

Bu özellikle PDF için geçerlidir, 72 dpi'den daha yüksek çözünürlüğe sahip görüntüler içeren web okuması için PDF oluşturmaktan kaçının. Bu durumda ImageRecycle PDF iyileştirici, içinde 300dpi görüntü bulunan bir PDF'yi optimize etmeye yardımcı olabilir ve web'de okunacak mükemmel bir kalitede pdf boyutunun% 98'inden tasarruf edebilirsiniz.

ImageRecycle ile en iyi JPG dışa aktarma kalitesi

Photoshop'u kullanarak web için öneri, JPEG görüntülerinizi maks. % 20 sıkıştırma. Sizin için en uygun olan çeşitli JPEG erdemleri ile bazı testler de yapabilirsiniz. Global bir sıkıştırma uygulamak, boyut ve kalite arasında bir denge meselesidir.

Şimdi ImageRecycle görüntü optimizasyon algoritması ile süreç oldukça farklı. ImageRecycle , mana sayfacut görüntü sıkıştırma oranını tespit ediyor ve buna bağlı olarak görüntüyü optimize ediyor. Görüntünün tamamına sıkıştırma uygulanmadığından, aşağıdaki teste gerçekten hayran kalacaksınız.

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

Aşağıdaki örnekte, 4 jpg görüntüsünü photoshop kullanarak kalite seviyesinde dışa aktardım:% 60 |
% 80 | % 90 | % 100 Sonra ImageRecycle kullanarak görüntüleri optimize ImageRecycle , işte boyut sonucu. Kaliteyle ilgili olarak% 90/100, diğer ikisinden biraz daha iyidir. Buradaki ders şudur: jpg resimlerinizi olabildiğince az sıkıştırarak dışa aktarın, ImageRecycle gerisini halleder!

Nihai görüntüleri optimize edin

Çalıştırdığınız web sitesine bağlı olarak, aynı resimler farklı boyutlarda farklı sayfalarda görüntülenebilir. Bu, genellikle Kaydırıcılı bir E-ticarette, ürün listelemesinde, ürün ayrıntılarında bulacağınız bir şeydir...
Yeniden boyutlandırma işlemi genellikle GD gibi bir çevrimiçi php kitaplığı tarafından yapılır. ORİJİNAL ve SON kullanıcı resimlerinizin kalitesinden ve ağırlığından emin olun. Çevrimiçi kitaplıklara ve önbellek oluşturucuya güvenmeyin, aksi takdirde kalite ve boyut sorununuz olabilir. Orijinal görüntünüz zaten sizin tarafınızda (kalite, renkler, sıkıştırma arasında ince bir ayar yaparak) bant genişliğinden ve sayfa yüklemesinden tasarruf etmek için optimize edilmişse, bazı web uzantısı yeniden boyutlandırma kitaplıklarıyla tüm bunları kaybedebilirsiniz!

Çözüm:

• Son istemci tarayıcınızda görüntülenen görüntüye optimizasyonu uygulayın. Bunu her görüntüde ve her boyut için manuel olarak yapabilir veya nihai görüntülerin depolandığı klasörü seçmek için ImageRecycle API veya CMS uzantısını kullanabilirsiniz. Ardından otomatik optimizasyonu çalıştırın.
• Orijinal görüntüler için yeniden boyutlandırıcıyı kullanın. Sunucu depolama alanından tasarruf edebilir, resimlerinizi daha hızlı yönetebilirsiniz ve genellikle son ekranda 1600 pikselden daha geniş genişliğe sahip resme ihtiyacınız yoktur

Sırada ne var: HTML5 ve eleman

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 geniş bir cihaz yelpazesine uyarlamasının ve tutarlı bir şekilde net görünmesini sağlamanı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.

HTML5 öğesi bu sorunu çözmeye çalışıyor. Yerel olarak optimize edilmiş görüntü kaynağından sağlanan avantaj, yükleme süresidir - özellikle daha yavaş mobil internet bağlantılarındaki kullanıcılar için önemlidir. öğesi, tarayıcıya bir HTML talimatı vererek gerçek bir dinamik yeniden boyutlandırmayı mümkün kılar.

Kod alıntısı:

Şu anki sınır, bunun çok yeni bir Chrome sürümü (39) ve bazı JS'lerin düzgün çalışması için gerekli olmasıdır. Yakın bir gelecekte, bir görüntü iyileştirici ile ilişkilendirilen bu teknolojiyle, web sitesi yükleme süresi için en iyisini bekleyebiliriz.