Kesme noktalarını nasıl seçmeliyim?

Genişlikleri tipik cihaz boyutlarına göre ayarlamanızı öneririz: akıllı telefonlar (320px-480px), tabletler (768px), dizüstü bilgisayarlar (1024px) ve masaüstü bilgisayarlar (1280px+). Büyük CSS çerçevelerindeki varsayılan değerler de iyi başlangıç noktalarıdır.

Oluşturulan görüntüler bir sunucuya gönderiliyor mu?

Hayır, gönderilmiyor. Görüntünün yüklenmesinden yeniden boyutlandırılmasına ve ZIP dosyasının oluşturulmasına kadar tüm işlemler tamamen tarayıcınız (yerel ortam) içinde tamamlanır, bu da onu son derece güvenli kılar.

Hangi görüntü formatını seçmeliyim?

Daha küçük dosya boyutu ve daha iyi kalitesi nedeniyle genellikle "WebP" yi öneririz. Çok eski tarayıcılarla uyumluluğa kesinlikle ihtiyacınız varsa JPEG veya PNG'yi seçin.

img+srcset mi yoksa picture öğesini mi kullanmalıyım?

Sadece ekran genişliğine göre farklı boyutlar sunmak istiyorsanız "img+srcset" basit ve idealdir. WebP'yi desteklemeyen tarayıcılar için geri dönüşlere (fallback) ihtiyacınız varsa veya ekran genişliğine göre görüntü en boy oranını veya kompozisyonunu (Sanat Yönetimi) değiştirmek istiyorsanız "picture" öğesini kullanın.

Orijinal görüntüden daha büyük bir kesme noktası belirtirsem ne olur?

Bir görüntüyü orijinal boyutunun ötesine büyütmek kalitesini düşürür (bulanıklaştırır). Bu nedenle, bu araç otomatik olarak orijinal görüntüden daha büyük kesme noktalarını hariç tutar veya bunları orijinal boyutunda çıkarır.

⚠️ Bu aracın çalışması için JavaScript'in etkinleştirilmesi gerekir.

📱

responsive image generator,

Duyarlı Görüntü Oluşturucu srcset Yapıcı

Bir görüntüyü tarayıcınızda çoklu kesme noktası genişliklerine topluca yeniden boyutlandırın.
ZIP kaydetme ve HTML kod üretimini destekler.

📏

Toplu Yeniden Boyutlandırma

Çok genişlikli görüntüleri otomatik oluştur

📋

Kod Üretimi

srcset/picture etiketleri çıkarır

🔒

Güvenli İşlem

Görüntüler hiçbir sunucuya gönderilmez

🔒

Gizlilik Koruması

Görüntüler tarayıcınızda güvenle işlenir ve hiçbir sunucuya gönderilmez.

📸

Buraya bir görüntü tıklayın veya sürükleyip bırakın

JPEG / PNG / WebP destekler

about,

Duyarlı Görüntü Oluşturucu Hakkında

Duyarlı Görüntü Oluşturucu, tek bir görüntü dosyasından çeşitli kesme noktalarına (ekran genişliklerine) karşılık gelen birden fazla yeniden boyutlandırılmış görüntüyü otomatik olarak üreten bir yardımcı araçtır.

Akıllı telefonlar, tabletler ve masaüstü bilgisayarlar gibi farklı cihazlar için en uygun boyuttaki görüntüleri sunarak web sitenizin yüklenme hızını ve Önemli Web Verileri (Core Web Vitals) puanlarını önemli ölçüde artırabilirsiniz.

Tüm görüntü işleme tamamen tarayıcınız içinde tamamlandığından, son derece gizli görüntüler için bile güvenle kullanabilirsiniz.

how to,

Nasıl Kullanılır

STEP 1

Bir görüntü seçin

İşlemek istediğiniz görüntüyü (JPEG, PNG, WebP) sürükleyip bırakarak veya seçerek yükleyin. Görüntünüz asla bir sunucuya gönderilmez, gizliliğiniz garanti altındadır.

STEP 2

Kesme noktalarını ve formatı yapılandırın

Çıktı için hedef genişlikleri seçin (ör. 320px, 640px, 1024px) ve çıktı formatını (WebP önerilir) ve kaliteyi ayarlayın.

STEP 3

Kodu kopyalayın ve görüntüleri kaydedin

srcset veya picture öğesini içeren otomatik olarak oluşturulan HTML kodunu kopyalayın ve yeniden boyutlandırılmış görüntüleri ZIP dosyası olarak tek seferde kaydedin.

glossary,

Duyarlı Görüntü Sözlüğü

