Görsel teknolojileri ve optimizasyon notları

Web’de kullanılan görsellerin üretimi, dönüştürülmesi, sıkıştırılması, sunulması ve aranabilirliği üzerine teknik değerlendirmeler ve uygulama odaklı yazılar.

Tüm yazılar

Çok dilli sitelerde görsel alt metin yerelleştirmesi ve hreflang ilişkisi

Çok Dilli Sitelerde Görsel Alt Metinler Nasıl Yerelleştirilir?

Her dil versiyonunda ayrı alt metin zorunluluğu, hreflang ile ilişki, CMS yaklaşımları ve makine çevirisi risklerine pratik çözümler.

Stok fotoğraf kullanımı SEO ve kullanıcı güveni üzerindeki etkisi

Stok Fotoğraf Kullanımı SEO'yu ve Güveni Etkiler mi?

Stok fotoğrafların Google görsel arama performansı ve kullanıcı güveni üzerindeki etkisi; hangi bağlamlarda sorun çıkarır, hangi bağlamlarda kabul edilebilir.

Aynı görselin farklı boyut varyantları ve responsive image planlaması

Aynı Görselin Farklı Boyutlarını Nasıl Planlamalı?

Hero, thumbnail, OG ve srcset bağlamlarında ihtiyaç duyulan boyutları planlama, kırılma noktası seçimi, retina kararı ve dosya adlandırma stratejisi.

Görsel sürümleme stratejisi ve eski dosya temizleme

Görsel Sürümleme Nasıl Yönetilir? Eski Dosyalar Nasıl Temizlenir?

CDN önbellek sorunlarını önlemek için dosya adı stratejileri, içerik hash ve timestamp yöntemleri ile eski görsel dosyalarının güvenli temizleme akışı.

Toplu görsel dönüştürme akışı cwebp sharp ImageMagick ile otomasyon

Toplu Görsel Dönüştürme Akışı Nasıl Kurulur?

Yüzlerce görseli yeniden formatlamak için cwebp, ImageMagick ve sharp araçlarıyla klasör bazlı otomasyon, tutarlı kalite ayarı ve hata yönetimi.

Sıkıştırma sonrası görsel kalitesi ölçme ve kontrol listesi

Görsel Kalitesi Nasıl Ölçülür? Sıkıştırma Sonrası Kontrol Listesi

Gözle kontrol teknikleri, SSIM ve PSNR metrikleri, görsel türüne göre kırılgan bölgeler ve dosya boyutu kazancının kalite kaybına işaret ettiği sınır.

SVG sprite ve icon font karşılaştırması erişilebilirlik ve performans

SVG Sprite mı Icon Font mu?

Çok renkli ikon desteği, erişilebilirlik kontrolü ve render kalitesi açısından SVG sprite ve icon font arasındaki pratik farklar ve proje bazlı seçim kriterleri.

PWA ikon boyutları 192px ve 512px web manifest için boyut seti

PWA İçin İkon Boyutları Nasıl Hazırlanır?

Web manifest'te 192px ve 512px neden zorunlu, splash screen için hangi boyut kullanılıyor, maskable ikon için boyut stratejisi ve doğrulama adımları.

Maskable icon safe zone ve Android adaptive icon sistemi

Maskable Icon Nedir? PWA İkonlarında Neden Önemlidir?

Android'in adaptive icon sisteminde PWA ikonunuzun kırpılmadan görünmesi için safe zone kuralı, maskable icon üretimi ve web manifest entegrasyonu.

Apple touch icon iOS ana ekrana ekleme ve favicon ekosistemi

Apple Touch Icon Nedir? Nasıl Hazırlanır?

iOS'ta "Ana Ekrana Ekle" ile görünen ikonun nereden geldiği, 180x180px boyut gereksinimleri, güvenli alan tasarımı ve favicon ekosistemindeki yeri.

Karanlık mod için SVG logo adaptasyonu ve raster format çift dosya stratejisi

Karanlık Mod İçin Logo ve İkon Nasıl Hazırlanır?

SVG logoların prefers-color-scheme ile tema adaptasyonu, PNG ve WebP için çift dosya stratejisi ve picture etiketiyle dark mode görsel servisi.

