Web için Görüntü optimizasyonu
Görüntü optimizasyonu görüntü kalitesini kaybetmeden dosya boyutunu küçültme işlemidir.
Bu, mümkün olan en küçük boyutu koruyarak. Formatta, boyutta ve çözünürlükte yüksek kaliteli görüntüler elde ettiğiniz anlamına gelir.
Bir görüntü boyutunu sıkıştırmak, yeniden boyutlandırmak ve önbelleğe almak gibi farklı şekillerde optimize edilebilir. Bu, web sitelerinin performansını iyileştirmeye ve web sayfası yükleme hızını artırmaya yardımcı olur.
Optimizasyon neden önemlidir?
Kullanıcılar, 3 saniyeden uzun süren web sitelerini terk etme eğilimi gösterir.
Bu, web sitelerinin dönüşüm oranını etkileyen hemen çıkma oranını artırır. Ancak görüntü optimizasyonu ile sayfa yükleme hızı artırılabilir. Web sitelerinin SEO sıralaması iyileştirilebilir, kullanıcı deneyimi geliştirilebilir.
Sayfa yükleme hızı, bir web sayfasının tamamen yüklenmesini sağlayan zamandır. 2 saniyeden daha az süren bir web sitesi en çok ziyaret edilen ve sevilen bir yerdir.
Görüntü optimizasyonu yapmak, SEO sıralaması ve dönüşümleri için önemli bir rol oynar.
Web siteleri için görüntü optimizasyonu yapmak ve sayfanın daha hızlı yüklenmesini sağlayan bazı ipuçları:
Resimleri doğru renk şemasına kayıt edin
Öncelikle, RGB ve CMYK, görüntüleri görüntülemek için bilgisayar tarafından kullanılan iki renk şemasıdır.
RGB’nin (kırmızı, yeşil, mavi) ve CMYK’nın bulunduğu yerde cyan, macenta, sarı ve siyah bulunur. RGB, kamera, bilgisayar ve CMYK tarafından kullanılan standart renk alanı baskı için kullanılır.
Bu nedenle, CMYK görüntüleri web’de kullanılıyorsa, sayfa yükleme hızını yavaşlatırlar. Aynı zamanda RGB kadar parlak ve canlı değildirler. Bu nedenle, kullanıcıları çekmek ve sayfa yükleme hızını artırmak için RGB renk şeması görüntüleri kullanılmalıdır.
CMYK görüntülerini RGB’ye dönüştürmek için Adobe Photoshop kullanılabilir. Bir görüntünün renk profili değiştirildikten sonra. Her iki dosya arasında farklılaşmayı kolaylaştırmak için başka bir adla yeniden düzenlenmelidir.
Resim dosyası boyutunu sıkıştırın
Sayfa yükleme hızını çok yavaşlattığından 2 MB’den büyük bir web dosyası kullanılmamalıdır.
Bu nedenle, boyutu 2MB (2048 kilobayt) ile sınırlı tutmak iyi bir fikirdir. Web sitelerinde kullanılan bu resmin yanı sıra pikselli olmamalıdır. Bu, görüntülerin keskin olması ve görüntü kalitesinin tutarlı olması gerektiği anlamına gelir.
Görüntü kalitesi sıkıştırma ayarlarına, son dosya boyutuna bağlıdır. Doğru sıkıştırma ayarları ile daha küçük dosya boyutu ve iyi bir görüntü kalitesi elde edilebilir.
Genel olarak, %70-80 arasında bir görüntü sıkıştırma seviyesi ile kaydedilen bir görüntü pikselle doldurulmaz. Bu görüntü sıkıştırma aracı için kullanılabilir.
Resmi doğru dosya biçiminde kaydetmek
Grafik ve görüntülerin kaydedilebileceği dört büyük dosya formatı JPG, PNG, GIF ve SVG vardır.
Ancak her dosya formatının kendine özgü avantajları ve dezavantajları vardır. Bu nedenle, her bir grafik veya görüntünün, raster veya vektör bazında belirli bir biçimde kaydedilmesi gerekir.
Raster Görüntüler sonlu sayıda piksele sahiptir. Bir tarayıcı veya kamera gibi piksel tabanlı program kullanılarak yakalanabilir. Büyütülmüş raster görüntüler kaliteyi yitirdiğinde en uygun formatlar JPG, PNG ve GIF’dir.
Vektör grafikleri vektör yazılımı kullanılarak oluşturulurken, bu görüntüler kaliteden ödün vermeden genişletilebilir. Vektör görüntüler için en uygun format SVG ve GIF’dir. Vektör görüntüleri de JPG veya PNG formatında kaydedilebilir. Ancak bunu yapmak, görüntü grafiğinizi sınırsız olarak ölçeklendirme yeteneğini kaybeder.
JPG
JPG’nin Avantajları:
- Minimum dosya boyutu.
- En iyi yüksek kaliteli görüntüler.
- Web ve diğer modern cihazlarla uyumlu.
JPG’nin Dezavantajları:
- Görüntü optimizasyonu yaparken kalitesinde azalma.
- Saydam arka planları desteklemiyor.
Yüksek kaliteli olmayan hareketli görüntüler gerektiğinde JPG’ler kullanılabilir. Fakat renkli arka planlarda kullanılmamalıdırlar.
PNG
JPG’den çok yönlü bir başka raster formatı PNG’dir. 16 milyondan fazla rengi, alfa kanalı veya saydam bir arka planı destekleyebilir.
PNG’nin Avantajları:
- Renkli arka plan üzerinde görüntü katmanı için şeffaf arka plan sunar.
- Kaliteli görüntüleri kaybetmeden sıkıştırma yapılabilir.
PNG’nin Dezavantajları:
- Resim dosyası boyutu JPG’den daha büyük.
- Animasyonu desteklemiyor.
Beyaz olmayan arka planlara, metinlere, keskin kenarlara, logolara, simgelere ve diğer tasarımlara sahip grafikler gerektiğinde, PNG grafikleri kullanılmalıdır.
GIF
GIF, hareket oluşturmak için görüntüleri birbiri üzerine dizerek. Hareketli görüntü elde etmenizi sağlayan başka bir tarama formatıdır.
GIF’in Avantajları:
- Animasyonlu mesajlar ve resimler oluşturabilir.
- Saydam arka planları destekler.
GIF’in Dezavantajları:
- Görüntü dosyası boyutu ve kalitesi renkler ile bağlanır. Bu, daha fazla renk daha keskin görüntü anlamına gelir, ancak dosya boyutunu artırır.
- Daha az renk, görüntü grainerini oluştururken, Sadece 256 renk ile görüntü kullanılabilir.
GIF, aynı grafikte birden fazla görüntüyü esneklik ve ilginç değişiklikler ile görüntülemenizi sağlar. Ancak, birçok renge sahip grafikler dosya boyutunu artırır.
SVG
JPG, PNG, GIF’den farklı olarak SVG bir vektör formatıdır. Nesnenin web üzerindeki keskin grafiklerle işlenmesine izin verir. Vektörel görüntüleri Inkscape, Adobe Illustrator ve Sketch gibi programları kullanarak düzenlenebilir ve oluşturulabilir.
SVG’nin Avantajları:
- Daha küçük dosya boyutu.
- Dosya kalitesini kaybetmeden izin verilebilir.
- Geliştiriciler için yararlı.
- Adobe Illustrator gibi program vektör görüntüleri düzenlemek için kullanılabilir.
- Animasyona izin verir.
- Grafikler için Microsoft Office tarafından desteklenir.
SVG’nin Dezavantajları:
- Görüntü dosyası boyutu ve kalitesi renklere bağlanır. Daha fazla renk, daha büyük resim dosyası boyutuyla daha keskin görüntü anlamına gelir.
- Görüntüyü yalnızca 256 renk ile kullanma sınırlaması.
SVG görüntüleri görüntü kalitesini kaybetmeden yakınlaştırılabildiğinden. Grafik, logo, ikon ve web üzerindeki diğer resimler için kullanılabilir. Bunun dışında bu görüntüler akıllı telefon gibi yüksek piksel yoğunluklu ekranlarla harika görünecek şekilde mobil cihazlarda kullanılabilir.
Akıllı telefon ekranları için çoklu boyutları dışa aktarın
Akıllı telefonlarla kullanıcılar, mobil cihazlarındaki her şeye erişmek istiyor. Ancak, bu cihazlarda normal 72 DPI’nin aksine PC ve web için standart olarak 200’den fazla DPI görüntüleniyor.
Resimlerin her iki DPI türünü desteklemesini sağlamak için Adobe Illustrator ve Photoshop kullanılabilir. Bu, görüntüleri 2X ve 3X ölçekleriyle dışa aktarmaya yardımcı olur. Bu, orijinal görüntülerin %200 ve %300 ile oluşturulacağı anlamına gelir. Ayrıca, daha yüksek çözünürlüğe sahip görüntüler dışa aktarılabilir.
Google ve diğer arama motorları ilk sıralarda, hızlı olan web sitelerine yer verir. Ancak bu, içerik kalitesi ve görüntü optimizasyonu yapılmış web siteleri için geçerlidir. Bunun için sadece görüntü optimizasyonu yeterli değildir. Web sitesinde bulunan CSS ve Javascript kodlarının optimize edilmesi de gereklidir.
İlginizi çekebilir: