Resimleri Mobil Cihazlar İçin Optimize Etme Rehberi

( Bu sponsorlu bir makaledir. ) Hızlı yüklenen web siteleri oluşturmanın ne kadar kritik olduğunu bilirsiniz. Tek gereken, bir sayfanın ziyaretçi ve satış kaybetmeye başlaması için bir saniye çok uzun yüklenmesidir. Artı, artık Google, mobil öncelikli dizine eklemeyi varsayılan hale getirdiğine göre, mobil sitenizi masaüstünüz kadar hızlı hale getirmenin ne kadar zor olabileceğine rağmen, performans optimizasyonlarının yol kenarına düşmesine gerçekten izin veremezsiniz.

Google, bir web sitesini sıralarken birçok faktörü dikkate alır ve ziyaretçiler bir siteyi keşfetmeye karar verirken belki de birkaç faktörü dikkate alır. İkisinin kesiştiği noktada web sitesi hızı bulunur.

Web sitelerinin hız ile ilgili birçok sorununa görsellerin neden olması şaşırtıcı değildir. Ve her zaman sadece yağı azaltıp daha minimal tasarımlı ve içerik merkezli siteler oluşturabilecekken, neden taviz verelim?

Görüntüler web üzerinde güçlü bir güçtür.

İyi seçilmiş görseller bir sitenin estetiğini geliştirmekle kalmaz, aynı zamanda ziyaretçilerinizin içerik tüketmesini de kolaylaştırır. Tabii ki, görsellerin de SEO faydaları var.

O halde bugün, web sitenizi yavaşlatmadan istediğiniz kadar görselle nasıl tasarım yapabileceğinize odaklanalım. Bu, görüntü optimizasyon stratejinizi güncellemenizi ve ImageKit adlı bir aracı benimsemenizi gerektirir, ancak bu yeni sistemi devreye sokmak için fazla çalışmanız gerekmez.

Mobil İçin Görüntü Optimizasyon Stratejisinin Gerekliliği

HTTP Arşivine göre:

• 2019'da bir masaüstü web sitesinin medyan boyutu 1939,5 KB'dir .
• 2019'da bir mobil web sitesinin medyan boyutu 1745.0 KB'dir .

Bu büyümeyi kontrol edemezsek, hızlı web siteleri sağlama konusunda tüketici ve Google taleplerini karşılamak imkansız olacak. Yoksa hız optimizasyonunda gerçekten iyi olmamız gerekecek.

Hızdan bahsetmişken, HTTP Arşivinin görüntü ağırlığı hakkında ne söylediğini görelim.

Bugünkü haliyle:

• Masaüstündeki görüntülerin medyan boyutu, toplam 1939,5 KB'den 980.3 KB'dir.
• Mobil cihazlarda görsellerin medyan boyutu, toplam 1745.0 KB'ın 891.7 KB'sidir.

Alt satır: resimler web sitelerine çok fazla ağırlık katar ve çok fazla bant genişliği tüketir. Ve bu veriler, mobil cihazlarda görsellerin medyan boyutunun masaüstü benzerlerinden daha küçük olduğunu gösterse de, görsellerin web sitesine oranı biraz daha büyüktür.

Bununla birlikte, doğru görüntü optimizasyon stratejisine sahipseniz, bu kolayca düzeltilebilir.

İşte bu stratejinin içermesi gerekenler:

1. Resimlerinizi Doğru Boyutlandırın

Doğru otomasyonlar olmadan halletmeniz gereken birçok sıkıcı görev var. Resimlerinizi yeniden boyutlandırmak gibi.

Ama yapmak zorundasın, değil mi?

Diyelim ki üzerinde çalıştığınız bir web sitesi için bir dizi görsele kaynak sağlamak için Unsplash'ı kullanıyorsunuz.

Dosyayı hangi boyutta veya dosya biçiminde indireceğinizi seçebileceğiniz premium stok depolarının aksine, burada bir seçeneğiniz yok.

Böylece, görüntüyü ve ihtiyacınız olan diğerlerini indirirsiniz. Daha sonra görüntüyü olduğu gibi kullanma veya manuel olarak yeniden boyutlandırma seçeneğiniz vardır. Dosyanın boyutuna ve görüntünün boyutlarına baktıktan sonra, yeniden boyutlandırmanın iyi bir fikir olacağını anlıyorsunuz.