Screenshot görsellerini optimize etmek için PNG WebP ve boyut küçültme stratejileri

Screenshot Görselleri Nasıl Optimize Edilir?

Lossy sıkıştırmanın metin üzerindeki etkisi, PNG ve WebP lossless arasındaki seçim, retina ekranlar için 2x üretim ve kırpma ile ölçekleme stratejileri.

Şeffaf arka plan için PNG WebP SVG ve AVIF format karşılaştırması

Şeffaf Arka Plan İçin En Doğru Format Hangisi?

PNG-24, WebP lossless ve SVG arasındaki şeffaflık desteği farkları, JPEG'in neden dışarıda kaldığı ve hangi senaryonun hangi formatı zorunlu kıldığı.

Blur placeholder ve LQIP tekniği görsel yükleme deneyimi

Blur Placeholder ve LQIP Nedir?

Görsel yüklenmeden önce ekranda görünen bulanık ön görselin nasıl üretildiği, LQIP'in teknik karşılığı ve ne zaman gerçek fark yarattığı.

decoding async attribute ve tarayıcı decode mekanizması

decoding="async" Nedir? Görsellerde Ne İşe Yarar?

Tarayıcının görsel decode işlemini ana iş parçacığından ayıran decoding attribute'u, ne zaman fark yaratır ve LCP görseline nasıl uygulanır.

Görsellerde preload ve fetchpriority önceliklendirme mekanizmaları

Görsellerde preload ve fetchpriority Ne Zaman Kullanılır?

preload ve fetchpriority'nin farklı mekanizmalar olduğu, her birinin hangi senaryoda anlamlı olduğu ve gereğinden fazla kullanımın LCP'yi nasıl olumsuz etkilediği.

CSS background-image ve HTML img etiketi preload scanner farkı

CSS Background Image Kullanırken Performans Nasıl Korunur?

background-image'ın preload scanner tarafından neden görülemediği, LCP üzerindeki etkisi ve ne zaman img etiketinin tercih edilmesi gerektiği.

Next.js next/image bileşeni optimizasyon pipeline ve LCP

Next.js Image Bileşeni SEO ve Performansı Nasıl Etkiler?

next/image bileşeninin otomatik WebP dönüşümü, fill ve sabit boyut modları, priority prop ile LCP optimizasyonu ve blur placeholder entegrasyonu.

Shopify ürün görseli boyutu ve CDN pipeline

Shopify Görsel Boyutları ve Ürün Medyası Nasıl Optimize Edilir?

Shopify'ın görsel pipeline'ı, 2048px boyut sınırı, tema image_url filtresi ve CDN'in otomatik WebP dönüşümünün çalışma mantığı.

Cloudflare Polish, Image Resizing ve Mirage özelliklerinin çalışma mantığı

Cloudflare Image Optimization Özellikleri Nasıl Çalışır?

Polish, Image Resizing ve Mirage arasındaki fark, hangi plan katmanında çalıştıkları ve hangi senaryoda hangisine ihtiyaç duyulduğu.

Görsel CDN edge önbellekleme ve coğrafi dağıtım

Görsel CDN Nedir? Resimleri CDN Üzerinden Sunmak Mantıklı mı?

CDN olmadan görsel sunumunda gecikmenin kaynağı, edge önbellekleme avantajları ve görsel CDN seçeneklerinin karşılaştırması.

Image sitemap XML yapısı ve Google Search Console entegrasyonu

Image Sitemap Nasıl Hazırlanır?

Google'ın görsellerinizi keşfedip indekslemesi için image sitemap XML yapısı, CMS entegrasyonu ve Search Console doğrulaması.

Görsel SEO dosya adı ve alt metin sinyal karşılaştırması

Görsel Dosya Adı mı Alt Metin mi Daha Önemli?

Görsel SEO'da dosya adı ve alt metnin farklı işlevleri, hangisinin hangi senaryoda öncelik taşıdığı ve ikisini birlikte doğru kullanma.

Görsel alt metni yazımı erişilebilirlik ve SEO için

