Görüntüleri Web için Optimize Etme: Pratik Bir Kılavuz

Bir resmin bin kelimeye bedel olduğunu söylüyorlar, bu da e-ticarette resimlerin bu kadar önemli olmasının nedenlerinden biri. Müşteri bir ürünü alıp dokunamadan ve inceleyemediğinden, ürünün rengini, kalitesini ve hikayesini anlamak için büyük ölçüde görsellere güvenirler.

Bu nedenle, resimlerinizin yüksek çözünürlüklü ve net olması gerektiğini söylemeye gerek yok. Ancak, bu bir fiyata geliyor. Büyük, yüksek tanımlı görüntülerin çok büyük dosya boyutları olabilir. Bunlardan birkaçını sitenize koyun ve çevrimiçi mağazanızda gezinmenin bu hızlı deneyimi, kendinizi pekmezde yüzmek gibi hissetmenize neden olabilir. Bu yalnızca ziyaretçilerin hemen çıkmasına neden olmakla kalmaz, zamanla Google da fark eder ve bu SEO'nuzu etkileyebilir.

E-ticarette, siteniz için bir resim kaydederken resim kalitesi ile resim dosya boyutu arasında iyi bir denge bulmak çok önemlidir. Bu yazıda tam da bunu nasıl yapacağınızı göstereceğiz.

Bir ürün fotoğrafı çekip doğrudan mağazanıza yüklediğiniz biliniyorsa, bu eğitim tam size göre. Dosya boyutunu göz önünde bulundurarak görüntüleri kaydetmek için resmi bir bilginiz veya işleminiz yoksa, bu eğitim tam size göre. Sitenizde tonlarca resim varsa ve işler yavaşlıyorsa, bu eğitim tam size göre. Henüz çevrimiçi mağazanızı oluşturmaya başlamadıysanız, bu eğitim özellikle sizin için.

Resimlerinizi optimize etmeye hazır mısınız?

Görüntü Dosyası Türü Seçenekleri

Web için optimize edilmiş görüntüleri kaydetmek için odaklanmak isteyeceğimiz üç ana dosya türü vardır: GIF, JPG ve PNG. Her dosya türünün kendi güçlü ve zayıf yönleri vardır ve bir görüntüyü kaydederken bunları bilmek ve akılda tutmak çok önemlidir.

JPG'lerle Çalışmak

JPG'ler (JPEG olarak da bilinir), web'deki resimler için en popüler dosya türüdür. JPG'ler, çok sayıda renk, gölge, degrade veya karmaşık desen içeren fotoğraflar veya karmaşık görüntüler için mükemmeldir. JPG'ler bu tür görüntüleri iyi işler çünkü JPG'lerin çalışacak çok büyük bir renk paleti vardır.

JPG'ler ayrıca yüksek kaliteli, düşük kaliteli veya aradaki herhangi bir yere kaydedilebilir. Bu, kaliteyi ve dosya boyutunu dengeleyerek görüntüyü tam olarak istediğiniz gibi ayarlamanıza ve kaydetmenize olanak tanır.

PNG'lerle Çalışmak

PNG'ler çevrimiçi başka bir popüler dosya biçimidir. Adobe Photoshop'ta PNG'leri PNG-8 veya PNG-24 olarak kaydetme seçeneğine sahip olacaksınız.

• PNG-8, 256 renkten oluşan çok sınırlı bir renk paletine sahiptir. Görüntü boyutu daha küçük olsa da, bu karmaşık görüntüler ve fotoğraflar için iyi bir seçenek olmayacaktır.
• PNG-24, çok daha yüksek kaliteli bir görüntü sağlar, ancak daha büyük bir dosya boyutu pahasına gelir.

En önemlisi, PNG'ler şeffaflığı işleyebilir. Bu, PNG'ler ve JPEG'ler arasındaki en büyük ayrım noktalarından biridir.

GIF'lerle Çalışmak

GIF'ler yıllar önce daha popülerdi, ancak yalnızca birkaç rengin gerekli olduğu küçük resim boyutları için hala bir seçenek. PNG-8'e çok benzer, GIF dosyaları yalnızca 256 renkle sınırlıdır. Bu nedenle, ürün fotoğrafları için GIF'ler asla kullanılmamalıdır.

Görüntüleri Düzgün Kaydetme

Tahmin edilebileceği gibi, büyük resimlerin yüklenmesi daha uzun sürer. Büyük dediğimizde, bir görüntünün boyutlarından ziyade dosya boyutundan bahsediyoruz, yani KB, MB, GB vb. cinsinden değer. Kullanıcıların %47'si bir web sayfasının 2 saniyeden kısa sürede yüklenmesini bekliyor ve 40 %, yüklenmesi 3 saniyeden uzun süren bir sayfayı terk edecek, resimlerinizin hızlı bir site sağlamak için yeterince küçük olması önemlidir.

