Sayfa hızı hem sıralama hem de kullanıcı deneyimi için önemlidir, ancak bir kaç kişi, birçok şirketin bu alanda iyileştirmek için kolay bir fırsatı kaçırdığına dikkat çekiyor: görüntü optimizasyonu.
Son birkaç yılda, sitenizin trafiği ve sıralaması açısından sayfa hızı çok önemli hale geldi. İnsanlar hızlı siteler ister – ve kullanıcılar da hızlı siteler istediğinden, Google da öyle yapar. Hızlı olan siteler, Google’ın arama motoru sıralamasındaki yavaş sitelerden daha iyidir ;
Şimdi, bir sürü yüklenme şeklini değiştirebilecek ve sunucu performansınızı optimize edebilecek teknik geliştiricilere ihtiyaç duyduğunuz sayfa hızıyla ilgili alanlar var. Ancak, sayfa yükleme sorunlarının tümü karmaşık değildir veya çok fazla teknik bilgi gerektirir. Bu durumda, bahsettiğimiz konu görüntü ağırlığıdır. Görüntüler genellikle yavaş sayfa yükü olan siteler için büyük bir sorundur.
Neyse ki, görüntüleri optimize etmek gerçekten kolay bir kazanç.
Resimler ve sayfa yükleme
Siteleri yavaş sayfa yükleme konusunda denetlediğimizde, görüntüler hemen hemen her zaman sorunun önemli bir bölümünü oluşturur. Web siteleri oluşturanlar, yüklemeden önce görüntüleri yeniden boyutlandırıp sıkıştırmamız gerektiğini ve yalnızca siteyi CMS’ye veya sunucu sıkıştırma yazılımına bırakmamamız gerektiğini unutmuş görünüyor.
Yaşamınızda sayfada sık sık megabayt resim içeren sayfalar görüyoruz. Bu megabayt . Bir sayfa asla bir kaç megabayttan büyük olmamalıdır, birkaç megabayttan bile öte, bu sık rastlanan bir olaydır. Aslında, birçok site sayfa başına 10 MB’den daha fazla gelir . Hiçbir web sayfası hiç bu kadar büyük olmamalıdır – ve ne zaman, hemen hemen her zaman bir görüntü optimizasyonu sorunu var.
Bir görüntünün nasıl düzgün şekilde boyutlandırılacağını / sıkıştırılacağını / kaydedileceğini bilmek ve bunun gerçekleşmesini sağlamak için bir işlem uygulamak, büyük miktarda sayfa ağırlığı sorununu çözebilir.
Peki ne zaman değişti?
Neredeyse 20 yıl önce web geliştirmeye başladığımda, siteler ağır bir yük alamıyorlardı ve hala herhangi bir trafik kazanmayı bekliyorlardı. Sayfalar 100–250 KB’nin altında yüklendi – html, resimler, komut dosyaları ve hepsi. Olmaları gerekiyordu. Tarayıcılar ve bağlantılar yavaştı.
Bunun arama motorlarıyla ilgisi yoktu. Siteler sadece büyük ağırlıklarda düzgün şekilde yüklenemedi. Sayfa başına 1 MB’lık bir site geri döndüğümde yüklemek 15 dakikadan fazla sürdü. Evet, 15 dakika.
Artık hızlı bağlantıların çağında olduğumuza göre, sayfaların sayfa ağırlığını izlemede çok sıkıntı yaşanıyor ve sonuçta sayfa başına 25 MB kadar büyük siteler ortaya çıkıyor (gerçek hikaye). Mesele, bazı açılardan, bu yavaş sayfa konuyu şimdi olduğundan çok daha fazla yüklüyor. Bugün sadece mobil cihazlar gibi kısıtlayıcı parametrelerimiz yok, aynı zamanda Google’daki sıralamanız yavaş sayfa yüklenmesinden etkileniyor.
Sayfa yükleme internetin ilk günlerinde çok önemli olduğu için şirketler, görüntü optimizasyonuna adanmış grafik insanlara sahiptiler. Ancak şimdi, çoğu görüntü yeniden boyutlandırma ve sıkıştırma için CMS’ye (içerik yönetim sistemi) güveniyor. Bu, çoğu durumda, görüntü optimizasyonunun yükleme işleminden sonra gerçekleştiği anlamına gelir . Bu işlem, sayfa hızını yavaşlatan görüntüler için aşırı büyük ve ağır dosya ağırlıklarına neden olur – ve site genelinde yoğun bir şekilde uygulanırsa, site konumunun daha düşük olmasına neden olabilir.
Resimlerinizi yeniden boyutlandırmak / sıkıştırmak için neden CMS’ye güvenmiyorsunuz?
Bir resmi yeniden boyutlandırmak için bir CMS kullandığınızda, genellikle resim boyutunu değiştirir ve resmi sıkıştırmaz veya sunucunuz “anında” yeniden boyutlandırır.
Bu ise bir (WordPress gibi) görüntü sıkıştırma oranı önceden olduğu; Bu, düzgün bir iş yapsa bile, dosyalarınızın yüklenmeden önce düzgün şekilde sıkıştırıldığından daha fazla yüzde 15 ila yüzde 30 daha büyük olacağı anlamına gelir. CMS’niz görüntüleri “anında” yeniden boyutlandırıyorsa, sunuldukları sırada yeniden boyutlandırıldıkları anlamına gelirse, o zaman çok az (varsa) sıkıştırma yapılır.
Bu, sayfa başına birden fazla görüntü olan sitelerde çok sorunlu olabilir. Gerçekleştirilen denetimlerden daha sık olarak, görüntüler sayfa ağırlığının yüzde 40 ila 60’ını oluşturuyor, yüzde 30 ila 50’sinin görüntü ağırlığı tasarrufu potansiyeli var.
Peki, resimlerinizi yüklemeden önce ne yapmanız gerekiyor?
Siteniz için resim hazırlama
Görüntüleri yeniden boyutlandırma
Görüntünün yeniden boyutlandırılması çok önemlidir. 2400 piksel genişliğinde bir görüntünüz varsa ve ihtiyacınız olan tek şey sitede 500 piksel genişliğindeki bir görüntü ise, CMS’nizin içinde yeniden boyutlandırmanız bile 2400 piksel boyutundaki tüm bilgileri sıkıştırmasını gerektirecektir. Bu, resminizi başlaması için çok daha büyük yapar.
Şimdi, çoğu takımda, görüntü boyutlandırma ve sıkıştırma için özel bir kişi yok. Bu, masaüstü, tablet ve mobil cihazlar için birden fazla optimize edilmiş görüntü boyutuna sahip olmamıza rağmen, bunu yapacak kaynaklara sahip olamayabileceğiniz anlamına gelir.
Bu durumda, bir sitedeki herhangi bir görüntüyle yapılacak en önemli şey, onu gereken en büyük fiziksel boyutta, ancak NO büyüklüğünde kaydetmektir . Bunun anlamı, üç görüntüye ihtiyacınız varsa ve 800 x 600 piksel gereken en büyük boyuttur, o zaman Photoshop gibi uygun bir programda orijinal görüntüyü 800 x 600 olarak yeniden boyutlandırdığınızdan emin olun. Daha sonra, CMS içinde yeniden boyutlandırmanız gerekse bile, baştan daha küçük bir dosya boyutuyla çalışıyorsunuz.
Dosya türleri
Bu nedenle, önce görüntüyü yeniden boyutlandırmanız, sıkıştırmanız ve sonra yüklemeniz gerekir. Bununla birlikte, yalnızca bir sorunu yüklemeden önce yeniden boyutlandırmak ve sıkıştırmak değil, aynı zamanda doğru dosya türünü seçmek de sorunlu hale geldi. Bugünlerde bir sitede görüntüleri işleyen çoğu insan genellikle görüntü deneyimine sahip değildir, bu yüzden bir PNG kullanmanız gerektiğinde bir JPG kullanacaktır ve bunun tersi de geçerlidir.
Bu neden önemli? Yanlış dosya türünü kullandığınızda, dosya ağırlığını bazen oldukça çarpıcı biçimde artırabilirsiniz. Peki hangi dosya türlerini kullanıyorsunuz?
JPG, GIF, PNG ve WebP’in en yaygın olduğu birkaç dosya türü vardır. Bunlardan en çok kullanacağınız kişiler JPG ve PNG’dir.
Peki ya GIF veya WebP?
Bir görüntüyü hareketlendirmedikçe kimse GIF kullanmamalıdır. WebP , yüksek kaliteli, zararsız sıkıştırma algoritmalarında büyük söz verirken , şu anda çok desteklenmiyor ve Opera ve Chrome gibi desteklenen tarayıcıların dışındaki herhangi bir tarayıcıda çalışabilmesi için özel programlama yapılması gerekiyor. .
Bu, kullanamayacağınız anlamına gelmez, ancak desteklenmeyen tarayıcılar için geçici çözümler oluşturmadan kullanamayacağınız anlamına gelir. Çoğu için, standart JPG ve PNG formatlarına uymak daha kolaydır. Desteğini mükemmelleştirdiğimizde WebP muhtemelen standart olacak. Görüntüleri çok daha yüksek kalitede, daha düşük dosya ağırlığında kaydedebilir.
Doğru dosya türünü seçme
Çok sık olarak, insanlar, görüntü programında varsayılan olarak gösterilen herhangi bir şeye göre dosya türlerini seçerler. Bununla birlikte, yanlış dosya türü seçimi aslında resimlerinizin olması gerekenden daha büyük olmasına neden olabilir.
Yukarıdaki tabloda görüldüğü gibi, JPG veya PNG isteyip istemediğinize ilişkin birçok husus vardır, ancak hatırlamanın en kolay yolu kendinize sormaktır: Bir fotoğrafa veya başka bir şeye mi bakıyorsunuz, sanat veya logo gibi mi? Bir fotoğrafı her kaydettiğinizde, JPG kullanmak istersiniz; diğerleri için (logolar, sanat eserleri, sanat eserleri vb.), bir PNG kullanmak istiyorsunuz.
Yanlış format kullandığımızda, ağırlık ve ebatları önemli ölçüde ekleyebiliriz. Ek olarak, hat resmi, JPG’de olduğu gibi kayıplı bir sıkıştırma modeli (verilerin kaybolduğu yerlerde) kullanılarak net veya net görünmeyebilir.
JPG’ler ve PNG’ler
JPG “kayıplı” sıkıştırma denilen şeyi kullanır. Bu, dosya sıkıştırılırken bazı verilerin kalıcı olarak kaybolduğu anlamına gelir. Göz genellikle kayıp verileri kolayca algılamaz, bu nedenle minimum bozulma ile daha küçük bir dosya elde edersiniz.
Tabii ki, bu kaydedilen JPG kalitesine bağlı. Kalite ne kadar düşük olursa, o kadar çok veri kaybolur. Çok düşük kalitede kaydedilmişse, görüntü “son gölgede görünecek” anlamına gelen “gölgelenmeye” başlayabilir. Bu sorunu önlemek istiyorsanız, resmi kaydederken yüzde 50 kalite oranının altına düşmeyin. Günümüzün grafik kartlarıyla, yüzde 50’lik bir oran, kaliteyi doğru görünecek kadar yüksek, ancak büyük miktarda dosya tasarrufu sağlayacak kadar düşük bırakmalıdır.
İPUCU: Bir JPG’yi kaydederken aşamalı ayarı kullanın, böylece tarayıcıya belgeyi “soluyor” gibi yüklerken. Kullanıcılar, sayfa atlama gibi sorunlarla karşılaşmazlar ve sayfayı daha hızlı yükleme olarak algılamaları daha olasıdır.
PNG’ler “kayıpsız” sıkıştırma denilen şeyi kullanır. Kayıpsız, dosya kaydedilirken, verilerin kaybolmaması anlamına gelir. Görüntü yeniden örneklenir ve verileri derlerken “en yakın komşu” (benzer renk) kullanılabilir, ancak veriler dosyadan kaldırılmaz.
İki tür PNG vardır: biri 24 bit, biri 8 bit. Dosya boyutunu küçültmeye çalışırken 8 bit PNG ayarını istersiniz. Ayrıca, daha ileri gitmek ve PNG dosyanızdaki renkleri kaldırmak isteyebilirsiniz.
İPUCU: PNG’leri Photoshop’ta kaydederken Dışa Aktar> Web İçin Kaydet’i (eski) kullanın. Daha az renk seçebilir veya siyah-beyaz seçebilirsiniz; bu da PNG dosyalarını yüzde 50 ile yüzde 90 arasında azaltabilir.
Neden SVG’den bahsetmiyorsunuz?
SVG, görüntülerin sayfaya kodlandığı bir teknolojidir. SVG ile ilgili sorunlar, onları oluşturma ve uygulama bilgisine sahip birinin gerektirdiği büyük kod blokları yaratması, karmaşık görüntü öğelerini iyi işlememesi ve eski tarayıcılarda desteklemesi zor olabilir.
Ancak, bu parametrelerden hiçbiri sizin için bir sorun değilse, tüm sayfalarda ve tüm cihaz türlerinde veya basit Infographics oluştururken site logosu gibi resimler için çok iyi bir çözüm olabilir. Ancak, resimleri görüntülemek için binlerce satır kod oluşturmanın mutlaka sayfa ağırlığından tasarruf edilmediğini unutmayın.
SVG kullanıyorsanız, bazı ipuçları:
- Doğru şekilde oluşturabilecek / uygulayabilecek personel ya da sözleşmeli birisi bulundurun.
- SVG resimlerinin kaydedilen resimlerden daha açık olduğundan emin olun (daha büyük olabilir).
- Etiketlerin doğru bir şekilde uygulandığından emin olun, böylece gerektiğinde normal bir resimde “alt” etiketinin ne olacağından faydalanın.
- Bunun bir örneği SVG dosyasında arama yapmak ve kodda bir alt etiketi kullanmak olabilir.
<img src = ”logo.svg” alt = ”Web Sitesi Logosu” />
- Bunun bir örneği SVG dosyasında arama yapmak ve kodda bir alt etiketi kullanmak olabilir.
- Resimleriniz için sosyal paylaşım önemliyse, sosyal paylaşım için yüklenebilecek geleneksel bir imaj dosyası sağlamanız gerekir.
- Eski tarayıcıları kullanan kullanıcıların büyük veya önemli bir kısmına sahipseniz SVG kullanmayın. Bunlar, eğer hiç olmazsa, SVG’yi iyi kullanmazlar.
Yorumlarınız