Alt Metin Nasıl Yazılır? Ürün, Blog ve Kategori Örnekleri

Ürün, blog kapağı ve kategori görselleri için etkili alt metin yazımı, somut örnekler ve yaygın hatalar.

E-ticaret ürün görseli boyutu ve platform gereksinimleri

Ürün Görseli Boyutu Kaç Olmalı? E-Ticaret İçin Rehber

Shopify, Amazon ve kendi siteniz için ürün görseli boyut kararları, zoom desteği çözünürlüğü ve varyant görseli yönetimi.

Blog kapak görseli boyutu hero OG ve thumbnail bağlamları

Blog Kapak Görseli Boyutu Kaç Olmalı?

Hero alanı, OG paylaşımı ve CMS thumbnail kırpması için tek kapak görseli boyutu ve oran kararları.

Open Graph görsel boyutu ve platform kırpma davranışı

Open Graph Görsel Boyutu Kaç Olmalı?

OG görseli için 1200×630 standardı, platform kırpma farkları, güvenli alan kullanımı ve JPEG ile PNG seçimi.

Logo dosyası piksel boyutu ve format kararları

Logo Dosyası Kaç Piksel Olmalı?

Web başlığı, favicon ve sosyal medya kartı için logo boyut kararları ile her bağlama uygun format seçimi.

SVG dosya boyutu küçültme ve path optimizasyonu

SVG Dosya Boyutu Nasıl Küçültülür?

Tasarım araçlarından şişmiş çıkan SVG dosyalarını SVGO ile temizleme, path hassasiyetini azaltma ve temiz export yöntemleri.

AVIF fallback stratejisi ve picture etiketi

AVIF Fallback Stratejisi Nasıl Kurulur?

AVIF desteği olmayan tarayıcılarda WebP ve JPEG'e düzenli geçiş için fallback zincirinin doğru kurulum mantığı.

WebP Lossy ve Lossless Farkı Nedir?

WebP Lossy ve Lossless Farkı Nedir?

WebP içinde kayıplı ve kayıpsız sıkıştırma farkını, kalite ve dosya ağırlığı dengesi üzerinden açıklayan rehber.

Progressive JPEG Nedir? Hâlâ Kullanılmalı mı?

Progressive JPEG Nedir? Hâlâ Kullanılmalı mı?

JPEG dosyalarının kademeli yüklenme mantığını, bugünkü değerini ve hangi senaryolarda hâlâ anlamlı olabileceğini açıklayan rehber.

PNG-8 mi PNG-24 mü?

PNG-8 mi PNG-24 mü?

Şeffaf görsellerde sınırlı renk paleti ile tam renk derinliği arasındaki kalite ve ağırlık farkını açıklayan rehber.

EXIF ve Metadata Temizleme Neden Önemlidir?

EXIF ve Metadata Temizleme Neden Önemlidir?

Görsellerin içinde taşınan görünmez verinin boyut, gizlilik ve yayın disiplini açısından neden ayrı kontrol edilmesi gerektiğini anlatan rehber.

Retina Ekranlar İçin 2x ve 3x Görsel Hazırlama

Retina Ekranlar İçin 2x ve 3x Görsel Hazırlama

Yüksek yoğunluklu ekranlarda hangi yüzeylerin 2x veya 3x kaynağı gerçekten hak ettiğini ayıran uygulamalı rehber.

Lazy Loading Görsellerde Ne Zaman Kullanılmamalı?

Lazy Loading Görsellerde Ne Zaman Kullanılmamalı?

İlk ekran ve kritik medya alanlarında lazy loading kararının neden çoğu zaman ters etki ürettiğini açıklayan rehber.

Hero Görseli Nasıl Optimize Edilir?

Hero Görseli Nasıl Optimize Edilir?

Hero alanında boyut, format, öncelik ve LCP ilişkisini birlikte ele alarak ilk ekran görselini daha dengeli hale getiren rehber.

Görsellerde CLS Sorunu Nasıl Önlenir?

Görsellerde CLS Sorunu Nasıl Önlenir?