Görsellerinizi çevrimiçi mağazanız için uygun şekilde optimize etmek için yapabileceğiniz üç şey vardır:

Doğru Boyutları Kaydet

Resmi Photoshop'ta açmalı ve %100'de görüntülemelisiniz. Bu, görüntüyü web için kaydettiğinizde, bir bilgisayar monitöründe görüntüleneceği tam boyutta görüntüyü görmenizi sağlar.

Görüntüleri Web İçin Kaydet

Görüntülerinizin kalitesini önemli ölçüde düşürmeden dosya boyutunu küçültmek mümkündür. Görüntünün kalitesini önemli ölçüde düşürmeden dosya boyutunu küçültmenin en sevdiğimiz yöntemi, Photoshop'un “Web için Kaydet” işlevini kullanmaktır. Görüntünüzü Photoshop'ta açın ve Dosya > Dışa Aktar > Web için Kaydet (Eski)… seçeneğine gidin. Dışa aktarma kalitenizi seçmenize izin verecek bir pencere açılacaktır. Dosya boyutunu bir megabaytın altına düşürdüğü ve kalitede gözle görülür bir fark olmadığı için 60 kalitesinin en iyi sonucu verdiğini görüyoruz.

Web İçin Görüntüleri Sıkıştır

Görüntü sıkıştırma uygulamaları, görüntülerin dosya boyutunu küçültmenin en kolay yoludur. Bu tür araçlar, görüntü dosyasındaki ek renk profilleri ve meta veriler (fotoğrafın çekildiği yerin coğrafi konumu gibi) gibi ihtiyaç duyulmayan gizli verileri kaldırır. Bu araçlar, herhangi bir görüntü kalitesinden ödün vermeden dosya boyutunu küçültmenin hızlı ve kolay bir yolunu sağlar.

Görüntü Sıkıştırma Uygulamaları ve Hizmetleri

• ImageOptim
• KısaPiksel
• MinikJPG
• MinikPNG
• kompresör.io
• Kraken
• ImageOptimizer
• Crush Pics (Shopify Uygulaması)
• Minifier (Shopify Uygulaması)

Web için Görüntü Kaydetme: Genel Bakış Örneği

