Web Sitenizde Kaçınılması Gereken 8 Görüntü Hatası
Büyük görüntüler, galeriler ve ağır fotoğraflar tasarımları web tasarımında büyük bir trend. Bu estetiği en iyi şekilde değerlendirmek için web sitenizdeki her resmin ekrana uyduğundan ve markanızı iyi temsil ettiğinden emin olmak istersiniz.
Tasarımcıların teknik konulardan görüntü kalitesine kadar yol boyunca yaptıkları birçok hata var. Ancak web sitesi resimleriyle çalışırken bu tuzaklardan birine düşmek zorunda değilsiniz. Burada, görüntü hatalarına ve bunların nasıl düzeltileceğini veya önleneceğini ele alacağız. (Bu yazıda bir bonus olarak, Ölümden Stok Fotoğraf'ın son nesneleri koleksiyonuna eğlenceli ve harika görüntülerden oluşan bir koleksiyon sunuyoruz.)
Hata: Büyük Dosyaları Yükleme
Tam boyutlu görüntüler baskı işleri söz konusu olduğunda güzeldir (ve gereklidir), ancak web söz konusu olduğunda sorunlara neden olabilir. Büyük görüntüler yavaş yükleniyor; yavaş yükleme süreleri kullanıcıların sitenizi terk etmesine neden olur.
Ne yazık ki, içine düşmek kolay bir tuzaktır. Birçok arka uç programı büyük görüntülerin yüklenmesine izin verir ve dikkat etmedikçe, dosyaların inanılmaz boyutlarda yüklendiğini bile bilmiyor olabilirsiniz. Farklı kullanımlardaki farklı görüntüler, farklı görüntü özellikleri gerektirir. Sitenizdeki yaygın resim alanlarının boyutlarının ne olduğunu öğrenmek için markanıza veya web sitesi kılavuzunuza bakın.
Görüntüleri düşünürken dosya türü de önemlidir. Lütfen web için tiff kullanmayın. En yaygın ve kullanılabilir dosya biçimleri PNG (grafikler veya logolar gibi bilgisayar tarafından oluşturulan görüntüler veya saydamlık gerektiğinde), JPG (fotoğraflar) veya GIF (animasyonlar) şeklindedir.
Çözüm: Basit çözüm, görüntüleri uygun bir web çözünürlüğünde görüneceği çerçevenin boyutuna göre boyutlandırmaktır. Ama biraz daha fazlası var. Sitenizde en iyi kullanım ve sosyal paylaşım için her görüntüyü kaydedin. (Bir Pinterest görüntüsünün genişliği örneğin 600 pikseldir; görüntünün paylaşılabilir olmasını istiyorsanız, bu boyutta olmalıdır.)
Hata: Kırpmayı Unutmak
Büyük dosyaları kullanırken bir siteyi tıkayabilir, böylece ekranda gizlenmiş tam çerçeve görüntüleri kullanabilirsiniz. Kırpma, tam çerçeve görüntüde bulunmayabilecek tanımlı bir odak noktası oluşturarak kullanıcıların görmesini istediğiniz görselleri göstermeye yardımcı olur.
Görüntü kırpma eksikliği, aynı şekil ve en boy oranlarına sahip, dinamik olmayan bir görsel yığını da oluşturabilir. Görüntüler için birden fazla kırpma ve ilginç şekiller kullanmak bir web sitesine görsel entrika ekleyebilir.
Çözüm: Her görüntünün istenen şekilde görüntülenmesi için yüklemeden önce görüntüleri uygun boyuta veya boyuta kırpın.
Hata: Küçük Resimler Hakkında Unutulma
Küçük resim boyutlandırma ve yeniden boyutlandırmanın çeşitli yolları vardır. (Birçoğu arka uç özelliklerinize bağlıdır, bu yüzden her birinin avantajlarını tartışmayacağız.) Ancak sitenizdeki en küçük resimleri güncellemeyi ve bunlara dikkat etmeyi unutmayın.
Çok sık tasarımcılar, küçük resimlerin, resim önizlemelerinin ve favicons'ların web sitesi içeriğindeki değişikliklerle güncellenmesi gerektiğini unuturlar.
Diğer büyük hata? Küçük resim boyutunda kötü bir resim kullanmak, çünkü olabildiğince büyük. Görüntü kötüyse, kullanmayın. Hiçbir görüntü kötü bir görüntüden daha iyi değildir.
Çözüm: Görüntüler değiştiğinde ve favicon'unuz güncel olduğunda eski küçük resimleri veya önizlemeleri kaldırdığınızdan emin olun.
Hata: Bulunamayan İsimler ve Meta Veriler
Dijital kameralar, web'e çevrilmeyen çeşitli meta alanlara çok fazla bilgi kaydeder. Bu bilgileri görüntülerden çıkarın ve kullanılabilir veriler için değiştirin. Arama motorları görüntülerin içeriğini okuyamaz, bu nedenle onları arama yapılabilir hale getirmek için başlığında, etiketlerinde ve çevresindeki içerikte açıklayıcı kelimeler bulunmalıdır.
Kötü resim adlarına örnekler:
- Picture1.jpg
- DSCN00023.jpg
- gözlük% ve% watch.jpg
Çok daha iyi bir resim adı, gözlük-izle-ve-bitki.jpg gibi birkaç açıklayıcı kelime içerir. Görüntünün etiket referansı, “karşı gözlük, saat ve bitki üzerindeki öğeler” gibi benzer bir açıklama içermelidir. (Ve kelimeleri doğru yazdığınızdan emin olun.)
Çözüm: Tüm web sitesi görüntüleri için güçlü adlandırma kuralları kullanın ve görüntüleri her görselle ilgili içerikle eşleştirin. Resim adları tire ile ayrılmış açıklayıcı kelimeler içermelidir.
Hata: Yanlış Ölçeklendirme veya Germe
Gerilmiş bir yüze veya yanlış ölçeklendirilmiş bir görüntüye sahip bir insandan daha garip bir şey görünmüyor. Görüntülerin genişletilmesi veya orantısız ölçeklendirilmesi (özellikle bir tema veya arka uç değişikliği meydana geldiğinde yaygın olarak görülebilir) hayırdır. Her görüntünün dikey ve yatay olarak 1'e 1 oranında ölçeklenmesi gerekir. Başka bir şey fotoğrafın bütünlüğüne zarar verir.
Çözüm: Tüm ölçeklendirme oranlarını yakından izleyin ve sitenizi periyodik olarak denetleyin.
Hata: Birden Fazla Cihaz Boyutunu Planlamıyor
Duyarlı tasarım çerçeveleri görüntüler için bazı çıkarımlarla birlikte gelir. Cihazdan cihaza veya yönlendirmeye göre şekil veya boyut değişikliği, görüntülerin cihazlar arasında nasıl görüntüleneceğini dikte etmeyi önemli hale getirir.
En yaygın uygulamalardan biri, bu değişiklikleri cihaza göre planlamak için medya sorgularını kullanmaktır. CSS, ekran boyutlarına göre görüntülere belirli stillerin uygulanmasına izin verir ve görüntülerin tasarımı “bozmadan” iyi bir şekilde oluşturulmasına yardımcı olur.
Çözüm: Duyarlı çerçeveler için ortam sorgularını kullanın ve birkaç cihazda görüntü oluşturmayı test edin.
Hata: Retina Ekranlarını Gözardı Etme
Çok uzun zaman önce bir web sitesi için ihtiyacınız olan 72 ppi'de 600 piksel genişliğinde standart bir görüntünün olduğu bir zaman vardı. Ancak ekranlar artık durum böyle değil.
Çerçevenize bağlı olarak, her görüntü retina ekranlar da dahil olmak üzere farklı ekran boyutları ve çözünürlükleri için kaydedilmiş birden fazla görüntü içerebilir. (Retina ekranların çözünürlüğü cihaza göre değişebilir, ancak standart ekranlardan önemli ölçüde daha yüksektir.)
Çözüm: Özellikle retina ekranlar için olan dosyaları ve ortam sorgularını ekleyin. (CSS-Tricks yardımcı olabilir.)
Hata: Aşırı veya Genel Sanat
Stok fotoğrafçılışı büyük bir hızlı düzeltme olabilir, ancak bazı istenmeyen sonuçlara yol açabilir. Çok fazla web sitesinde kullanılan veya kendilerine genel bir görünüm ve his veren fotoğraflar, kullanıcılarla bağlantı kuran bir görsel oluşturmaz. (Web sitenizin her biri gibi görünmesini istemiyor musunuz?)
Stok fotoğraf kullanmayı planlıyorsanız, ilginç şekillerde düzenleyebileceğiniz veya üzerinde çalışabileceğiniz görüntüleri düşünün. Başka yerlerde gördüklerinize benzeyen resimlerden kaçının (tüm rakiplerin veya benzer sitelerin resimlerine bakın).
Çözüm: Web sitenize özgü harika bir görüntü dosyası oluşturmak için bir fotoğrafçı tutmayı düşünün. Şirketinizle veya markanızla alakalı görseller ekleyin ve sitenizi doğru şekilde yansıtın.
Sonuç
Bir web sitesi projesi için görüntü seçme ve oluşturma, tasarım sürecinin en eğlenceli kısımlarından biri olabilir. Sitenizin iyi çalıştığından ve kullanıcılarla etkileşime girecek resimler içerdiğinden emin olmak için her resim ve piksele dikkat edin.
Web sitesi projeleri için görüntüleri kullanma konusunda herhangi bir ipucunuz var mı? Ne olduklarını bilmek isteriz. Onları yorumlarda paylaşın.