Görsel yüklenmeden önce yer ayrılmaması yüzünden oluşan layout shift sorunlarını, responsive medya ve kapsayıcı oranlarıyla birlikte açıklayan rehber.

<picture> Etiketi Ne Zaman Kullanılır?

picture Etiketi Ne Zaman Kullanılır?

picture etiketinin srcset'ten farkını, format fallback ve art direction kullanımını hangi senaryolarda gerçekten haklı kıldığını açıklayan rehber.

srcset Nedir? Responsive Görseller Nasıl Kurulur?

srcset Nedir? Responsive Görseller Nasıl Kurulur?

srcset ve sizes kullanımını, tarayıcının doğru kaynağı nasıl seçtiğini ve responsive görsel kurulumundaki kritik hataları açıklayan rehber.

Favicon Nedir? Nasıl Yapılır, Boyutu Kaç Olmalı?

Favicon Nedir? Nasıl Yapılır, Boyutu Kaç Olmalı?

Favicon hazırlarken hangi boyutların mantıklı olduğunu, SVG ve PNG tercihlerini ve küçük ölçekte netlik kontrolünü anlatan rehber.

SVG mi PNG mi? Logo, İkon ve Arayüz İçin Doğru Seçim

SVG mi PNG mi? Logo, İkon ve Arayüz İçin Doğru Seçim

Logo, ikon ve arayüz görsellerinde SVG ile PNG arasında seçim yaparken ölçek, netlik ve bakım kolaylığını birlikte değerlendiren rehber.

AVIF mi WebP mi? Hangi Format Daha Mantıklı?

AVIF mi WebP mi? Hangi Format Daha Mantıklı?

AVIF ile WebP arasında seçim yaparken dosya boyutu kadar kontrol maliyeti ve ekip pratiğinin de hesaba katılması gerektiğini anlatan rehber.

WebP'ye Dönüştürme: JPG ve PNG'den WebP Yapma

WebP'ye Dönüştürme: JPG ve PNG'den WebP Yapma

JPG ve PNG dosyalarını WebP'ye çevirirken toplu işlem, kalite kontrolü ve gerçek kullanım senaryosu üzerinden ilerleyen uygulama rehberi.

WordPress Görsel Optimizasyon Rehberi

WordPress Görsel Optimizasyon Rehberi

WordPress sitelerde medya kütüphanesi, tema boyutları, format seçimi ve görsel teslimat zincirini düzenlemeye odaklanan rehber.

Görsel SEO Rehberi: Alt Metin, Dosya Adı, Boyut ve Sitemap

Görsel SEO Rehberi: Alt Metin, Dosya Adı, Boyut ve Sitemap

Alt metin, dosya adı, boyutlandırma ve image sitemap kararlarının birlikte nasıl çalıştığını anlatan arama görünürlüğü rehberi.

PNG mi JPG mi? Hangi Durumda Hangisi Daha İyi?

PNG mi JPG mi? Hangi Durumda Hangisi Daha İyi?

PNG ile JPG arasında seçim yaparken dosya türü, şeffaflık ve görünür kalite dengesine nasıl bakılması gerektiğini anlatan karşılaştırma.

WebP Nedir? JPG ve PNG Yerine Ne Zaman Kullanılır?

WebP Nedir? JPG ve PNG Yerine Ne Zaman Kullanılır?

WebP formatının gerçek kullanım alanını, sınırlarını ve JPG ile PNG karşısında ne zaman öne çıktığını açıklayan karar rehberi.

Resim Sıkıştırma Nasıl Yapılır? JPG, PNG ve WebP Rehberi

Resim Sıkıştırma Nasıl Yapılır? JPG, PNG ve WebP Rehberi

JPG, PNG ve WebP dosyalarında sıkıştırma sırasını, kalite kontrolünü ve en sık yapılan hataları açıklayan uygulama rehberi.

Resim Boyutu Küçültme: Kaliteyi Bozmadan Dosya Yükünü Azaltma

Resim Boyutu Küçültme: Kaliteyi Bozmadan Dosya Yükünü Azaltma

Gereksiz piksel, yanlış format ve aşırı kalite yüzünden şişen dosyaları daha dengeli hale getiren yöntem sırası.