Hücresel için Görüntüler Nasıl Optimize Edilir (2022)
Resim, web sitenizdeki en önemli varlıklardan biridir ve içerik stratejinizin ayrılmaz bir parçası olmalıdır. Bir hikaye anlatmanıza ve müşterilerinizle kelimelerden daha fazla iletişim kurmanıza yardımcı olurlar. Peki ya doğru görüntü boyutunu kullanmazsanız? Görüntü, artık internete erişmenin en popüler yolu olan bir mobil ekran için optimize edilmezse ne olur? Görüntünüzün iyi bir zamanda yüklendiğinden nasıl emin olabilirsiniz? Görüntülerinizi optimize etmek ve performansını ölçmek için en iyi uygulamalardan bazılarına sahibiz.
Bu yazı, herhangi bir cihazda iyi görünmesi ve performansınızı etkilememesi için rahatsız edici tüm sorunları nasıl düzelteceğinizi gösterecektir. Neden Hücresel Cihazlar için Optimize Edilmiş Görüntüler Hizmet Edin 1. Görüntüler WordPress Sitenizi Etkiler Performans Resimleri, görüntünün içerik boyutumun% 48,25’ini kapsadığı aşağıdaki örneğimizde görebileceğiniz gibi çok fazla disk ve bant genişliği boşluğu harcayın.
Hücresel sayfaya, hız ve önemli boyuta gelirken. 2022’deydik ve sadece hücresel varlığa sahip olmak yeterli değildi. Hücresel Hız Marka web siteniz bir öncelik olmalıdır. Her pazarlamacının ‘hücresel hız bütçesine’ ihtiyacı vardır, çünkü mobil cihaz en yaygın kullanılan platformdur: İnsanlar cep telefonlarını eskisinden daha fazla keşfetmek, keşfetmek ve alışveriş yapmak için kullanırlar.
Bununla birlikte, marka siteleri için yüksek kaliteli görüntülere yatırım yapmaya devam ettiğinden, saha hızını yavaşlatma riskiyle karşı karşıya. Görüntüler web sitesini daha çekici ve görsel olarak çekici hale getirebilse de, görüntüler hücresel yükleme süresini yavaşlatabilir, daha az dönüşüm üretebilir ve gelir fırsatlarını kaybedebilir. Google birkaç çalışma yürüttü ve bir saniyenin dönüşümünüzün% 20’sini etkileyebileceğini buldu. İki ziyaretçiden 1’i üç saniyeden fazla içeriyorsa hücresel sitenizden ayrılacaktır. Doğrudan rakiplerinize çok fazla para olabilir. Yavaş hücresel sitelerin ziyaretler üzerindeki etkisi – Kaynak: Google ile düşünün Google Müşteri Çözümleri Başkanı Mary Ellen Coe, işletmelerin hücresel sitelerin hızını büyümenin itici gücü olarak görmesi gerektiğini de açıkladı. Ziyaretçiler, mobil uyumlu bir WordPress sitesinde yer almak ve alışveriş yapmakla daha fazla ilgilenecekler. Dahası, görüntünün performansının genel performans puanını tam olarak nasıl etkilediğini görelim. Hücresel performansı ölçmek için Deniz Feneri aşağıdaki altı metriği hesaplar:
KPI arasında “Görüntünün Ağırlığı ve Yükleme Süresi” sorununun nerede olduğunu merak ediyor olabilirsiniz. Bu sorun açıkça belirtilmeyecektir. Bunun yerine, Deniz Feneri Raporunda görüntü ile ilgili hücresel performansı iyileştirmek için fırsatlar bulabilirsiniz: Doğru görüntü boyutu (Duyarlı Görüntü Uygula)
Görüntüleri verimli kodlama
Ekranın dışındaki görüntüleri erteleyin (yavaş yükleme uygulayın)
Görüntüleri yeni nesil formatta sunun, mümkünse webp kullanın
Animasyonlu içerik için video biçimini kullanın, GIF’i video biçimine dönüştürün
Talimatlar: Görüntüleri optimize ederek ve sıkıştırarak, deniz feneri önerilerinin üstesinden gelir ve altı kpis’i yeşil bölgeye daha yakın yerleştirirsiniz. Bunun genel performans değeriniz üzerinde olumlu bir etkisi olacaktır. 2. Cep telefonlarındaki görüntülerin her gün masaüstünden farklı bir etkisi vardır, giderek daha fazla kişi akıllı telefonlarını internete erişmek için kullanır, bu da web siteniz optimize edilmezse, milyonlarca (hatta milyarlarca) potansiyel müşteriyi kaybedersiniz. Optimizasyon size yalnızca bunu yapmayan rakiplerin avantajını sağlamakla kalmaz, aynı zamanda her şeyi daha hızlı ve kullanımı daha kolay hale getirerek kullanıcının deneyimini geliştirmek gibi birçok faydası vardır – bu da müşteri memnuniyetini artırır. Hücresel cihazlar daha küçük ekran boyutları sunar. Masaüstü veya dizüstü bilgisayardan daha, yani görüntünün boyutunun ekran tarafından sağlanan alana eşleşecek şekilde orantılı olarak azaltılması gerektiği anlamına gelir. Görüntü boyut olarak doğru bir şekilde değiştirilmediğinde, içeriği küçük ekranlarda okumayı zorlaştırarak kullanıcı deneyimini azaltır. Aşağıdaki grafik, her cihaz için tasarım tercihlerini mükemmel bir şekilde göstermektedir:
Hücresel için görüntüleri ve metni optimize etmek – Kaynak: Google Arama Merkezi
Sol: Metin küçük ve okunması zor ve sol üst köşedeki küçük görüntüler çekici değil. Doğru: İçerik ekrana çok uygun. Ana resim de iyi bir ölçektir. Daha fazla okumak ve kaydırmaya devam ediyoruz. Sonra, yeni Google sayfası deneyiminin yenilenmesini hiç duydunuz mu? Google sayfası deneyiminin yenilenmesi en son SEO sıralama faktörüdür. Bu, kullanıcıların web sayfalarınızla etkileşim deneyimini nasıl hissettiğini ölçen bir dizi KPI içerir. Ve tahmin et? Buna hücresel misafirperverlik dahildir! Sunacağınız sayfanın deneyimi, Google’daki sıralama konumunuzu belirler ve içeriğinizi hücreseldeki optimize etmek için bir başka önemli neden haline getirir.
Bu nedenle web sitesi tasarımı öncekinden daha önemlidir.
Web sitenizin hücreselde hızlı olup olmadığını bilmek ister misiniz? Hangi resmin performansınızı en çok etkilediğini bilmek ister misiniz? Bizi bir sonraki bölüme götürüyor. Görüntülerin cep telefonları üzerindeki etkisi nasıl ölçülür, görüntülerin hücresel hızlar üzerindeki etkisini ölçmek için kullanabileceğiniz dört popüler performans aracı vardır: Google PagePeed Insights (PSI)
Gtmetrix
Pingdom
Google Arama Konsolu
Her şey için, sayfa açma saatini test etmek, analizi çalıştırmak ve engelleri bulmak için URL’yi girin. Birbirimizin resmini verelim. 1. Google PagesPeed PagePeed Insights ‘Insights, WordPress sitenizin hem hücresel hem de masaüstünde performansını ölçmek için Google tarafından başlatılan ücretsiz araçlardır. Raporlar deniz feneri teknolojisine dayanmaktadır ve sayfa performansının nasıl iyileştirileceğini önermektedir.
PSI, genel web sayfası kullanıcı deneyiminde Google tarafından önemli kabul edilen bir dizi belirli faktör olan temel web verilerinin ölçülmesine yardımcı olur. Hücresel görüntülerin optimizasyonu hakkında açıkça bir şey belirten herhangi bir metrik görmeyeceksiniz. Bunun yerine, Lighthouse sayfalarınızı en iyi hücresel performans uygulamasına göre kontrol eder ve görüntüler için bir optimizasyon listesi sunar: Lighthouse tarafından önerilen görüntü optimizasyonu listesi – Kaynak: Psi
Deniz Feneri metriklerini geliştirme hakkında daha fazla bilgi edinmek ister misiniz? WP Rocket, çekirdek web canlılarının nasıl artırılacağı hakkında ayrıntılı yönergeler yazar.
2. GTMetrix GTMetrix ayrıca GT.NET tarafından oluşturulan bir web sitesi performans analizi aracıdır. GTMetrix’in misyonu, web sitenizin performansını analiz etmek ve düzeltmek için takip edilebilecek ipuçlarının bir listesini vermektir. GTMetrix tarafından ölçülen ana KPI PSI’ya benzer: Genel değeri, üç temel web verisini ve diğer metrik deniz fenerini buluyoruz. Ayrıca, tam yükleme süresi ve TTFB metriğini de görebilirsiniz. GTMetrix, sayfa içeriğinin resimlere, videolara, JS’ye, CSS’ye vb. Ardından, hangi görüntülerin optimize edilmesi gerektiğini belirlemek için şelaleyi kullanabilirsiniz. Hangi görüntülerin sıkıştırılması veya boyut olarak değiştirilmesi gerektiğini kontrol etmek için “Resim” sekmesini seçin. Görüntüler için Şelale Grafiği – Kaynak: GTMetrix
Not: GTMetrix’te belirli bir hücresel testi çalıştırmak için bir Pro sürümüne ihtiyacınız var. Ancak o zaman her ikisi de gerçek donanım çözümleri aracılığıyla hücresel testlere erişebilirsiniz. 3. Pingdom Pingdom, Web Sitesinin dünyanın herhangi bir yerinde DNS sunucusundaki ağ bölümleri veya başarısızlıklar nedeniyle aşağı olup olmadığını bildirebilir. Bu, web sitenizin sağlığını ve performansını (A’dan F’ye değerlerle) izler. Genel performans seviyesine ek olarak, ölçülen ana KPI sayfanın boyutu, HTTP isteklerinin sayısı ve açılış saatidir. İlginç bir kısım “içerik türüne göre içerik ölçümleri” dir. Oradan, sayfanızdaki en fazla yeme alanının ne olduğunu görebilirsiniz: resimler, kod vb.
İçerik Türüne Göre İçerik Boyutu – Kaynak: Pingdom Not: Tıpkı GTMetrix gibi, sitenizi mobil cihazlarda test etmek için bir Pro sürüme ihtiyacınız var. 4. Google Arama Konsolu Bu yalnızca performansla ilgili olmasa da, arama konsolu hücresel test ekipmanı, sitenizdeki sayfanızın hücresel dostu olup olmadığını test etmenin kolay bir yoludur. Kaynak: Google Arama Konsolu Test sonuçları aşağıdaki öğeleri içerir:
Mobil cihazlarda google için sayfa ekran görüntüleri hakkında ekran görüntüleri Sitenizi hücresel olarak ziyaret eden ziyaretçileri, küçük yazı tipi boyutu (hücresel olarak okunması zor) veya flaş kullanımı (çoğu mobil cihaz tarafından desteklenmeyen) gibi herhangi bir hücresel kullanımla ilgili sorunların listesi. Sorunu çözmek için kullanabileceğiniz daha fazla kaynak ve raporla bir cevap alacaksınız.
Şimdi hücreseldeki herhangi bir görüntü ile ilgili sorunları tanımlamak için bir aracınız olduktan sonra, geliştiricinizle paylaşabileceğiniz bazı teknik ipuçları. Not: Bu görüntü optimizasyon tekniği markanıza fayda sağlayacaktır. Ziyaretçileriniz için daha hızlı hücresel deneyimler yaratırken yüksek kaliteli görüntüler saklıyorsunuz. Hücresel için daha küçük görüntüler nasıl optimize edilir ve yüklenir Bu bölüm, hücresel için görüntüleri nasıl optimize edeceğinizi ve performansı iyileştireceğinizi gösterecektir. Görüntü optimizasyonu ve mobil cihazlar için daha küçük görüntülerin nasıl kullanılacağı hakkında bilmeniz gereken her şey vardır. 1. Boyutu değiştirin ve mobil cihazlar için optimize edilmiş görüntüyü sunun Web sitenizi hücreselde daha hafif ve daha hızlı hale getirmeye yardımcı olmanın en kolay yolu, görüntünün boyutunu ve çözünürlüğünü optimize etmektir. Sorun şu ki, kaliteyi azaltmadan küçük görüntüler sunmak isteyebilirsiniz, değil mi? Bu durumda, iki yüksek seviyeli taktik uygulamalısınız: Boyutu Değiştirin ve Hücresel için Görüntüler Sıkıştırın. Fotoğrafınızın boyutunu değiştirerek başlayalım. Görüntüleri sayfaya yüklerken, doğrudan WordPress’te piksel sayısını belirleyebilirsiniz. Örneğin, 1200 × 800 değil, 400 × 300 gibi yeni boyutları ayarlayabilirsiniz. Cep telefonundaki görüntünün boyutu nasıl azaltılır? Otomatik Yöntem: Çevrimiçi birçok görüntünün boyutunu değiştirmek için Image gibi eklentileri kullanın. Imagify ile tek yapmanız gereken eklenti yüklemek ve görüntünün boyutunu değiştirmek istediğiniz maksimum çözünürlük gibi bazı seçenekleri kontrol etmektir:
Görüntülerinizi mobil cihazlarda toplu olarak optimize etmek için, tüm site görüntülerinizi tek bir tıklamayla optimize edebilmeniz için Imagify Dashboar: Medya → Kütle’yi optimize edin. Manuel Yol: Görüntü boyutunuzu değiştirmek için WordPress kitaplıkları veya orijinal Windows/Mac araçları gibi editörleri kullanın. Çok fazla görüntünüz varsa bu zaman alabilir. Görüntünün boyutunu manuel olarak değiştirmek – Kaynak: WordPress Kütüphanesi
Mobil cihazlar için birkaç tasarım sürümü nasıl yaparsınız?
İyi öneriler – web projeniz başlamadıysa – tüm web sitelerinizi doğrudan mobil cihazlar için oluşturuyor. Daha küçük bir ekrana konulacak birçok şeyiniz olduğu için sürtünmenin daha küçük bir ekranda meydana gelmesi daha olasıdır: görüntüler, metin, videolar, harekete geçecek davetiyeler ve daha fazlası. Aslında, tasarımı cep telefonuna dayandırmak ve daha sonra masaüstü sürümüne uygulamak tam tersinden daha kolaydır. Hücresel öncelik veren bir tasarıma sahip olmak için, önemli menü seçeneklerine öncelik vermelisiniz, görüntüler ve galeriler, ana CTA vurgulama ve kullanılabilecek filtre işlevleri de dahil olmak üzere vurmayı kolaylaştırmalısınız. Çözüm: Masaüstü ve hücresel için farklı bir tasarım oluşturmanızı sağlayan bir WordPress sayfa üreticisi kullanın. Cep telefonlarında çeşitli boyutlarda görüntüler görüntüleyebileceğimiz bir Elementor ile bir örneğe bakalım:
Eskizler gibi bazı tasarım araçları, her bir cihaz için kullanılmaya hazır olan şablonları çerçeve çizimleri ve kullanıma hazır hale getirir. Aşağıda, bir hücresel portre şablonu seçiyoruz ve gördüğünüz gibi, şablon varsayılan olarak 320*1024 boyutunda geliyor.
Cep Telefonunda Tasarım – Kaynak: Eskiz Şablonu
Genel bir kural olarak, ImageKit’ten duyarlı tasarımları da takip edebilirsiniz:Masaüstünde Örnek Oranı – Hücresel – Kaynak: ImageKit 2. Hücresel Görüntü Sıkıştırma Boyutu değiştirdikten sonra, görüntüleri sıkıştırma, hücresel için daha küçük görüntüler yüklemek için takip etmeniz gereken ikinci yüksek seviyeli bir tekniktir. Hücresel için görüntülerin sıkıştırılması, dosyanın boyutunu azaltmak anlamına gelir. Bu, kalitesini kaybetmeden görüntü baytındaki boyutu en aza indirerek elde edilir. İki dünyanın en iyisi! Mobil görüntüsünüzü sıkıştırmak için bazı hızlı ve verimli çözümler.
WordPress eklentilerini kullanın:
Optimole – Sıkıştırma, yavaş yükleme ve gelişmiş kesim sunma
Hayal edin – Görüntünüzü tek bir tıklamayla optimize etmek ve sıkıştırma. Hayali, dosya boyutunuzu azaltır, ancak aşağıda görebileceğiniz gibi kalitesini azaltmaz:
2. Imagify’ı doğrudan masaüstünde kullanın: Sadece sıkıştırmak için görüntüyü sürükleyin ve çıkarın.
Görüntüleri Sıkıştırın – Kaynak: Masaüstü Sürümünü Hayal Etme3. Hücresel için etkili bir görüntü biçimi seçin Uygun dosya formatının seçilmesi, cep telefonundaki görüntü boyutunun azaltılması üzerinde olumlu bir etkiye sahip olacaktır. JPG her zaman cevap vermez. Mümkün olduğunca çok webp formatı kullanmaya çalışın. Bu modern format, JPEG veya PNG dosyalarından ortalama% 25 daha fazla depolama tasarrufu sağlar. WebP formatı hakkında bir başka harika şey, WordPress kütüphanesinin artık onu desteklediğidir (resimlerinizi her zaman WebP’ye dönüştürmeniz gerekse de). Daha fazla bilgi edinmek istiyorsanız, resimlerinizi WebP formatına nasıl dönüştüreceğinizi açıklayan ayrıntılı kılavuzumuzu okuyun. Pratik örnekleri tartışalım. Aşağıdaki üç resim aynı çözünürlüğe sahiptir: 600 x 600 px. Ancak, boyutu her formata göre açıklayalım:
JPG 99.8kb
PNG 217KB
WebP 56.2kb’dir (bu, mobil cihazlarda kaliteyi azaltmadan en hafif dosya biçimi yapar).
Cep Telefonunda Biçim ile Boyutun Karşılaştırılması – Kaynak: ImageKit
4. Tembel yüklemeyi uygulayın Görüntünüze yavaş yükleme uygulama, hücresel sayfalarınızın daha hızlı yüklenmesine yardımcı olacaktır. Neden? Niye? Çünkü tembel yükleme, cep telefonunda hemen gerekli olmayan büyük elemanların (görüntüler gibi) yüklenmesini geciktirir. Bu aynı zamanda Google PagePeed Insights’dan “Sitenizdeki ekranın dışındaki görüntüleri erteleme” önerisini de tartışacaktır. Tembel yükleme komut dosyalarını uygulamak için çözümler:
Ücretsiz WordPress eklentilerinden birini kullanın:
WP Rocket tarafından tembel yük – Hangi resimlerin “yüklemek için tembel” olmanızı istemediğini bile seçebilirsiniz. Eklenti, sayfadaki görüntüleri ve IFRames’i yalnızca ziyaretçileriniz tarafından görüldüğünde, çok sayıda HTTP! İstekleri kaydediyor!
Optimol Otomatik optimize et
2. Genel performansınızı geliştiren birinci sınıf bir eklenti kullanın: CSS ve JS optimizasyonu ve elbette Lazy Load Entegre Özelliği ile WP Roket Önbellek eklentisi:
Medya sekmesi – Kaynak: Gösterge Tablosu WP Roket 5. Görüntü İçeriğinin CDN Ağ Dağıtımını (CDN) kullanın, mobil cihazlarda görüntü gönderimi optimize etmek için sahip olması gereken bir şeydir. Web.dev’e göre, CDN görüntüsüne geçmek, görüntü dosyası boyutunda% 40-80 maliyet üretebilir! GTMetrix, CDN prensibini oldukça iyi tanımlar. Gördüğünüz gibi, CDN kullanıcı ve orijinal sunucu arasında daha kısa bir bağlantı mesafesi oluşturur. Örneğin Londra’daki Edge sunucusu sayesinde bu daha hızlı bağlantı mümkündür.
Çözüm CDN’yi uygulamak için: Rocketcdn ve/veya Cloudflare gibi hizmetleri kullanın, böylece herkesin bulunduğu yerde içeriğinize hızlı bir şekilde erişebilir. Rocketcdn, masaüstü ve mobil cihazda daha hızlı gönderilen resminizin yardımcı olacaktır. GTMetrix’i test ettik ve Rocketcdn sayesinde yükleme süresini (neredeyse 1 saniye) kaydettiğimizi görebiliriz. Rocketcdn kullandıktan sonra tam yükleme süresini azaltma – Kaynak: GtMetrix
6. Telefondaki yavaş bağlantıyı göz ardı etmeyin, resminizi optimize etmenin başka bir nedeni, hala 3G kullanan mobil kullanıcıları düşünmektir. Kullanıcı için daha küçük bir resim yapmanız gerekir. Yavaş bir bağlantı ile, görüntüler hızlı bir şekilde görüntülenmek için daha fazla mücadele edebilir. Görüntünün boyutunu doğru bir şekilde değiştirmek için, alt yarım görüntüye yavaş yükleme sıkıştırın ve uygulayın. Hücresel görüntüleri Imagify ile optimize etmek Cep telefonunda çok fazla görüntü varsa, boyutu değiştirmek ve her bir görüntüyü manuel olarak sıkıştırmak uzun zaman alabilir. Bunun yanı sıra, performansı artırmak için her şeyi WebP formatına dönüştürmek istediğinizi düşünün. Bu tam olarak Imafy oyuna girdiğinde! İlk olarak, Image, boyutu değiştirmenize ve mobil cihazdaki mevcut ve yeni görüntüleri sıkıştırmanıza olanak tanır. Kütle sıkıştırma üç farklı seviyede meydana gelir: normal, agresif ve ultra:
Kullandığınız moda bağlı olarak, resim dosyanızın çok fazla boyutunu kaydedebilirsiniz. Kaliteyi kaybetmeden görüntünün boyutunu azaltabileceğinizi unutmayın! Ardından, Image sadece iki kutuyu kontrol ederek her şeyi WebP formatına dönüştürmenizi sağlar. Görüntü dosyasının boyutunu hücresel (ve masaüstünde) daha küçük hale getirecektir. Hayali ile WebP biçimi
Birkaç hafta önce, WordPress sitenizi hızlandırmak için kullanabileceğiniz en iyi resim optimizasyon eklentilerinin bir listesini topladım. Imagify ile aldığım ilginç sonuçları sizinle paylaşmama izin verin:
Imagify ve bu 450 kb resim kullanarak bir hız denetimi çalıştırıyorum:
Bu, Imagify’ın daha küçük hücresel görüntüler yapmaya nasıl yardımcı olduğu konusunda ana sonuçtur:
Sıkıştırdıktan sonra resmim hala iyi görünüyor Dosya boyutunun% 55’ini tasarruf ediyoruz
Dahası, Imagify PSI tarafından işaretlenen bazı sorunları giderir. Eklentiyi kullanmadan önce ve sonra resmimizle ilgili sorunu görün:
Ya WordPress kullanmazsanız? Önemli değil. Imagify ayrıca boyutu değiştirmek ve toplu olarak görüntüleri sıkıştırmak için web tabanlı bir uygulamaya sahiptir. Basitçe sürükleyin ve resminizi çıkarın: Image onu sıkıştıracak ve görüntü önümüzdeki 24 saat içinde indirilecek. Image Web bazlı uygulamayı kullanırken, iki şeye dikkat ediyorum: PNG görüntülerimden biri boyut olarak değiştirildi ve% 85 sıkıştırıldı (Ultra Sıkıştırma Modu kullanarak)
Diğerleri% 30 azaldı (normal mod kullanılarak)Görüntüleri Sıkıştırın – Kaynak: Web bazlı bir araç hayal edin
Tıpkı Imagify WordPress eklentisi gibi, ayda 20 MB görüntüyü ücretsiz, ayda 4,99 $ karşılığında 500 MB değerinde verileri ve sonsuz paketlerle ayda 9,99 $ için sınırsız görüntüleri optimize edebilirsiniz. Hücresel web siteleri için görüntüleri optimize etmek, dönüşüm oranını artırmanın basit ve maliyet etkin bir yoludur. Görüntünüz etkili bir şekilde optimize edildikten sonra, doğru formata sahip olduklarından ve yavaş bir yükleme komut dosyasıyla doğru zamanda gönderildiğinden emin olun. Sürdürülebilir hızın optimizasyonunu sağlamak için, saha hızı tüm şirketlerde önemli bir metrik olmalı ve KPI listelerinin bir parçası olmalıdır. İşletmelerin, akıllı telefonlar ve tabletler de dahil olmak üzere tüm cihazlarda sitelerini hızlı hale getirmek için Imafy ve WP Rocket gibi araçları kullanma zamanı geldi. Imafy, 20 MB’a kadar veriye kadar ücretsizdir. Bir test sürüşü için alın ve yorum bölümünde bize fikrinizi söyleyin!