Bu özel görüntü, 3.6 MB dosya ve 5591 × 3145 piksel görüntü olarak dışa aktarıldı. Bu, herhangi bir web sitesi için çok büyük.

1 MB'den büyük görseller yüklemek için hiçbir neden yok - bu bile onu zorluyor. Boyutlara gelince? Pekala, bu sitenizin genişliğine bağlı, ancak bence 1200 ile 2000 piksel arasında bir yerde maks.

Görüntüler bir stok sitesinden veya birinin DSLR'sinden gelsin, aynı süreçten geçmeniz gerekecek. Mesele şu ki, hiçbir kaynak görsel web siteniz için "doğru" boyutta çıkmayacak, bu da yeniden boyutlandırmanın bir noktada gerçekleşmesi gerektiği anlamına geliyor.

Dahası, duyarlı web siteleri, görüntülendikleri cihaza veya tarayıcıya bağlı olarak görüntüleri farklı boyutlarda görüntüler. Bir de farklı kullanım durumları var – tam boyutlu görsele karşı küçük resim veya tam boyutlu ürün fotoğrafına karşı öne çıkan resim gibi.

Bu nedenle, manuel olarak yeniden boyutlandırma zahmetinden geçtikten sonra bile yapılması gereken daha fazla yeniden boyutlandırma var.

İşte yapmamanız gerekenler :

• Görüntüleri tek tek yeniden boyutlandırın. Zaman alıcı ve verimsizdir.
• Sorunlara neden olabileceğinden, resimlerinizi duyarlı bir şekilde görüntülemek için tarayıcının yeniden boyutlandırılmasına güvenin.

Bunun yerine, mevcut görüntü sunucunuzu (web barındırıcınızda) veya harici depolama hizmetinizi (S3 gibi) ImageKit ile entegre edebilirsiniz. Veya dosyalarınızı saklamak için ImageKit'in Ortam Kitaplığını kullanabilirsiniz.

Gördüğünüz gibi, ImageKit bu Unsplash fotoğrafının orijinal boyutlarında ve boyutlarında yüklenmesini kabul etti. Aynı şey dosyalarınızın nereden geldiği için de geçerlidir.

Ancak, resimlerinizi veya resim depolamanızı ImageKit ile entegre ettiğinizde, araç resim boyutlandırmanızın kontrolünü ele alacaktır. Bunun nasıl yapıldığını burada görebilirsiniz:

Yukarıda neye baktığınızı kısaca açıklayayım:

• Image Origin Preference , ImageKit'e görüntülerin nereden optimize edilmesi gerektiğini söyler. Bu durumda, ImageKit Medya Kitaplığıdır ve bunlar benim web sitem üzerinden sunulacaktır.
• Eski Resim URL'si , resimlerimizin sunucuda nerede yaşadığının bir hatırlatıcısıdır.
• Yeni Resim URL'leri , resimlerinizin ImageKit aracılığıyla nerede optimize edileceğini açıklar.

Formül yeterince basit. Resminizin orijinal URL'sini alırsınız ve onu yeni ImageKit URL'si ile dönüştürürsünüz.

Yalnızca ImageKit URL'si, görüntü dosyalarınızın boyutunu anında küçültür. Ancak, hazır durumdayken görüntünüzün boyutlarını yeniden boyutlandırmak isterseniz, bunu yapmak için dönüştürme parametrelerini kullanabilirsiniz.

Örneğin, bu, web sitemin medya kitaplığından görüldüğü şekliyle Unsplash fotoğrafıdır. Kendi sunucularımda yaşıyor, bu yüzden adres benim kendi URL'mi gösteriyor:

ImageKit dönüştürdükten sonra nasıl göründüğünü görmek için, alan adımı ImageKit tarafından sağlanan uç nokta ile değiştiriyorum. Daha sonra resim yeniden boyutlandırma parametrelerimi ekliyorum (bunlar sadece yeniden boyutlandırmaktan fazlasını yapmanıza da izin veriyorlar) ve resim depolama alanıma işaret eden URL'nin geri kalanını yeniden ekliyorum.

Resmimi otomatik olarak 1000 × 560 piksele yeniden boyutlandırmak için ImageKit kullandığımda olan budur:

Bu yeniden boyutlandırılmış resmi oluşturmak için ImageKit URL'sini aşağıdakine dönüştürdüm:

https://imagekit.io/vq1l4ywcv/ tr:w-1000,h-560/…