Duyarlı Görüntüler (Responsive Images): Kullanıcının cihazının ekran boyutuna ve çözünürlüğüne uyarlanmış optimum görüntü verisi sunma tekniği. Sayfa yüklenme hızlarını iyileştirmek için gereklidir.
srcset niteliği: Tarayıcıya aday görüntü dosyalarının bir listesini ve ilgili boyutlarını sağlamak için HTML <img> etiketine eklenen bir niteliktir.
sizes niteliği: Görüntünün ekran genişliğine göre ekranda ne kadar genişlikte görüntüleneceğini tarayıcıya söylemek için kullanılan bir niteliktir.
picture öğesi: Geliştiricilerin yalnızca ekran boyutuna değil aynı zamanda format desteğine (WebP gibi) göre farklı görüntüler sunmasına olanak tanıyan <source> ve <img> alt öğelerini içeren bir HTML etiketidir.
WebP: Geleneksel JPEG veya PNG formatlarına kıyasla dosya boyutunu önemli ölçüde azaltan Google tarafından geliştirilen, modern bir web standardı olarak şiddetle tavsiye edilen bir görüntü formatı.
Kesme Noktası (Breakpoint): Web tasarımında, düzenin veya görüntülenen görüntünün cihaz boyutuna uyacak şekilde değiştiği belirli bir ekran genişliğidir (piksel cinsinden).
Piksel Yoğunluğu (DPR): Bir ekrandaki fiziksel piksellerin CSS piksellerine oranı (örn., Retina ekranlar 2x'tir). Bu ekranları bulanıklaşmadan desteklemek için daha yüksek çözünürlüklü görüntülere ihtiyaç vardır.
Geç Yükleme (Lazy Loading): Görüntülerin ekranda görünmek üzere olana kadar yüklenmesini geciktiren bir teknik. loading="lazy" niteliği eklenerek kolayca uygulanabilir ve ilk sayfa yüklemesini hızlandırır.
En Boy Oranı (Aspect Ratio): Bir görüntünün genişliği ile yüksekliği arasındaki orantılı ilişki. Düzen kaymalarını önlemek için HTML'de orijinal orana dayalı width ve height niteliklerinin belirtilmesi önerilir.
Core Web Vitals: Mükemmel bir kullanıcı deneyimi sunmak için Google tarafından savunulan temel ölçümler. Uygun boyuttaki görüntülerin sunulması LCP (En Büyük İçerikli Boya) puanını önemli ölçüde artırır.

faq,

Sıkça Sorulan Sorular

Q.Kesme noktalarını nasıl seçmeliyim?: Genişlikleri tipik cihaz boyutlarına göre ayarlamanızı öneririz: akıllı telefonlar (320px-480px), tabletler (768px), dizüstü bilgisayarlar (1024px) ve masaüstü bilgisayarlar (1280px+). Büyük CSS çerçevelerindeki varsayılan değerler de iyi başlangıç noktalarıdır.
Q.Oluşturulan görüntüler bir sunucuya gönderiliyor mu?: Hayır, gönderilmiyor. Görüntünün yüklenmesinden yeniden boyutlandırılmasına ve ZIP dosyasının oluşturulmasına kadar tüm işlemler tamamen tarayıcınız (yerel ortam) içinde tamamlanır, bu da onu son derece güvenli kılar.
Q.Hangi görüntü formatını seçmeliyim?: Daha küçük dosya boyutu ve daha iyi kalitesi nedeniyle genellikle "WebP" yi öneririz. Çok eski tarayıcılarla uyumluluğa kesinlikle ihtiyacınız varsa JPEG veya PNG'yi seçin.
Q.img+srcset mi yoksa picture öğesini mi kullanmalıyım?: Sadece ekran genişliğine göre farklı boyutlar sunmak istiyorsanız "img+srcset" basit ve idealdir. WebP'yi desteklemeyen tarayıcılar için geri dönüşlere (fallback) ihtiyacınız varsa veya ekran genişliğine göre görüntü en boy oranını veya kompozisyonunu (Sanat Yönetimi) değiştirmek istiyorsanız "picture" öğesini kullanın.
Q.Orijinal görüntüden daha büyük bir kesme noktası belirtirsem ne olur?: Bir görüntüyü orijinal boyutunun ötesine büyütmek kalitesini düşürür (bulanıklaştırır). Bu nedenle, bu araç otomatik olarak orijinal görüntüden daha büyük kesme noktalarını hariç tutar veya bunları orijinal boyutunda çıkarır.

use cases,

Duyarlı Görüntüler için Kullanım Durumları

🎨

Web Sitesi Hız Optimizasyonu

Mobil kullanıcılara hafif küçük görüntüler ve bilgisayar kullanıcılarına yüksek çözünürlüklü görüntüler sunarak sayfa yükleme hızını önemli ölçüde artırın.

📱

Mobil Öncelikli UI Tasarımı

Mobil veri kullanımından tasarruf ederken, Retina ekranlar gibi yüksek piksel yoğunluğuna sahip cihazlar için güzel, net görüntüler sağlayın.

🛒

E-ticaret Ürün Görüntüleri

Büyük miktarda görüntü kullanan çevrimiçi mağazalar için en uygun boyuttaki görüntüleri sunmak çıkma oranlarını önler ve daha yüksek satışlara katkıda bulunur.

🖼️