İster blog'unuz, ister çevrimiçi mağazanız, ister harika görünmek istediğiniz normal bir web siteniz olsun, yüklediğiniz her resmi optimize etmek için ödeme yapar. Web için görüntülerin nasıl "optimize edileceği" 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 dizine eklemesini kolaylaştırmak. Çoğu gönderi optimizasyonun bir yönünü veya başka bir yönünü ele alır, ancak bu yayında hepsini ele alacağım. Daha da iyisi, görüntüleri Photoshop'a gerek duymadan ücretsiz, kullanımı kolay araçlarla optimize edebilmenizdir. (Bu yazıda çoğunlukla temel görüntü düzenleme için basit bir araç olan Pixlr'ın ücretsiz tarayıcı tabanlı sürümü ile göstereceğim. Diğer araçlarla ilgileniyorsanız, Photoshop Olmadan Fotoğrafları Nasıl Düzenleyebilirim başlıklı yazımıza göz atın ). Web sitesi görüntülerini optimize etmek için bilmeniz gereken her şey 1. Yüksek kaliteli görüntülerle başlayın Stok fotoğraf: Profesyonel fotoğrafçı olmak zorunda değilsiniz. Her gün ticari kullanım için ücretsiz fotoğraflar indirebileceğiniz daha yüksek kaliteli stok fotoğraf siteleri var gibi görünüyor. Favorilerimizden bazıları: Pixabay Unsplash Barn Görüntüleri PicJumbo SplitShire Küçük Görseller … Ve bir Jimdo web sitesi ile , ücretsiz Stok görüntüleri doğrudan Resim Kitaplığınızda mevcuttur. Bu web sitelerinden birinden 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 (daha fazlası aşağıda). Yine de sorun yok. Geniş bir formatla başlamak idealdir, çünkü her zaman büyük bir görüntüyü daha küçük yapabilirsiniz. (Küçük bir görüntüyü büyütmek o kadar iyi sonuç vermez). Kendi (daha iyi) fotoğraflarınızı çekme : Tabii ki, her şeyi (ekibiniz veya ürününüz gibi) için stok fotoğraflarını kullanamazsınız. Fantezi kamera ekipmanı olmasa bile görüntülerinizin iyi aydınlatılmış ve daha profesyonel görünmesini sağlamak için birkaç kolay püf noktası vardır ( kendi ışık kutunuzu oluşturma hakkındaki bu eğitim gibi ). Grafikler: Daha grafik tabanlı bir şey arıyorsanız, kendi Infographics'inizi veya yazı tipi yer paylaşımlarıyla fotoğraflarınızı oluşturmak için kullanabileceğiniz bir sürü yeni, ücretsiz çevrimiçi araç var. Canva ve PiktoChart'ı seviyoruz. Bir logo arıyorsanız, Logo Oluşturucumuza göz atmanızı öneririz . Jimdo ile bir web sitesi oluşturun ve fotoğraflarınızı anında yükleyin. Web sitenizi oluşturun 2. Doğru dosya türünü kullanın: JPEG veya PNG JPG, PNG, GIF ve SVG gibi farklı görüntü dosyalarını merak ediyorsanız, web sitenizde bir JPEG (JPG) veya PNG formatı kullanmanızın büyük olasılıkla olacağını bilin. Her birinin artıları ve eksileri vardır , 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 etkili bir dosya boyutunda işleyebilir. JPEG kullanarak, bir fotoğrafı PNG olarak kaydettiğinizde alabileceğiniz muazzam bir dosya elde edemezsiniz. Grafikler, özellikle geniş, düz renk alanları kullananlar PNG olarak kaydedilmelidir. Buna çoğu tasarım, Infographics, içinde çok sayıda metin bulunan resimler ve logolar dahildir. PNG'ler JPEG'lerden daha kalitelidir, ancak genellikle daha büyük bir dosya boyutuna sahiptir. Yakınları gibi, SVG dosyası, PNG'ler güzel net çizgilerle renk ve metin alanlarıyla ilgilenir, böylece yakınlaştırabilir ve herhangi bir kalite kaybetmezsiniz. Ayrıca şeffaf arka planları da destekler ( bir logo kullanıyorsanız isteyeceksiniz ). Bir seçeneğiniz varsa, daha kaliteli 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 kaydedilmelidir Grafikler ve logolar PNG olarak kaydedilmelidir. Üzerinde metin bulunan bir fotoğraf kullanıyorsanız ne olur? Görüntünün çoğunluğu bir fotoğrafsa, JPEG'ye yapışır. Ç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 olanak tanır . Ayrıca Zamzar gibi dosyaları sizin için dönüştürecek ücretsiz tarayıcı tabanlı çevrimiçi araçlar da vardır. PNG'yi JPEG'e dönüştürebilirsiniz, ancak JPEG'yi PNG dosyasına dönüştürerek hiçbir şey elde edemezsiniz. Bunun nedeni, bir JPG dosyasının zaten kayıplı formatta depolanmış olmasıdır - görüntü verileri sıkıştırıldığında zaten kaybolmuştur, bu yüzden sihirli bir şekilde geri getiremezsiniz. Örneğin, yalnızca bir JPG olarak logonuz varsa, bir JPEG dosyasından bir PNG'yi 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ında 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ü resimler web sitenizin sayfa hızını yavaşlatabilir. Bu, kullanıcılarınızın deneyimine ve nihayetinde arama motoru sıralamanıza 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 . Web sitenizde arka plan veya kahraman resminiz gibi büyük resimler kullanmak isteyebileceğiniz zamanlar vardır . Düşük kaliteli görüntüler kullanır ve yeterince büyük olmaları için havaya uçurmaya çalışırsanız, bulanık görünecektir. Peki boyut ve kalite arasında doğru dengeyi nasıl buluyorsunuz? İ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 gerekenden çok daha büyüktür. “Boyut” u oluşturan üç ana hususa genel bir bakış: En iyi dosya boyutu: Dosyanın bilgisayarınızda kapladığı bayt sayısı. Bu aşağı web sitenizi yavaşlatabilir faktördür. 15 MB (megabayt) bir resim çok büyük. 125KB (kilobayt) görüntü çok daha makul. Dosya boyutunuz gerçekten büyükse, resim boyutlarınızın çok büyük veya çözünürlüğün çok yüksek olduğunun bir göstergesidir. Görüntü boyutu: Görüntünüzün piksel cinsinden gerçek boyutları. Muhtemelen geleneksel basılı fotoğrafları 4 × 6, 5 × 7 veya 8 × 10 olarak düşünüyorsunuz. Ancak web'de yükseklik ve genişlik piksel cinsinden ölçülür. Örneğin, bir web sitesindeki veya blogdaki tipik bir resim 795 × 300 piksel olabilir. Web görüntüleri için çözünürlük: Baskı dünyasından geriye kalan çözünürlük, görüntünün inç başına nokta (dpi) olarak ölçülen kalitesi veya yoğunluğudur. Profesyonel bir yazıcı, görüntülerin en az 300 dpi olmasını gerektirebilir. Ancak çoğu bilgisayar monitörü 72dpi veya 92dpi görüntüler , bu nedenle bundan daha yüksek olan her şey aşırıdır ve görüntünüzü gereksiz yere büyütür . Bir tasarım programı “web için kaydetme” seçeneğine sahip olduğunda, bu programı düşük, web dostu bir çözünürlükte kaydetmek anlamına gelir. Yeni başlayanlar Kılavuzumuzda web grafikleri hakkında daha fazla bilgi edinin. Görüntünüzün dosya boyutunu, görüntü boyutunu ve çözünürlüğünü nasıl buluyorsunuz? Dosya boyutunu ve görüntü boyutunu doğrudan bilgisayarınızda bulabilirsiniz. Bilgisayar kullanıyorsanız, görüntü dosyasına sağ tıklayın, “Özellikler” i ve ardından “Özet” sekmesini seçin. Mac'te Ctrl + resim dosyasına 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 otomatik olarak web görüntüleri için daha iyi bir çözünürlük olan daha düşük, web dostu bir dpi'ye kaydeder. Görüntü boyutu, dosya boyutu ve çözünürlük için Cheat Sheet Artık 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 vardır: En iyi dosya boyutu: Büyük resimler veya tam ekran arka plan resimleri 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: Seçenekleriniz varsa, her zaman görüntünüze web dostu bir çözünürlük sağlayacak olan “Web için kaydet” seçeneğini kullanın . 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 onu bir 100 × 100 piksellik bir resim varsa ve çarpıcı bir 2560 × 1440 YouTube bayrağı çevirmek istiyorsanız,”Ortaya çıkan görüntü pikselleştirilmiş ve hale gelecektir bIurry ... Eğer hacim açısından düşünürsen , bir galon suyu yüzme havuzuna 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 ihtiyacınız olandan çok daha büyük olan birkaç megabayt boyutunda fotoğraflar çekiyor olabilirsiniz. Yüksek kaliteli sitelerdeki stok fotoğrafları da büyük dosya boyutlarına sahip olma eğilimindedir. Resminiz 1 MB'den büyükse, yapabileceğiniz birkaç şey vardır: Görüntüyü 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 veya daha küçük bir boyutta kolayca yeniden boyutlandırabilirsiniz. Bu, dosya boyutunu önemli ölçüde azaltır. Yeniden boyutlandırdığınızda, görüntünüzü deforme etmemek için oranları aynı tuttuğunuzdan emin olun. Çözünürlüğü azaltın. Çoğu fotoğraf programı görüntü çözünürlüğünüzü otomatik olarak “web dostu” bir boyuta sıkıştırır (sırasıyla 72dpi ve 92dpi). Bunu Photoshop'ta 'web için kaydet' seçeneğiyle de yapabilirsiniz. Ayrıca birçok fotoğraf programında "Farklı Kaydet" i seçebilir ve ardından kalite seviyesini oradan ayarlayabilirsiniz. Görüntünüzü TinyPNG veya TinyJPG gibi ücretsiz bir programla sıkıştırın. Her ikisi de kaliteyi etkilemeden dosya boyutunuzu önemli ölçüde azaltır. Boyutunu değiştirerek görüntüyü optimize edin Bir görüntüyü yeniden boyutlandırmak kolaydır. Orijinal stok fotoğraf 6302 × 4789 piksel ve 16.2MB, web sitem için ihtiyacım olandan çok daha büyüktü. Pixlr'ı kullanarak, 1000 × 760 piksele küçülttüm, bu da daha küçük, daha web dostu bir dosya boyutu (132 KB - mükemmel!) İle sonuçlandı. 4.Görüntüleri aynı boyutta ve stilde yapın Tutarlı bir stil ve boyut kullanırsanız web sayfasındaki resimler daha iyi görünür. Tutarlılık, sayfanızdaki metin, sütun ve diğer bilgileri sıralarken de yardımcı olacaktır. Ne demek istediğimizi görmek için aşağıdaki örneklere göz atın. İlki, inandırıcı “Kahveyi İnanın” web sitemizden çekilen fotoğrafların hepsi farklı boyutlarda. Biri dikey, diğeri yataydır. Bu, sayfanın dağınık görünmesini sağlar. Farklı boyut ve tarzdaki görüntüler Bu örnekte, fotoğraflar eşleşmiyor ve farklı boyutlarda, bu nedenle sayfa biraz özensiz görünüyor. Bir sonraki örnekte, her fotoğrafı daha düzgün 1000 × 760 piksele kırptım. Parlak beyaz kahve kupasının üst fotoğrafı yerinden çıkmıştı, bu yüzden onu diğer iki fotoğrafımla aynı tarz ve renkte olanla değiştirdim. Ayrıca Jimdo'daki görüntü filtrelerini denedim ve daha tutarlı bir görünüm vermek için her fotoğrafın üzerine ince bir bindirme yerleştirdim (Instagram filtresi gibi). Aynı boyutta ve stilde görüntüler Bu örnekte, aynı stildeki fotoğrafları seçtim ve her birini aynı boyutta kırptım. Bu, sayfamın daha tutarlı görünmesini sağlar. Fotoğrafların hepsi aynı boyutta ve aynı şekilde yönlendirildiğinden, hepsi bir sütuna, paragraflarım diğerinde mükemmel şekilde uyuyor. Ayarlama veya tahmin gerektirmez! Ve unutmayın, bir Jimdo web sitesi ile resimleriniz otomatik olarak içe aktarılır ve mükemmel bir ş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 Bir görüntüyü diğer görüntülerimle aynı boyutta yapmak için Pixlr'da kırpma. Tamam, şimdi fotoğraflarınız yeniden boyutlandırılmış ve harika görünüyor, onları arama motorları için nasıl optimize edebilirsiniz? Jimdo web sitelerinde, SEO temizliğinin çoğu sizin için halledilir , ancak resimlerinizi optimize etmek için yapabileceğiniz birkaç ayar vardır. 5. SEO'nuza yardımcı olmak için resim dosyasını doğru şekilde adlandırın Çoğu kişi dosya adları hakkında fazla düşünmez. Bir fotoğrafa “Photo1.jpg” ya da “Screen Shot 2018-06-02 saat 15:.15'te” diyebilirler. Bu size tanıdık geliyorsa, görüntülerinizi web sitenize yüklemeden önce yeniden adlandırmak için bir dakikanızı ayırın. Neden? Çünkü bunu yapmak fotoğraflarınızın yönetilmesini kolaylaştırır. Görüntülerin çevrimiçi göründüğü yere bağlı olarak, SEO'nuza da bir destek verebilir Tutarlılık adına, küçük harfler ve 0-9 arası rakamlar kullanın. Noktalama işaretleri veya boşluklar kullanmayın. Ve alt çizgi yerine tire 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 Metninizi güncelleyin (aşağıya bakın). 6. Altyazılarınızı ve alternatif metninizi doldurun Kullanıcılar web sitelerine resim yükledikten sonra, genellikle ek bilgileri doldurmayı unuturlar. Ama aynı dosya adı gibi, bu bilgi size bazı ek SEO suyu verir. Alternatif etiketler (veya alternatif metin) ortalama ziyaretçiniz tarafından görülmez, ancak arama motorlarına her bir resmin ne 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 kelime öbeğiyle, tercihen hedefli bir anahtar kelimeyle doldurduğunuzdan emin olun . (Alternatif metin, görme engelli ziyaretçilerin sitenize ses tabanlı yazılımla gezinmesine de yardımcı olur, bu nedenle web sitesi erişilebilirliğini iyileştirmenin güzel bir yoludur.) İşte iyi alt etiketleri yazmak için birkaç ipucu . Dosya adları ve alt etiketleri, ürün sayfalarının SEO'su için özellikle önemlidir . Mantıklıysa, kullanıcılar fotoğraf başlıklarını diğer web sitesi metninden daha fazla okuduğundan , resminize bir başlık ekleyin . Jimdo'da alt etiketi ve altyazıyı doldurma Alt Metninizi ve başlığınızı doldurmayı unutmayın! Not: Alt etiketleri, adları ve altyazıları doldurmak SEO için iyidir, ancak anahtar kelime şeyler yapmaya çalışmayın . Sadece bir resmi doğru bir şekilde İngilizce olarak doğru bir şekilde tanımlamak istersiniz; alakasız veya tekrar eden anahtar kelimeler eklemek sizi arama motoru tanrıları tarafından cezalandırır. Web sitenizi oluşturun 7. Görüntüyü ilgili metnin yanına koyun Tamamen maviden başka bir şey yerine metnin söyledikleriyle ilgili resimleri seçin. Alakalı bilgilerle (ilgili anahtar kelimelerle) çevrili bir resim daha iyi sıralanır . Bu ipucu ayrıca stok klişelerinden kaçınmanıza da yardımcı olur. Web siteniz eğitim ile ilgili ise, bir elmanın fotoğrafından SEO destek almazsınız. Öğretmenlerin, öğrencilerin ve sınıfların fotoğrafları okuyucular için daha ilginç ve konunuzla daha alakalı olacaktır. Özet: Bir web sitesi görüntüsünü kalite ve SEO için 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 pikseldi. Büyüklüğü 586KB idi. Korkunç değil, ama yine de sadece web sayfamda küçük bir fotoğraf olarak görüntülemek için ihtiyacımdan çok daha büyük. Daha iyi görüntü optimizasyonu için aşağıdakileri yaparım: Görüntüyü daha anlamlı bir şekilde yeniden adlandırın . Belki de make-believe-coffee-cappuccino.jpg gibi bir şey Görüntüyü yeniden boyutlandırmak ve istediğim boyuta kırpmak için bir fotoğraf aracı kullanın . Bu örnek için 1000 × 760'ı seçtim. Bir kare istiyorsanız 1000 × 1000 yapabilirsiniz. Dosya boyutunun doğru olduğundan emin olun . İstediğim boyuta kırpıp fotoğraf düzenleyicisinden indirdikten sonra dosya boyutu 117 KB'dı — mükemmel! Web sitenize yükleyin ve Alt Metni doldurmayı unutmayın! Ayrıca iyi bir ölçüm için bir altyazı ekledim. Jimdo ile görüntüye alt etiketi ekleme Bu kontrol listesi çok fazla gibi görünse de, işleme alıştıktan sonra daha hızlı hale gelir (ve bu sayfaya yer imi ekleyerek tekrar bakabilirsiniz). Ayrıca, bu adımı atmak resimlerinizin daha iyi görünmesini sağlayacak, web sitenizin daha hızlı yüklenmesine yardımcı olacak ve nihayetinde SEO'nuza fayda sağlayacaktır . Şimdi doğru görüntü alışkanlıklarına katılın ve tüm web sitenizdeki avantajlardan yararlanın. Daha da fazla ipucu için “ Web sitesi nasıl oluşturulur ” hakkındaki Kılavuzumuza bakın !