Dosyanın boyutlarını azaltan, genişlik (w-) ve yükseklik (h-) parametreleridir.

Şimdi, görebileceğiniz gibi, bu orijinal görüntü kadar mükemmel piksel değil, ancak bunun nedeni dosyaya oldukça fazla sıkıştırma (%80) uygulamış olmam. Bunun nasıl çalıştığını aşağıda anlatacağım.

Bu arada, hızlanmak üzere olduğumuz kazanımların yanı sıra görüntünün hala ne kadar harika göründüğüne odaklanalım.

Daha önce bu, 5591×3145 piksel görüntü için 3,6 MB'lık bir dosyaydı. Şimdi, 1000 × 560 piksel görüntü için 128 KB'lık bir dosya.

Anlaşmayı daha da güzelleştirmek için ImageKit, URL tabanlı görüntü dönüştürmeyi kullanarak resimlerinizi bu şekilde yeniden boyutlandırmayı kolaylaştırır. Esasen, şu şekilde çalışır:

• Bir ana görüntüyü ImageKit'in medya kitaplığına veya tercih ettiğiniz sunucuya kaydedersiniz.
• ImageKit, görüntü boyutunu önemli ölçüde azaltmak için otomatik olarak birden çok teknik kullanır.
• Daha sonra, her görüntüyü farklı cihaz çözünürlüklerine ve boyutlarına uyacak şekilde değiştirmek için ImageKit'in yeniden boyutlandırma ve kırpma parametrelerini kullanabilirsiniz.

91mobiles bu görüntü optimizasyonu biçiminden yararlandığında, web sitesini her ay bant genişliğinden 3,5 TB tasarruf etti. Ve platforma entegre olmaktan başka bir şey yapmaları gerekmiyordu. Görüntülerini ImageKit'e veya başka bir üçüncü taraf depolama hizmetine taşımaya gerek yoktu. Her şey onların eski altyapısında gerçekleşti.

2. Daha Hızlı Yüklenen Görüntü Formatlarını Kullanın

Depolama alanını ve bant genişliğini tüketen yalnızca resimlerinizin boyutu değildir. Kullandığınız dosya türlerinin de etkisi vardır.

PNG'ler genel olarak logolar, metin içeren görüntüler ve şeffaf bir arka plana sahip diğer süper ince görüntüler gibi şeyler için kullanılır. Fotoğraflarınızı kaydetmek için bunları kullanabilirsiniz, ancak en büyük boyutları üretme eğilimindedirler. Kayıpsız sıkıştırma uygulandığında bile PNG'lerin boyutu diğer dosya türlerinden daha büyük kalır.

GIF'ler , PNG'lerin animasyonlu karşılığıdır ve kayıpsız sıkıştırma da kullanır.

JPG'ler ise en çok renkli görüntüler ve fotoğraflar için uygundur. Boyutları daha küçüktür ve kayıplı sıkıştırma ile küçülürler. JPG'leri yönetilebilir bir boyuta getirmek için yeterince sıkıştırmak mümkündür, ancak kayıplı sıkıştırma bir dosyanın genel kalitesini düşürdüğü ve bir kez yapıldığında geri dönüşü olmadığı için dikkatli olmalısınız.

WebP'ler , Google'ın 2010'ların başında tanıtmasından bu yana popülerlik kazanıyor. Bir Google araştırmasına göre, WebP'ler JPG'lerden %25 ile %34 arasında herhangi bir yerde daha küçük olabilir. Dahası, WebP'leri daha da küçük boyutlara indirmek için hem kayıplı hem de kayıpsız sıkıştırmayı kullanabilirsiniz.

WebP'lerle ilgili akılda tutulması gereken bir şey, evrensel olarak kabul edilmemeleridir. Bunu yazarken, WebP'ler iOS cihazları tarafından kabul edilmiyor. Ancak, diğer tüm tarayıcıların en son sürümleri, Google veya başka bir şekilde, bunları memnuniyetle gösterecektir.

ImageKit'in bu konuda nasıl yardımcı olduğuna gelince, gerçekten basit:

Bu ayar yapılandırıldığında, ImageKit, dosyalarınızın her birini teslim etmek için en iyi dosya biçimini otomatik olarak belirler. Orijinal görüntü biçiminin ve içeriğinin yanı sıra ziyaretçinin cihazının bunu destekleyip desteklemediğini dikkate alır.

