Merhabalar, bugünkü makalemiz de bir web sitesinin görüntü çözünürlüğü ve web sitelerinde vektörel çizimlerden bahsedeceğiz.
Görüntü Çözünürlüğü
Web için oluşturulan görüntüler 72 ppi(inç başına düşen piksel) kaydedilmiş olmalıdır. Görüntü çözünürlüğünün daha yüksek olması daha büyük dosya boyutu demektir.
JPEG, GIF VE PNG bitmap olarak bilinen bir tür görüntü formatıdır. Bunlar bir sürü minyatür kareden oluşur. Bir görüntünün çözünürlüğü 1 inç x 1 inç’lik bir kare alanın içindeki karelerin sayısıdır.
Görüntü Çözünürlüğü
Bu fotoğrafın küçük bir bölümü piksellerin nasıl oluştuğunu göstermek için büyütülmüştür. Masaüstü bilgisayaların çoğunda web tarayıcıları görüntüleri inç(ppi) başına 72 piksel çözünürlükte görüntüler. Baskı için kullanılan görüntüler (örneğin kitaplar ve dergiler gibi) nokta adı verilen küçük çemberlerden oluşur. Bu görüntüler genellikle inç başına 300 nokta(dpi) çözünürlükte basılır.
Bu görüntü için 310 dpi’da JPEG görüntü=1,526 kb
72 ppi’de JPEG görüntü= 368 kb
Bilgisayar ekranları 72 ppi çözünürlükte sınırlandırıldığı için web sayfasında daha yüksek çözünürlükte görüntüler kullanmak daha yüksek kalitede görüntü göstermeyecektir. Sadece daha büyük dosya boyutu ve bunları yüklemek için gereken zamanı artacaktır ve sayfaların görüntülenmesini yavaşlatacaktır.
VEKTÖREL ÇİZİMLER
Vektörel çizimler bitmap görüntülerden farklıdırve çözünürlük bağımsızdır.Vektörel çizimler yaygın olarak Adobe Illustrator gibi programlarda oluşturulur.
Bir görüntüdeki (örneğin bir logo, illüstrasyon, ya da diyagram gibi) bir çizgi çizilirken tasarımcılar genellikle bunu vektör formatında yaratırlar. Vektör biçimi görüntüler bitmap görüntülerden çok farklıdır.
Web sitelerinde vektörel çizimlerinin kullanılmasının mevcut yöntemi , orijinal vektör görüntüyü bir bitmap sürümü olarak kaydetme ve kullanmayı gerektirir.
Ölçeklenebilir Vektör Grafikleri(SVG- Scalable Vector Graphics) vektör grafik çizimleri web’de (bunların bitmap sürümlerini oluşturmaya olan ihtiyacını ortadan kaldırarak) doğrudan görüntülemek için kullanılan nispeten yeni bir formattır ancak kullanımı henüz yaygın değildir.
Vektörel çizimin bir ızgara üzerine noktalar yerleştirerek ve bu noktalar arasına çizgiler çizilerek oluşturulur. Renkler daha sonra oluşturulan çizgileri “doldurarak” eklenebilir.
Vektör formatının çizgi çizerek oluşturmanın avantajı , bunun kalitesi etkilemeden resmin boyutlarının artırılabilir olmasıdır.
Web Site Çözünürlüğü: Kullanıcı Deneyimini Optimize Etme Rehberi
Günümüzde internet kullanıcıları, farklı ekran boyutlarına ve çözünürlüklere sahip cihazlardan web sitelerine erişmektedir. Bu nedenle, web site çözünürlüğü, kullanıcı deneyimi açısından büyük bir öneme sahiptir. Bu makalede, web sitenizin farklı ekran boyutlarına nasıl uyarlanması gerektiğini ve çözünürlük optimizasyonunun neden önemli olduğunu ele alacağız.
Web Site Çözünürlüğü Nedir?
Web site çözünürlüğü, bir web sitesinin farklı ekran boyutlarına uyum sağlama yeteneğini ifade eder. Çözünürlük, ekranda görüntülenen piksel sayısıdır ve farklı cihazlarda değişiklik gösterebilir. Günümüzde en yaygın çözünürlükler şunlardır:
- 1920×1080 (Full HD) – Masaüstü ve dizüstü bilgisayarlar için yaygın
- 1366×768 – Daha küçük ekranlı dizüstü bilgisayarlar için popüler
- 768×1024 (Tablet) – Tablet kullanıcıları için standart
- 375×667 (Mobil) – Mobil cihazlarda sık kullanılan bir çözünürlük
Web Sitesi Çözünürlüğü Neden Önemlidir?
- Kullanıcı Deneyimini İyileştirir: Mobil uyumlu olmayan siteler kullanıcılar tarafından zor gezilir ve terk edilme oranı artar.
- SEO Performansını Artırır: Google ve diğer arama motorları, mobil uyumlu web sitelerini daha üst sıralara taşır.
- Daha Geniş Kullanıcı Kitlesine Ulaşmayı Sağlar: Farklı ekran boyutlarına uyum sağlayan bir web sitesi, her cihazdan erişilebilir olur.
Web Site Çözünürlüğü Optimizasyonu Nasıl Yapılır?
1. Duyarlı (Responsive) Tasarım Kullanımı
Duyarlı tasarım, web sitenizin her ekran boyutunda doğru şekilde görüntülenmesini sağlayan bir yaklaşımdır. CSS’in @media queries özelliği kullanılarak farklı ekran boyutlarına uyumlu tasarımlar oluşturulabilir.
2. Esnek Görseller ve Yazı Tipleri
Web sitesinde kullanılan görsellerin ve yazı tiplerinin esnek olması, farklı çözünürlüklerde kaliteli bir görüntü sunar. % veya vh/vw birimleri kullanarak, görsellerin ekran boyutuna uygun ölçeklenmesi sağlanabilir.
3. Mobil Öncelikli (Mobile-First) Yaklaşım
Mobil cihazlar için optimize edilen bir tasarım oluşturmak, daha iyi bir kullanıcı deneyimi sağlar. Mobil öncelikli yaklaşımda, önce mobil versiyon tasarlanır ve daha büyük ekranlara uyarlanır.
4. Test ve Optimizasyon Süreçleri
Web sitenizin farklı çözünürlüklerde nasıl göründüğünü test etmek için aşağıdaki araçları kullanabilirsiniz:
- Google Mobile-Friendly Test
- BrowserStack veya Responsinator gibi çevrimiçi test araçları
- Geliştirici Araçları (Google Chrome DevTools, Firefox DevTools)
Vektörel çizimle oluşturulmuş bir resim örneği
Bugünkü makalemizin sonuna geldik okuduğunuz ve zaman ayırdığınız için teşekkürler.
