Web görsellerinin üretimi, dönüştürülmesi ve sunulması üzerine teknik notlar.
Google Görseller sıralama sinyalleri - dosya adı, alt metin, sayfa bağlamı, yapısal veri ve özgün görsel - öncelik sırasıyla ele alınıyor; her sinyalin ne zaman etkili olduğu ve ne zaman gereksiz kaldığı gösteriliyor.
Canvas ve WebGL uygulamalarında görsel yüklemek birden fazla bellek katmanını devreye sokar. GPU'ya yüklenen texture'lar JavaScript referansından bağımsız yaşar; deleteTexture çağrısı yapılmadan serbest kalmaz.
YouTube iframe sayfaya yüklendiğinde kullanıcı videoyu hiç açmasa bile onlarca harici istek tetiklenir. Facade pattern, gerçek embed yerine yalnızca bir thumbnail ve oynat düğmesi göstererek bu yükü yalnızca videoyu isteyen ziyaretçilere taşır.
Carousel bileşenleri, görünüm dışındaki görselleri hemen yükleyerek bant genişliği israfı yaratır ve sayfa hızını düşürür. data-src kalıbıyla ertelenmiş yükleme, srcset ile boyut optimizasyonu ve JavaScript kütüphanesinin gecikmeli yüklenmesi bu üç temel sorunu birlikte çözer.
Shopify'a görsel yüklediğinizde platform arka planda otomatik varyantlar üretir, WebP dönüşümü uygular ve görseli CDN'e dağıtır. Bu sürecin büyük bölümü satıcının erişemeyeceği altyapı katmanlarında gerçekleşir; ancak yükleme öncesi hazırlık ve sonrası doğrulama her zaman satıcının elindedir.
Canva veya ücretli bir araca gerek kalmadan görsel boyutunu düşürmenin beş ücretsiz yöntemi karşılaştırmalı olarak ele alınıyor: Squoosh, çevrimiçi servisler, GIMP, ImageMagick ve geliştirici araçları.
Figma'nın export diyaloğundaki format, ölçek ve kalite ayarlarını ikon, hero ve ürün görseli gibi farklı kullanım alanlarına göre doğru yapılandırma rehberi.
loading="lazy" CSS arka plan görselleri ve özel bileşenler için çalışmaz. Intersection Observer API ile bu boşluk kapatılır: görsel yalnızca viewport'a yaklaştığında yüklenir, tetikleme mesafesi ve bellek yönetimi geliştirici tarafından kontrol edilir.
Photoshop'un iki dışa aktarma yolu olan Save for Web ve Export As, çıktı kalitesi, metadata yönetimi, WebP desteği ve otomasyon uyumluluğu açısından farklı güçlere sahiptir. Hangisini seçeceğiniz, formatınıza ve iş akışınıza göre değişir.
Yemek fotoğrafı web'in en hassas görsel kategorisi. Renk profili, format ve boyut kararlarını doğru almak, iştah açıcı görseli hem hızlı hem kaliteli sunar.