JPG'ler, PNG'ler ve GIF'lerin tümü, mümkün olduğunda WebP'lere dönüştürülecektir - örneğin, ziyaretçi Chrome'dan ziyaret ederse (bu onları kabul eder). Bu mümkün değilse - diyelim ki ziyaretçi Safari'den ziyaret ediyorsa (ki bu onları kabul etmiyorsa) - ImageKit tanımlanan dönüşümlerle en iyi (yani en küçük) biçime dönüşecektir. Bu bir PNG veya JPG olabilir.

Nykaa, ImageKit'in bu görüntü optimizasyon stratejisinden yararlanmayı başardı. Web siteleri halihazırda JPG ve PNG'lerin bir karışımı kullanılarak tasarlanmış ve web'in çeşitli yerlerinde saklanmış olsa da, ImageKit görüntü biçimlerini doğrudan orijinal URL'lerden otomatikleştirmeye özen gösterdi.

3. Görüntüleri Sıkıştır

Ardından, görüntü sıkıştırma hakkında konuşmamız gerekiyor. Buna zaten birkaç kez başvurdum, ancak iki türe ayrılıyor:

kayıpsız

Bu sıkıştırma biçimi PNG'lerde ve GIF'lerde kullanılır. Dosyayı sıkıştırmak için meta veriler çıkarılır. Bu şekilde, görüntünün bütünlüğü bozulmadan kalır, ancak dosya küçülmesi, kayıplı sıkıştırma ile elde edeceğiniz kadar önemli değildir.

kayıplı

Bu sıkıştırma biçimi, JPG'lere ve WebP'lere uygulanır. Dosyayı sıkıştırmak için görüntünün bazı bölümleri "kaybolur", bu da belirli noktalara orijinal görüntüden daha ayrıntılı bir görünüm verebilir. Çoğu durumda, iki görüntünün yan yana yakından bakmadığınız sürece zar zor fark edilir. Ancak ziyaretçileriniz için, karşılaştırılacak bir orijinal olmadığı için bozulmayı gözden kaçırmak kolaydır.