Başlamak için, Stiff Salt (aslında bir arkadaşa ve Shopify Developer'a ait) olduğumuzu ve çevrimiçi mağazamızdaki özellik resmini değiştirmek istediğimizi varsayalım.

Bir sahne kuruyoruz, tuzumuzu kesinlikle inanılmaz gösteriyoruz ve bir DSLR kamera ile fotoğraf çekiyoruz. Harika, fotoğrafımız var. Bu ne güzellik!

Ama… dosya boyutu BÜYÜK! Tam olarak 14,6 MB. Ve fotoğrafın boyutları 5184 × 3456 pikseldir. Bu şu anda tamamen kullanılamaz. Film boyutunda bir poster basmak için gerçekten yeterince büyük. 14,6 MB boyutundaki bu görüntünün bir ziyaretçinin bilgisayarına yüklenmesi önemli ölçüde zaman alacaktır. Bu iyi değil.

Artık işe koyulmanın ve görüntü boyutunu ve dosya boyutunu önemli ölçüde azaltmanın zamanı geldi.

Unutmayın, görüntüye üç şey yapacağız.

• Görüntü Boyutunu Küçült: Bu, fotoğrafın boyutlarıdır.
• Dosya Boyutunu Küçültmek İçin Resmi Uygun Şekilde Kaydet: Bu, dosyanın boyutu ve bilgisayarınızın sabit diskinde ve/veya web sunucunuzda ne kadar yer kapladığını gösterir.
• Görüntü Dosyasını Sıkıştır: Yer kaplayan herhangi bir ek gizli veriden kurtulmak için

Görüntü Boyutunu Küçült

Hangi programı kullanmaya karar verdiğinize ve kişisel tercihinize bağlı olarak şunları yapabilirsiniz:

• Kaydetmeden önce görüntü boyutunu küçültün
• Resmi kaydederken resim boyutunu küçültün
• Resmi kaydedin, ardından resim boyutunu küçültün

İşleri basit tutmak için önce görüntü boyutunu küçülteceğiz. Bunu yapmak için, görüntüyü Photoshop'ta açacağız (kendinizi en rahat hissettiğiniz görüntü programını kullanabilirsiniz).

Hangi boyutta olduğunu anlamak için temanın önerilen ana sayfa görüntü boyutuna baktık. 1600 x 800 pikseldi (orijinalin 5184 × 3456 piksel olduğunu unutmayın).

Photoshop'ta Görüntü > Görüntü Boyutu'nu seçeceğiz.

Tamam, resmin boyutunu (boyutlarını) daha uygun ve tema geliştiricisi tarafından önerilen bir boyuta indirdik.

Resmi Uygun Şekilde Kaydet (Web İçin Kaydet)

Photoshop'ta, görüntü dosyasını çevrimiçi görüntülemek için optimize eden "Web İçin Kaydet" adlı özel bir komut vardır. Normal "Kaydet" komutu, "Web İçin Kaydet" komutundan 2-3 kat daha büyük dosya boyutları oluşturabileceğinden bu önemlidir.

“Web İçin Kaydet” kutusunda birkaç seçim yapmamız gerekiyor.

• Görüntü Türü: Dosya türü, çıktı dosyasının kalitesini ve boyutunu etkiler.
• Görüntü Kalitesi: Bu önemlidir ve son dosya boyutunu büyük ölçüde etkileyebilir
• Boyutlar: Bunu ilk adımda zaten yaptık, bu yüzden tekrar yapmaya gerek yok, ancak bunu ilk adımda yapmadıysak, buradaki görüntünün boyutlarını değiştirebilirdik.

Bu yazının başında öğrendiklerimize dayanarak, JPEG'in fotoğraflar veya çok sayıda renk ve karmaşıklığa sahip herhangi bir görüntü için en iyi dosya türü olduğunu biliyoruz. JPEG'i seçeceğiz.

Görüntü Kalitesi için Maksimum ile Düşük arasında değişen 5 ön ayar ile seçebileceğiniz bir ölçeğiniz vardır. Her kalite düzeyinin son çıktı dosyası boyutuna bir göz atalım (bu bilgi, görüntü kaydetme penceresinin alt köşesinde görüntülenir):

• Maksimum: 1.38 MB
• Çok Yüksek: 611 KB
• Yüksek: 339 KB
• Orta: 152 KB
• Düşük: 86k

Düştüğünüz her kalite seviyesi için görüntü boyutunun neredeyse yarı yarıya azaldığını görebilirsiniz. Genel olarak, çoğu görüntü için Yüksek'in en iyi ayar olduğunu gördük. Bu seviyede, insan gözünün görüntü kalitesinde herhangi bir bozulma görmesi neredeyse imkansızdır ve dosya boyutu, sadece maksimumu seçmemize göre neredeyse 4 kat daha küçüktür.

Görüntü, çok fazla ayrıntı içeren son derece önemli bir görüntüyse, daha yüksek bir düzey seçip Çok Yüksek'te kaydetmek isteyebilirsiniz.

Esasen, web için kaydetme bir dengeleyici eylemdir - grafiklerin kalitesi ile medyanın dosya boyutunu kişisel ihtiyaçlarınıza uyacak şekilde dengelemeniz gerekir.

Web İçin Görüntüleri Sıkıştır

Adobe Photoshop kullandıysanız, görüntü boyutunu küçültme konusunda zaten gerçekten harika bir iş çıkarmış olacaktır, ancak yine de ImageOptim ve/veya ShortPixel gibi bir sıkıştırma uygulaması kullanarak görüntü boyutunun %5-10'unu daha azaltabilirsiniz.

Resimlerinizi kaydetmek için Photoshop kadar iyi olmayan başka bir program kullandıysanız, ImageOptim ayrıca resim dosya boyutunu hızla küçültmenin en kolay yoludur.

Bir önceki adımdaki dosyaların her birini ImageOptim'e bırakarak, görüntü boyutunu %5 daha küçültebildik. Çok büyük değil, ancak yine de bunlar Photoshop ile zaten optimize edildi. Ne olursa olsun, her KB önemlidir.

Çözüm

Özetlemek gerekirse, başladığımızda fotoğrafımız inanılmaz derecede büyüktü, ancak birkaç basit adımda fotoğraf boyutunu 5184 × 3456'dan 1600 x 800'e indirdik, böylece ana sayfamız için mükemmel bir uyum sağladık ve aynı zamanda 14.4MB'lık bir bilgisayar çökmesinden çok daha makul bir 336KB'ye düştü.

Görüntüleri web için uygun şekilde kaydetmek, erken öğrenmek ve dini olarak uygulamak için önemli bir adımdır. Zaman içinde, mağazanız ve web siteniz büyüdükçe her bir görselde yalnızca %10-20 tasarruf etseniz bile, her küçük KB, ziyaretçileriniz, müşterileriniz ve Google.

Web için Görüntüler Nasıl Optimize Edilir: Video İncelemesi