Bir blogunuz, çevrimiçi mağaza veya harika görünmek istediğiniz normal bir web siteniz olsun, yüklediğiniz her resmi optimize etmek için ödeme yaparsınız.
Web için görüntüleri nasıl “optimize edeceğimiz” hakkında konuştuğumuzda, bunu üç şekilde düşünebilirsiniz: 1) görüntülerin iyi görünmesini sağlamak, 2) görüntülerin hızlı yüklenmesini sağlamak ve 3) arama motorlarının endekslemesini kolaylaştırmak.
Çoğu gönderi, optimizasyonun bir yönüne ya da başkalarına bakar, ancak bu yazıda hepsini kapsayacağım. Daha da iyisi, görüntüleri Photoshop'a gerek olmadan ücretsiz, kullanımı kolay araçlarla optimize edebilmenizdir. (Bu yazıda, temel resim düzenleme için basit bir araç olan ücretsiz tarayıcı tabanlı Pixlr sürümünü göstereceğim. Diğer araçlarla ilgileniyorsanız, Photoshop'ta Fotoğrafların Nasıl Düzenleneceğini yazımıza göz atın ).
Web sitesi resimlerini optimize etmek için bilmeniz gereken her şey
1. Yüksek kaliteli görüntülerle başlayın
Stok fotoğraf: Web sitenizde harika görüntüler kullanabilmek için profesyonel bir fotoğrafçı olmanıza gerek yok. Her gün ticari kullanım için ücretsiz fotoğraf indirebileceğiniz daha kaliteli stok fotoğraf siteleri var gibi görünüyor. Bizim favorilerimizden bazıları:
Pixabay
Unsplash
Ahır resimleri
PicJumbo
SplitShire
Küçük Görseller
… Ve bir Jimdo web sitesiyle , Resim Kitaplığınızda ücretsiz hazır görüntüler bulunmaktadır.
Bu web sitelerinden birinden bir resim indirdiğinizde, büyük olasılıkla gerçekten büyük bir JPEG dosyası olacaktır. Web siteniz için sıkıştırmak için boyutu küçültmeniz ve daha küçük bir sürüm yüklemeniz gerekir (aşağıda daha fazlası). Yine de sorun değil. Büyük bir formatla başlamak idealdir, çünkü her zaman büyük bir görüntüyü daha küçük hale getirebilirsiniz. (Küçük bir görüntüyü büyütmek o kadar iyi çalışmaz).
Kendi (daha iyi) fotoğraflarınızı çekmek : Elbette, her şey için stok fotoğraflarını kullanamazsınız (ekibiniz veya ürününüz gibi). Görüntülerinizi iyi aydınlatılmış ve daha lüks görünmek için, fantezi kamera ekipmanı olmasa bile ( kendi lightbox'ınızı oluşturma hakkındaki bu eğitim gibi) birkaç kolay hile vardır .
Grafikler: Daha fazla grafik tabanlı bir şey arıyorsanız, kendi katmanlarınızı oluşturmak için kullanabileceğiniz bir dizi yeni ve ücretsiz çevrimiçi araç var. Canva ve PiktoChart'ı seviyoruz. Bir logo arıyorsanız, 99 tasarımı veya tasarım kontrol etmenizi öneririz .
Bir web sitesi oluşturun ve fotoğraflarınızı Jimdo ile anında yükleyin.
WEB SİTENİZİ OLUŞTURUN
2. Doğru dosya türünü kullanın: JPEG veya PNG
JPG, PNG, GIF ve SVG gibi farklı resim dosyalarını merak ediyorsanız, web sitenizde bir JPEG (JPG) veya PNG formatı kullanmanızın muhtemel olduğunu bilirsiniz. Her birinin lehte ve aleyhte olanlar var , ancak çoğu durumda aşağıdakileri hatırlayabilirsiniz:
Fotoğraflar kaydedilmeli ve JPG olarak yüklenmelidir. Bu dosya türü, fotoğraftaki tüm renkleri nispeten küçük ve verimli bir dosya boyutunda işleyebilir. JPEG'leri kullanarak, bir fotoğrafı PNG olarak kaydettiyseniz alabileceğiniz muazzam dosya ile sonuçlanmayacak.
Grafikler, özellikle büyük, düz renkli alanlar kullananlar PNG olarak kaydedilmelidir. Bu, çoğu tasarım, infographics, içlerinde bol miktarda metin bulunan görüntüler ve logoları içerir. PNG'ler JPEG'lerden daha kalitelidir, ancak genellikle daha büyük dosya boyutuyla da gelir. Akrabaları, SVG dosyaları gibi PNG'ler de renk ve metin alanlarını güzel net çizgilerle ele alır, böylece yakınlaştırıp herhangi bir kaliteyi kaybetmeyebilirsiniz. Ayrıca şeffaf arka planları da destekler (logo kullanıyorsanız isteyeceksiniz). Bir seçeneğiniz varsa, daha iyi kalitede ve daha zengin desteklenen renk dizisi nedeniyle PNG'leri “8 bit” yerine “24 bit” biçiminde kaydetmenizi öneririz.
Fotoğraflar JPEG olarak kaydedilmelidir
Fotoğraflar genellikle JPEG olarak kaydedilmelidir.
Grafikler PNG olarak kaydedilmeli
Grafikler ve logolar PNG olarak kaydedilmelidir.
Ya üzerinde metin olan bir fotoğraf kullanıyorsanız? Görüntünün çoğunluğu bir fotoğrafsa, bir JPEG dosyasına yapıştırın.
Çoğu basit görüntü programı, “Farklı Kaydet”, “Dışa Aktar” veya “Web için kaydet” seçeneğine gidip tercih ettiğiniz türü seçerek JPG veya PNG'yi seçmenize izin verir . Ayrıca, Zamzar gibi sizin için dosyaları dönüştürecek ücretsiz tarayıcı tabanlı çevrimiçi araçlar da bulunmaktadır.
Bir PNG'yi JPEG'e dönüştürebilirsiniz, ancak bir JPEG'i PNG dosyasına dönüştürerek hiçbir şey kazanamazsınız. Bunun nedeni, bir JPG dosyasının zaten kayıp bir formatta depolanmış olmasıdır - sıkıştırılmışken resim verileri zaten kaybolmuştur, böylece sihirli bir şekilde geri getiremezsiniz. Örneğin, logonuzu yalnızca bir JPG olarak kullanıyorsanız, bir PNG'yi bir JPEG dosyasından tersine mühendislik yapmak yerine doğrudan tasarımcınıza gitmeniz ve orijinal tasarım programlarından bir PNG dosyası istemeniz gerekir .
3. Sayfa hızını ve görünümünü optimize etmek için görüntüleri yeniden boyutlandırın
Web görüntüleri ile boyut ve çözünürlük arasındaki doğru dengeyi bulmak istersiniz. Çözünürlük ne kadar yüksek olursa, dosya boyutu da o kadar büyük olur. Baskı dünyasında, yüksek çözünürlüklü görüntüler iyi bir şeydir. Ancak web'de, büyük boyutlu, yüksek çözünürlüklü görüntüler web sitenizin sayfa hızını yavaşlatabilir. Bu, kullanıcılarınızın deneyimine ve nihayetinde arama motorunuzun sıralamalarına zarar verir . Büyük görüntüler ve yavaş yükleme süreleri özellikle mobil ziyaretçiler için can sıkıcıdır .
Arka planda veya kahraman resminde olduğu gibi, web sitenizde büyük resimler kullanmak isteyeceğiniz zamanlar olabilir . Düşük kaliteli görüntüler kullanıyorsanız ve onları yeterince büyük olacak şekilde havaya uçurmaya çalışırsanız, bulanık görünecektir.
Peki boyut ve kalite arasındaki doğru dengeyi nasıl sağlarsınız? İlk olarak, görüntüler söz konusu olduğunda “boyut” un göreceli bir terim olduğunu anlamak önemlidir. Baskı için ihtiyacınız olan şey genellikle bir web sitesi için ihtiyacınız olandan çok daha büyüktür. İşte size “boyut” u oluşturan üç ana konuya genel bir bakış:
En uygun dosya boyutu: Dosyanın bilgisayarınızda kapladığı bayt sayısı. Bu, web sitenizi yavaşlatabilecek faktördür. 15 MB (megabayt) görüntü çok büyük. 125KB (kilobayt) görüntü çok daha makul. Dosya boyutunuz gerçekten büyükse, görüntü boyutlarınızın çok büyük veya çözünürlüğünün çok yüksek olduğunu gösterir.
Görüntü boyutu: Resminizin gerçek boyutları, piksel cinsinden. Muhtemelen geleneksel basılmış fotoğrafları 4 × 6, 5 × 7 veya 8 × 10 olarak düşünürsünüz. Ancak, ağda, yükseklik ve genişlik piksel cinsinden ölçülür. Örneğin, bir web sitesinde veya blogda bulunan tipik bir resim 795 × 300 piksel olabilir.
Web görüntüleri için çözünürlük: Baskı dünyasından arta kalan, çözünürlük, inç başına nokta (dpi) olarak ölçülen bir resmin kalitesi veya yoğunluğudur. Profesyonel bir yazıcı, görüntülerin en az 300dpi olmasını gerektirebilir. Ancak çoğu bilgisayar monitörü , 72dpi veya 92dpi görüntüler ; bu nedenle, bundan daha yüksek olan herhangi bir şey fazladır ve resminizi gereksiz yere büyütür . Bir tasarım programı “web için kaydetme” seçeneğine sahip olduğunda, düşük web dostu çözünürlükte kaydetme anlamına gelir.
Başlangıç Kılavuzumuzdaki web grafikleri hakkında daha fazla bilgi edinin.
Dosya boyutunu, resim boyutunu ve resminizin çözünürlüğünü nasıl buluyorsunuz?
Dosya boyutunu ve görüntü boyutunu doğrudan bilgisayarınızda bulabilirsiniz. PC kullanıyorsanız, görüntü dosyasına sağ tıklayın, “Özellikler” i ve ardından “Özet” sekmesini seçin. Mac'te, görüntü dosyasına Ctrl + tıklayın ve “Bilgi Al” ı seçin.
Çözünürlüğü bulmak için Photoshop gibi daha gelişmiş bir fotoğraf programı gerekir, ancak çoğu temel görüntü düzenleme programı görüntüleri web görüntüleri için daha iyi bir çözünürlük olan daha düşük, web dostu bir dpi ile kaydeder.
Resim boyutu, dosya boyutu ve çözünürlük için Cheat Sheet
Bir görüntünün boyutunu tanımlamanın farklı yollarını bildiğinize göre, aklınızda bulundurmanız gereken birkaç kural:
En uygun dosya boyutu: Büyük resimler veya tam ekran arka plan görüntüleri en fazla 1 MB olmalıdır .
Diğer küçük web grafiklerinin çoğu 300 KB veya daha az olabilir .
Eğer ediyorsanız tam ekran arka planını kullanarak , Jimdo Müşteri Destek Ekibi var bir resim yükleyerek önerir 2000 piksel genişliğinde.
Web görüntüleri için çözünürlük: İsteğiniz varsa, her zaman "Web için kaydet" seçeneğine sahip olursunuz, bu da resminize web dostu bir çözünürlük verir.
Büyük bir görüntüyü küçültebilirsiniz, ancak küçük bir görüntüyü büyütmek çok zordur. As Pixlr'yi destek merkezi koyar , “Eğer bir 100 × 100 piksellik bir resim varsa ve ortaya çıkan görüntü pikselli ve bIurry olacak çarpıcı bir 2560 × 1440 YouTube bayrağı çevirmek istiyorum ... Eğer hacim açısından düşünürsen , bir yüzme havuzuna bir galon su sığdıramazsınız. ”
Resminiz web siteniz için çok büyükse ne yaparsınız?
Güzel bir dijital kameranız varsa, web siteniz için gerekenden çok daha büyük olan birkaç megabaytlık fotoğraflar çekiyor olabilirsiniz. Yüksek kaliteli sitelerdeki stok fotoğraflarda da büyük boyutlu dosyalar bulunur. Resminiz 1 MB’in üzerindeyse, yapabileceğiniz birkaç şey vardır:
Resmi yeniden boyutlandırın. Fotoğrafınız 5000 piksel genişliğinde ise, web sitenizde nasıl kullanmayı planladığınıza bağlı olarak, 2000 piksel genişliğinde, 1200 piksel genişliğinde ve hatta daha küçük bir boyuta kolayca yeniden boyutlandırabilirsiniz. Bu, dosya boyutunu önemli ölçüde azaltır. Yeniden boyutlandırdığınızda, oranların aynı kaldığından emin olun, böylece resminizi bozmazsınız.
Çözünürlüğü azaltın. Çoğu fotoğraf programı görüntü çözünürlüğünüzü "web dostu" bir boyuta otomatik olarak sıkıştıracaktır (sırasıyla 72dpi ve 92dpi). Bunu Photoshop'ta da 'web için kaydet' seçeneğiyle yapabilirsiniz. Ayrıca birçok fotoğraf programında “Farklı Kaydet” seçeneğini seçebilir ve ardından kalite seviyesini oradan ayarlayabilirsiniz.
İmajınızı TinyPNG veya TinyJPG gibi ücretsiz bir programla sıkıştırın. Her ikisi de, kalitenizi etkilemeden dosya boyutunu önemli ölçüde azaltır.
Boyutunu değiştirerek görüntüyü optimize edin
Bir resmi yeniden boyutlandırmak kolaydır. Orijinal stok fotoğraf 6302 × 4789 piksel ve 16.2MB, web sitem için gerekenlerden çok daha büyüktü. Pixlr kullanarak, daha küçük, daha web dostu bir dosya boyutu (132KB - mükemmel!) İle sonuçlanacak şekilde 1000 × 760 piksele küçülttüm.
4. Görüntüleri aynı boyutta ve tarzda yapın
Tutarlı bir stil ve boyutta kullanırsanız, web sayfasındaki resimler daha iyi görünür. Tutarlılık, metninizi, sütunlarınızı ve sayfanızdaki diğer bilgileri sıralarken de yardımcı olacaktır. Ne demek istediğimizi görmek için aşağıdaki örneklere bir göz atın.
İlki, "Make-Believe Coffee" inancımızdan alındığında, fotoğrafların hepsi farklı boyutlarda. Biri dikey, diğeri ise yatay yönelimlidir. Bu sayfa düzensiz görünmesini sağlar.
Farklı boyut ve tarz görüntüleri
Bu örnekte, fotoğraflar uyuşmaz ve farklı boyutlardadır, bu nedenle sayfa biraz özensiz görünür.
Bir sonraki örnekte, her fotoğrafı daha düzgün bir 1000 × 760 piksel olacak şekilde kırptım. Parlak beyaz kahve kupasının üstündeki fotoğraf yerinden çıkmış, bu yüzden diğer iki fotoğrafa benzeyen stil ve renkte bir fotoğraf kullandım. Ayrıca Jimdo'daki görüntü filtrelerini de denedim ve daha tutarlı bir görünüm elde etmek için her fotoğrafın üzerine ince bir kaplama (bir Instagram filtresi gibi) yerleştirdim.
Aynı boyut ve stile sahip görüntüler
Bu örnekte, aynı stildeki fotoğrafları seçtim ve her birinin aynı boyutta olmasını sağladım. Bu, sayfamın daha tutarlı görünmesini sağlar.
Fotoğrafların hepsi aynı boyutta ve aynı şekilde yönlendirildikleri için paragraflarım diğerinde bir sütuna mükemmel uyum sağlar. Ayarlama veya tahmine gerek yok!
Ve unutmayın, bir Jimdo web sitesinde, resimleriniz otomatik olarak alınır ve mükemmel şekilde düzenlenir, böylece tasarımınız için endişelenmenize gerek kalmaz. Bugün deneyin!
Pixlr'da bir görüntü nasıl kırpılır
Diğer resimlerimle aynı boyuta getirmek için bir resmi Pixlr'da kırpın.
Tamam, şimdi fotoğraflarınız yeniden boyutlandırıldı ve harika görünüyor, onları arama motorları için nasıl optimize edebilirsiniz? Jimdo web sitelerinde, SEO temizlik hizmetlerinin çoğu sizin için halledilir , ancak resimlerinizi optimize etmek için yapabileceğiniz birkaç ayar hala vardır.
5. SEO'nuza yardımcı olmak için görüntü dosyasını doğru şekilde adlandırın
Çoğu insan dosya adları hakkında fazla düşünmez. Bir fotoğrafını “Photo1.jpg” veya “3.41.15 PM'de Screen Shot 2018-06-02” olarak adlandırabilirler. Bu size tanıdık geliyorsa, web sitenize yüklemeden önce resimlerinizi yeniden adlandırmak için bir dakikanızı ayırın. Niye ya? Çünkü bunu yapmak fotoğraflarınızın daha kolay yönetilmesini sağlar. Resimlerin çevrimiçi olarak nerede görüntülendiğine bağlı olarak , SEO'nuzu da hızlandırabilir
Tutarlılık uğruna, küçük harf ve 0-9 arası sayıları kullanın. Noktalama işaretleri veya boşluk bırakmayın. Ve alt çizgi yerine kısa çizgi kullanmak en iyisidir . (Think eyfel-tower.jpg ziyade DSC12345.jpg ).
Not: Jimdo web sitelerinde, web sitenizdeki tüm dosyaları yeniden adlandırmanız gerekmez; yalnızca Alt Metin'nizi güncelleyin (aşağıya bakın).
6. Başlıklarınızı ve alternatif metinlerinizi doldurun
İnsanlar web sitelerine bir resim yükledikten sonra, genellikle ek bilgileri doldurmayı da unuturlar. Ama sadece dosya adı gibi, bu bilgi size bazı SEO suyu ekler.
Alt etiketleri (veya alternatif metin) ortalama ziyaretçiniz tarafından görülmez, ancak arama motorlarına her görüntünün ne olduğu hakkında temel bir fikir verir. Bu nedenle, sitenize bir resim ekledikten sonra, Alternatif Metin alanını, fotoğrafın ne gösterdiğini açıklayan bir ifadeyle, tercihen hedeflenmiş bir anahtar kelimeyle doldurduğunuzdan emin olun . (Alternatif metin ayrıca, görme engelli ziyaretçilerin sitenizi ses tabanlı yazılımla gezinmesine yardımcı olur, bu nedenle web sitesinin erişilebilirliğini arttırmanın iyi bir yolu.) İşte iyi alt etiketleri yazmak için birkaç ipucu .
Dosya adları ve alt etiketleri, özellikle ürün sayfalarının SEO'ları için önemlidir . Mantıklıysa, insanlar resim yazılarını diğer web sitesi metinlerinden daha fazla okuduğundan , resminize bir resim yazısı ekleyin .
Alt etiketi doldurma ve Jimdo'da altyazı
Alt Metninizi ve başlığınızı doldurmayı unutmayın!
Not: Alt etiketleri, adları ve başlıkları doldurmak SEO için iyidir, ancak anahtar kelime öğelerini denemeyin . Bir resmi tam anlamıyla İngilizce olarak doğru bir şekilde tanımlamak istiyorsunuz; alakasız veya tekrarlayan anahtar kelimeler eklemek, arama motoru tanrılarının cezalandırılmasını sağlar.
WEB SİTENİZİ OLUŞTURUN
7. Görüntüyü ilgili metnin yanına yerleştirin
Tamamen mavi olmayan bir şey yerine, metnin söylediği ile ilgili görüntüleri seçin. İlgili bilgilerle çevrili bir resim (alakalı anahtar kelimelerle birlikte) daha iyi sıralanır .
Bu ipucu ayrıca, stok fotoğraf klişelerinden kaçınmanıza yardımcı olur. Web siteniz eğitim hakkında ise, bir elmanın fotoğrafını çekmeden SEO desteği almazsınız. Öğretmenlerin, öğrencilerin ve sınıfların fotoğrafları okuyucular için daha ilginç ve konunuzla daha alakalı olacaktır.
Özet: Kalite ve SEO için bir web sitesi görüntüsünü optimize etme
Şimdi bu kurallara Make-Believe Coffee web sitemden bir örnekle bakalım. Unsplash'ta bir kahve kupasının fotoğrafını buldum. İndirdiğimde, adı “fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg” ve 2509 x 1673 piksel idi. Boyutu 586KB idi. Çok kötü değil ama yine de web sayfamda küçük bir fotoğraf olarak görünmem için ihtiyacım olandan daha büyük. Böylece daha iyi görüntü optimizasyonu için aşağıdakileri yapardım:
Görüntüyü daha anlamlı bir şey olarak yeniden adlandırın . Make-believe-coffee-cappuccino.jpg Belki bir şey
Resmi istediğiniz boyutta yeniden boyutlandırmak ve kırpmak için bir fotoğraf aracı kullanın . Bu örnek için 1000 × 760'ı seçtim. Bir kare istiyorsanız 1000 x 1000 yapabilirsiniz.
Doğru dosya boyutunda olduğundan emin olun . İstediğim boyuta kırptığımda ve fotoğraf editöründen indirdiğimde dosya boyutu 117KB idi - mükemmel!
Web sitenize yükleyin ve Alt Metin'i doldurmayı unutmayın! Ayrıca iyi önlem almak için bir resim yazısı ekledim.
Jimdo ile bir resme alt etiketi ekleme
Bu kontrol listesi çok fazla gözükse de, sürece alıştıktan sonra daha hızlı hale gelecektir (ve bu sayfaya yer işareti koyabilirsiniz böylece tekrar başvurabilirsiniz).
Ayrıca, bu adımı atmak resimlerinizin daha iyi görünmesini sağlar, web sitenizin daha hızlı yüklenmesine yardımcı olur ve sonuçta SEO’nuzdan yararlanır. Şimdi doğru görüntü alışkanlıklarına katılın; tüm web sitenizdeki avantajlardan yararlanın.
Bizim kontrol “Nasıl bir web sitesi oluşturmak için” konulu Kılavuzu tasarımı hakkında daha fazla ipucu için!