Kayıplı sıkıştırma ile dosyanın yüzde kaçının bozulacağını kontrol edebilirsiniz. Güvenli bir aralık, %70 ila %80'in üzerindeki herhangi bir şey olacaktır. ImageKit, varsayılan olarak optimizasyonunu %80'e ayarlar ve bundan sadece dosya boyutunuzdan en az %20 ila %25 tasarruf edebileceğinizi tahmin eder. Gerçekte olsa da, muhtemelen daha fazladır (yukarıdaki Unsplash resim örneğinde olduğu gibi %40'ın üzerinde bir oranına bakıyoruz):

Bunu, sitenizin hızlı bir şekilde yüklenmesine yardımcı olan görüntü boyutlarını verirken kaliteyi koruyacağına inandığınız herhangi bir varsayılanla değiştirebilirsiniz.

İster varsayılanı ister kendi optimizasyon ayarınızı kullanın, Gelişmiş sekmesi altında bulunan ek sıkıştırma ayarlarını açmayı unutmayın.

Özellikle bu üç ayar, mümkün olduğunca çok sıkıştırma ve güvenli bir şekilde yapmanızı sağlayacaktır.

Örneğin, “Bir Kopyasını Kaydet” ilk ayarı, orijinal görüntülerinizi ImageKit sunucusunda tutar. Bu şekilde, kendi sunucunuzdaki yükü yönetmek zorunda kalmadan görüntü ön sıkıştırmasının bir kopyasına sahip olursunuz.

İkinci "Görüntü Meta Verilerini Koru" ayarı, mümkün olduğunda kayıpsız sıkıştırma uygulamanıza olanak tanır.

Ve son ayar olan "PNG Görüntü Sıkıştırma Modu", PNG'lerinizde kullanmak istediğiniz kayıpsız optimizasyon düzeyine karar vermenize olanak tanır: maksimum, minimum veya hiçbiri.

Bittiğinde, şu yan yana karşılaştırmaya benzer sonuçlar elde edeceksiniz:

Bu, Unsplash'tan bir JPG. ImageKit'ten hangisinin orijinal, hangisinin sıkıştırılmış ve yeniden boyutlandırılmış versiyonu olduğunu söyleyebilir misiniz?

Siyah süslemeli soldaki:

• 1500×1005 piksel
• 266 KB
• %95 sıkıştırılmış

Beyaz süslemeli sağdaki:

• 5444×3649 piksel
• 2,5 MB
• orijinal

ImageKit sıkıştırma ve optimizasyon ayarlarından hangisini en rahat kullandığınıza karar vermek ve buna göre yapılandırmak size kalmıştır.

4. Harici Sunucuya Kaydetme ve Görüntüleri Çekme

ImageKit aracılığıyla görüntüleri çalıştırmanın iki yolu vardır.

Birincisi, resimlerinizi doğrudan Medya Kitaplığına yüklemektir:

İkincisi, web siteniz veya harici depolama hizmetinizle entegre olmaktır. Aslında ImageKit'in bu bölümünü zaten gördük. Resim parametrelerinizi tanımlayabilmeniz için URL uç noktalarınızı buradan alırsınız:

Yukarıdaki optimizasyonların tümüne rağmen, hızınızı nasıl etkilediklerinden veya ne kadar depolama alanı tutmanız gerektiğinden, görüntü depolama ve bakım konusunda hala zorluk yaşıyor olabilirsiniz.

Örneğin, resimlerinizi sunucunuzda saklarsanız, sonunda yer sıkıntısı çekersiniz (canavar boyutunda bir barındırma hesabınız yoksa).

Binlerce, hatta milyonlarca görsele ve karşılık gelen görsel boyutlarına sahip devasa e-ticaret mağazaları veya işletme web siteleri oluştururken, bu görselleri kendi başınıza barındırmayı göze alamazsınız. Elbette, bunları ziyaretçilere daha hızlı sunmanın bir yolu var (ki bunu bir sonraki noktada açıklayacağım), ancak gerekmiyorsa neden ek depolama yükünü ve maliyetini üstleniyorsunuz?

5. Bir CDN ekleyin

Bir CDN, büyük görüntü havuzları için bir başka önemli optimizasyon aracıdır. Bunu ikinci bir sunucu gibi düşünün, yalnızca bu sunucu web sitenizi önbelleğe alır (kopyalar) ve onlara dünyanın her yerindeki ziyaretçilerinize çok daha yakın bulunan veri merkezleri aracılığıyla hizmet verir.

Sonuç olarak, web sitenizi ve binlerce ürün görselini New York, New York'tan Bangladeş, Hindistan'a göndermek için gereken süre inanılmaz derecede hızlı gerçekleşir.

ImageKit ile, görüntülerinizi yalnızca çekirdek işleme sunucuları aracılığıyla değil, dünya çapında 150'den fazla konumu bulunan AWS CloudFront CDN (tüm planlara dahildir) aracılığıyla sunma ayrıcalığının keyfini çıkarırsınız.

Bir ImageKit müşterisi olan Sintra, ImageKit'e geçtikten sonra performansta büyük bir sıçrama gördü. ImageKit image CDN'si (dünyanın her yerinde dağıtım düğümlerine sahip) ile sayfa yükleme sürelerinde %18'lik bir düşüş gördü.

Toplama

ImageKit'in özellikle güzel yanı, yalnızca görüntülerin neden olduğu yavaşlamalara karşı önleyici bir önlem olmamasıdır. Mobil web sitelerini ve PWA'ları, üzerlerinde zaten milyonlarca görüntü olsa bile geriye dönük olarak düzeltmek ve iyileştirmek için kullanabilirsiniz. Ayrıca performans merkezi, web sitenizin resimlerine göz atmanızı ve hız iyileştirme fırsatlarını belirlemenizi kolaylaştırır.

Ayrıca, yukarıdaki ipuçlarından da görebileceğiniz gibi, ImageKit, ister manuel olarak halledin, ister bir eklenti aracılığıyla yapılandırın, aksi takdirde yapmanız gereken birçok işi basitleştirdi.

Tüketiciler ve Google, web sitelerinin mobil cihazlarda ne kadar hızlı yüklendiği konusunda gün geçtikçe daha seçici hale gelirken, ihtiyacınız olan görüntü optimizasyonu stratejisi bu. ImageKit'ten önce veya sonra eklenen tüm resimlerin tam olarak optimize edilmesini sağlarken yükünüzü hafifletir. Daha da iyisi, müşterileriniz daha fazla olası satışın ve daha fazla dönüşümün avantajlarından yararlanacaktır.