Çana sayfarimiçi görsel yeniden boyutlandırma ve optimizasyon

Harika resimlerden oluşan bir kümeniz varsa, eminim ki bunu müşterilerinizle web sitenizde paylaşmak istersiniz. Güzel bir slayt gösterisi hazırlayabilir, galeriler oluşturabilir veya tek bir sayfaya veya bloga basitçe resim ekleyebilirsiniz. Hangi seçeneği seçerseniz seçin, uzman olmayan içerik düzenleyicide karşılaşacağınız tek bir zorluk olacaktır: görselin yeniden boyutlandırılması.

Aşağıda, görselin yeniden boyutlandırılmasıyla ilgili işinize yarayacak bazı öneriler bulunmaktadır.

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

Resimlerinizi her zaman 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şlikle sınırlıysa, sayfanızda yalnızca 650 piksele kadar görüntüleneceği için görselinizin boyutunun 650 pikselden büyük olmasına gerek yoktur. Resim boyutu özelliği kaptan daha küçük veya daha büyükse, görüntü kalitesi bozulacaktır.

Görüntü çözünürlüğünü web için uyarlama

Hiçbir web sitesi taslağında "inç başına" ifadesi bulunmayacaktır. İnç başına piksel sayısı olan ÜFE ve inç başına nokta sayısı anlamına gelen DPI, resminizi e-postayla gönderme, blog yazma veya sosyal medya üzerinden paylaşma gibi herhangi bir amaç için düzenlediğinizde veya yeniden boyutlandırdığınızda hiçbir önem taşımaz. Baskı dışında ekran üstü görüntüde görüntü özelliği ve kalitesinde hiçbir ayrım yapamazsınız.

Bu özellikle PDF için geçerlidir ; 72 dpi'den yüksek çözünürlüğe sahip görüntüler içeren PDF'yi web'den okumak için kullanılabilir hale getirmekten kaçının. Bu durumda ImageRecycle PDF iyileştirici yardımcı olabilir, içinde 300 dpi görüntüler bulunan bir PDF'yi optimize edebilir ve web'de okunmak üzere pdf boyutunun %98'ini mükemmel kalitede kaydedebilirsiniz.

ImageRecycleile en iyi JPG dışa aktarma kalitesi

Photoshop kullanarak web için öneri, JPEG görüntülerinizi maksimum 200 GBP ile kaydetmenizdir. %20 sıkıştırma. Ayrıca, sizin için en uygun olan çeşitli JPEG özellikleriyle bazı testler de yapabilirsiniz. Küresel sıkıştırma uygulamak, boyut ve kalite arasında bir denge meselesidir.

Artık ImageRecycle görüntü optimizasyon algoritmasıyla süreç oldukça farklı. ImageRecycle mana sayfacut görüntü sıkıştırma oranını tespit ediyor ve buna göre görüntüyü optimize ediyor. Görüntünün tamamına sıkıştırma uygulanmadığından, aşağıdaki test körüğüne gerçekten hayran kalacaksınız.

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

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ı görseller farklı sayfalarda farklı boyutlarda görüntülenebilir. Bu tipik olarak Slider'lı bir E-ticarette, ürün listelemede, ürün ayrıntılarında bulacağınız bir şeydir...
Yeniden boyutlandırma işlemi genellikle GD gibi bir çevrimiçi php kütüphanesi tarafından yapılır. ORİJİNAL ve NİHAİ kullanıcı görsellerinizin kalitesinden ve ağırlığından emin olun. Çevrimiçi kitaplıklara ve önbellek oluşturucuya güvenmeyin, aksi takdirde kalite ve boyut sorunu yaşayabilirsiniz. Orijinal görüntünüz bant genişliği ve sayfa yüklemesinden tasarruf etmek için (kalite, renkler, sıkıştırma arasında ince bir ayar yaparak) bazı web uzantısı yeniden boyutlandırma kitaplıkları ile zaten optimize edilmişse, tüm bunları kaybedebilirsiniz!

Çözüm:

• Son istemci tarayıcınızda görüntülenen görüntüye optimizasyon uygulayın. Bunu her görüntü ve her boyut için manuel olarak yapabilir veya son görüntülerinizin depolandığı klasörü seçmek için API veya CMS ImageRecycle uzantımızı kullanabilirsiniz. Daha sonra otomatik optimizasyonu çalıştırın.
• Orijinal görseller için yeniden boyutlandırıcımızı kullanın. Sunucu depolama alanından tasarruf edebilir, görsellerinizi daha hızlı işleyebilir ve genellikle son ekranda 1600 pikselden daha geniş bir görsele ihtiyacınız olmaz.

Sırada ne var: HTML5 ve eleman

Medya sorgularını içeren duyarlı tasarım teknikleri, web tasarımcılarının site düzenini masaüstü bilgisayarlardan akıllı telefonlara kadar çok çeşitli cihazlara uyarlamalarının ve sitenin sürekli olarak keskin 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ğının avantajı, yükleme süresidir; özellikle yavaş mobil internet bağlantılarına sahip kullanıcılar için önemlidir. öğesi, tarayıcıya yalnızca bir HTML talimatı vererek gerçek bir dinamik yeniden boyutlandırmayı mümkün kılar.

Kod alıntısı:

Şu anda sınır, bunun çok yeni bir krom sürümü (39) ve bazı JS'lerin düzgün çalışmasını gerektirmesidir. Yakın gelecekte, görüntü iyileştiriciyle ilişkilendirilen bu teknolojiyle, web sitesinin yüklenme süresi açısından en iyiyi bekleyebiliriz.