Web Sitesi Tasarımı | Profesyonel Web Sitesi | Web Tasarım

Fotoğraf boyutlandırma web sitesi için oldukça yüksek öneme sahippir. Web sayfamızda resim kullanırken onları nasıl optimize edeceğimizi ve dikkat etmeniz gereken ne gibi noktalar olduğunu hiç düşündünüz mü?

Bu yazımızda resimlerimizi hangi platformlara nasıl optimize edeceğimizi anlatacağız.

Resim optimizasyonu bir web sitesi için hayati önem ifade etmektedir. Çünkü resim veya görsel kullanmadan yazılan yazılar tüm kullanıcılara sıkıcı ve uzun göründüğünden dolayı okumaya bile gereksinim duymadıklarını göstermektedir. Peki resim kullandınız diyelim. Resmin boyutunun önemli olduğu kadar resmin formatının da yüksek öneme sahip olduğunu bilmeliyiz.

Fotoğraf Boyutlandırma İçin Kullanılan Yöntemler

Grafik Tasarım Programları Üzerinden

Resim optimizasyonları grafik düzenleme programlarından kolaylıkla yapılabilmektedir. Grafik tasarım için kullanılan programlar adlı yazımızdan programlara ulaşabilirsiniz. Bunun için bir grafik düzenleme programına ihtiyacınız var. Peki, “Program kullanmadan resim optimizasyonu nasıl yapılır?” sorusu aklınıza gelmiş olabilir. Bu sorunuzun cevabını aşağıdaki ekran görüntülerinde açıkladık.

Grafik Düzenlemeye Elverişli Siteler Üzerinden

Görüntü itibariyle Adobe Photoshop programını andıran yapısı ile anlatımlarımız Photopea isimli site üzerinden gerçekleşecektir. Öncelikle işlem yapacağımız photopea.com sitesini açınız.

Photopea karşılama ekranı
P.1 Photopea karşılama ekranı

Resim optimizasyonu için açılan siteden “New Project” seçeneğine tıklıyoruz.

Çalışma ekranımızı oluşturuyoruz.
P.2 Resim ölçüleri (Width: Genişlik – Height:Yükseklik) belirleme

Buraya çalışmak istediğimiz görselin ölçülerini girebilirsiniz. Tüm ölçüleri girdikten sonra “Create” e tıklayıp çalışma alanınızı oluşturabilirsiniz.

Fotoğraf boyutlandırma için çalışma alanımız oluşturuldu
P.3 Sizi çalışma alanı için girdiğiniz ölçüde bir ekran karşılayacaktır.
Fotoğraf boyutlandırma için resmimizi çalışmamıza ekledik.
P4. Resim Yerleşimi

Resminizi sürekleyip ekrana bırakabilirsiniz. Eğer resim, çalışma alanından büyük, yüksek & geniş ise resmi attıktan sonra “Transform controls” seçeneğine basabilirsiniz. Bu seçenek resmin kenarlarında daraltma kulakçıkları oluşturacaktır. Burada dikkat etmeniz gereken nokta ise kulakçıklardan birini hareket ettirmeden önce mutlaka “Ctrl” tuşuna basmanız gerekmektedir. Aksi halde resmi bir oyun hamuru gibi düzensiz biçimlere yanlışlıkla getirebilirsiniz.

Resim eklendi
P5. Resim bozulmadan alana eklendi.

Buraya kadar geldiyseniz resmi kaydetme aşamasına geçelim.

Fotoğrafı kaydetme aşamasına geldik.
P6. Resmi kaydetme aşaması

“File” menüsünden “Export as” menüsünün üzerine geliyoruz. Buradan JPG uzantısını seçiyoruz. Web sitemizde kullanacağımız bu resim için en uygun format JPG formatıdır.

Resimde kalite ayarlaması
P7. Resmin kalite görünümünü ayarlayıp kaydedebilirsiniz.

Web siteleri için mümkün olduğunda daha az kalite oranıyla kaydetmenizi öneriyoruz. Çünkü mobil cihazlar size bu görseli gösterirken sitenizin yavaş çalışıyor izlenimi vermesine sebep olabilmektedir.

Fotoğraf Boyutlandırma Neden Yapılmalıdır?

Yukarıda da bahsettiğimiz üzere web sitelerinde yoğun olarak kullanılan fotoğraf ve görseller bazen sitelerin yavaş çalışmasına neden olabiliyor. Bunun arkasındaki sebep kısaca resim boyutunun olması gerektiğinden büyük olması ve dijital bir görsel olmasından kaynaklanmaktadır. Matbaa ortamında basım yapılabilecek resimleri sitenize eklerseniz bir resmin boyutu 5-15 MB arasında değişebilir. Burada boyutu artıran sebep genişlik ve yükseklik değerleridir. 15 MB’lık bir görselin genişliğinin 7000px yüksekliğinin de 7000px kare bir resim olduğunu düşünün. Bir telefon ekranı maksimum 800 piksek resmi bile net gösterebilirken neredeyse 10 kat geniş görseli göstermek cep telefonlarında yüklenme sorunu ortaya çıkarmaktadır.

Bu nedenle kullanıcın ekranına en uygun resmi en uygun boyutlarda sunarak hem kullanıcıyı bekletmemiş olursunuz hem de sitenizden faydalanmasını sağlarsınız.

Fotoğraf Boyutlandırmanın Faydaları Nedir?

Cihazları ve kullanıcıları yormaz. Ölçülerine göre gelir. Hızlı açılır. Google aramalarında sitenizin yükselmesi için önemlidir. Sitenin yavaş açılması kullanıcı deneyimini etkilediği için mutlaka resimlerinizi uygun ölçülerde hazırlamalısınız.

Web Sitesi İçin Resim Optimizasyonu Yapmak

Resimleri sadece boyutlandırmak yetmez. Aynı zamanda Google’ın da anlayacağı şekilde biçimlendirip tanıtmanız gerekmektedir. Yönetim paneliniz üzerinden sitenize eklediğiniz bir görseli kodlama bölümüne geçerek de uygulayabilirsiniz.

Örnek

<img src="…/resimismi.jpg" title="resmi anlatan bir başlık" alt="Resmin alternatif bir açıklaması">

Resimleri yüklerken onlara kendi adlarını vermeyi unutmayınız. Elma resmi yükleyecekseniz eğer kısa bir örnek ile açıklayalım.

<img src="…/yesil-elma.jpg" title="Büyük Yeşil Bir Elma" alt="Doğal Yeşil Elma">

Buradaki bilgileri uyguladığınızda site sayfalarınızın hızı daha da artacak ve sunucu tarafı daha az işlem ile aynı görevi yerine getirecektir. Bu da performansın artmasına, ziyaretçinin memnuniyetine ve Google ile yakın bağ kurmanıza imkan hazırlayacaktır.

TIKLA ARA
WhatsApp