Resim Küçültme ve Boyutlandırma

Resim küçültme nedir, bu araç tam olarak ne yapar?

Resim küçültme, bir fotoğrafın piksel ölçüsünü, dosya boyutunu ya da ikisini birden düşürmektir. Telefonla çektiğiniz 12 megapiksellik bir kare yaklaşık 4000 × 3000 pikseldir ve birkaç megabayt tutar. Oysa bir başvuru formu, e-posta eki ya da web sayfası çoğu zaman bunun küçük bir kısmıyla yetinir.

Bu araç iki işi bir arada yapar:

• Boyutlandırma: genişliği ve yüksekliği piksel olarak değiştirir; oran kilidi fotoğrafın basık ya da uzun görünmesini engeller.
• Sıkıştırma: JPG veya WebP kalitesini ayarlar ya da dosyayı belirlediğiniz KB sınırına kendisi sığdırır.

Ekibimle bu işi en çok site yayına girmeden önce yapıyoruz; çünkü web tasarım projelerinde sayfayı en çok ağırlaştıran şey, özenle seçilmiş ama hiç küçültülmemiş fotoğraflar oluyor. Araç tamamen tarayıcınızda çalışır; dosyanız hiçbir sunucuya gitmez.

Dosya boyutunu ne büyütür: piksel sayısı mı, kalite mi?

İkisi de etkiler, ancak etkileri aynı ölçekte değildir. Piksel sayısı genişlik ile yüksekliğin çarpımıdır; bu yüzden iki kenarı yarıya indirdiğinizde piksel sayısı dörtte bire iner. Örneğin 4000 × 3000 piksellik bir fotoğrafta 12 milyon piksel vardır; 1280 × 960 piksele indiğinizde geriye yaklaşık 1,23 milyon piksel, yani onda biri kalır.

Kalite ise her pikselin ne kadar ayrıntıyla saklanacağını belirler. Kaliteyi %90'dan %70'e çekmek dosyayı küçültür, fakat piksel azaltmanın getirdiği sıçramayı nadiren yakalar. Dolayısıyla sıralama şöyle olmalı:

1. Önce resmin gösterileceği en büyük genişliği bulun ve oraya inin.
2. Ardından biçimi seçin: fotoğrafta JPG veya WebP.
3. En son kaliteyi kısın ve önizlemede kontrol edin.

Aracın Değişim kartı bu kazancı yüzde olarak gösterir. Aynı oranı elle hesaplamak isterseniz yüzde hesaplama aracındaki yüzde değişim modunu kullanabilirsiniz.

Biçim seçimi dosya boyutunu ne kadar değiştirir?

Biçim, aynı piksellerin diskte nasıl saklanacağını belirler ve fark büyüktür. JPG kayıplı sıkıştırır: gözün zor fark ettiği ayrıntıyı atar, bu sayede fotoğraflarda küçük dosya verir. PNG ise kayıpsızdır; her pikseli olduğu gibi tutar. Bu yüzden bir fotoğrafı PNG'ye çevirdiğinizde dosya çoğu zaman küçülmez, tam tersine büyür.

WebP her iki yaklaşımı da destekleyen daha yeni bir biçimdir. Google'ın kendi ölçümüne göre kayıplı WebP, eşdeğer kalitede JPEG'den %25-34 küçüktür; kayıpsız WebP de PNG'ye göre %26 tasarruf sağlar. MDN de kayıplı WebP için ortalama %25-35 daha küçük dosya bilgisini verir.

• Fotoğraf ve ürün görseli: WebP, kabul edilmiyorsa JPG.
• Ekran görüntüsü, logo, metinli grafik: PNG; keskin kenarlar bozulmaz.
• Şeffaf arka plan: PNG veya WebP. JPG şeffaflık taşımaz, araç bu alanları beyazla doldurur.

Aracın Sonuç kartı her seçimde yeni boyutu anında gösterir; bu nedenle üç biçimi sırayla deneyip en küçüğünü görmek birkaç saniye sürer.

Başvuru formunun KB sınırına nasıl inersiniz?

Sınav, burs, iş başvurusu ya da resmi kurum formları fotoğraf için çoğu zaman bir üst sınır koyar. Böyle bir durumda Hedef dosya boyutu sekmesine geçin, sınırı KB olarak yazın ve Hedefe Küçült düğmesine basın. Araç önce kaliteyi %50 ile %95 arasında dener; yetmezse kenarları %20'lik adımlarla küçültür ve sonucu yeşil satırda yazar.

Burada küçük ama önemli bir tuzak var: KB herkes için aynı sayı değildir. Bazı sistemler 1 KB'yi 1024 bayt, bazıları 1000 bayt sayar; örneğin Apple, macOS ve iOS'un kapasiteyi ondalık sistemle raporladığını belirtir. Araç bu yüzden hedefi 1000 baytlık KB ile uygular. Böylece 200 KB'lik bir sınırda dosya, form hangi tanımı kullanırsa kullansın, sınırın altında kalır.

Formun ayrıca piksel ölçüsü istediği durumlar da olur. O zaman En uzun kenar en fazla satırından 800 veya 1280 pikseli seçin ya da Boyut ve kalite sekmesinde genişliği formun yazdığı değere ayarlayın. Kısacası önce formun yönergesini okuyun, sonra aracı o sayılara göre kurun.

Web sitesi ve SEO için resim küçültme nasıl yapılır?

Web'de her fotoğraf sayfanın açılış süresine eklenir. web.dev, iyi bir Largest Contentful Paint (LCP) değeri için sayfa ziyaretlerinin en az %75'inde 2,5 saniyenin altını hedefler ve LCP görselleri için doğru boyut, modern biçim ve sıkıştırma önerir. Site hızının SEO'ya etkisi yazımda bu bağı daha ayrıntılı anlattım.

Site için görsel hazırlarken benim uyguladığım kontrol listesi şöyle:

• Resmi, tasarımda göründüğü en büyük genişliğe indirin; tam ekran bir kapak için 1920 piksel çoğu zaman yeterli olur.
• Fotoğraflarda WebP, logo ve arayüz görsellerinde PNG seçin.
• Dosya adını anlamlı yapın; Google Görseller belgesi IMG00023.JPG yerine açıklayıcı ad önerir. Bunun için slug oluşturucu işinizi hızlandırır.
• Yayından sonra Lighthouse ile performans testi yapıp görsel uyarılarını kontrol edin.

Görsel optimizasyonu tek başına sıralama getirmez, ama hızın zemini olur. Sitenizin genelinde teknik sorunlar varsa SEO danışmanlığı kapsamında bunları birlikte ele alabiliriz.

Kimlik ve belge fotoğraflarında nelere dikkat etmelisiniz?

Kimlik, pasaport, diploma ya da imzalı belge gibi hassas görselleri küçültürken iki şeyi korumanız gerekir: gizlilik ve okunabilirlik. Gizlilik tarafında bu araç avantajlıdır; çünkü küçültmeyi tarayıcınızın kendi çizim motoru yapar ve dosya cihazınızdan çıkmaz. Paylaşım bağlantısına da yalnız ayarlar yazılır, görselin kendisi asla girmez.

Okunabilirlik tarafında ise aşırı küçültme gerçek bir risktir. Belgedeki küçük yazılar düşük piksel ve düşük kalitede ilk bozulan ayrıntıdır. Bu yüzden şu sırayı öneririm:

• Belgeyi düz ve iyi ışıkta çekin; eğik çekim sonradan düzelmez.
• Kaliteyi %75'in altına indirmeden önce genişliği düşürmeyi deneyin.
• Sonucu önizlemede büyütüp en küçük yazıyı okuyabildiğinizden emin olun.
• Metin ağırlıklı taramalarda JPG'nin kenarlarda leke bırakması olasıdır; sınır izin veriyorsa PNG'yi de deneyin.

Ayrıca yeni dosya, orijinaldeki kamera ve konum bilgilerini taşımaz; ayrıntısını SSS bölümünde anlattım.

Küçültürken kaliteyi korumanın pratik yolları

Kaliteyi korumanın ilk kuralı her zaman orijinalden başlamaktır. Kayıplı bir dosyayı her kaydedişinizde biraz daha ayrıntı kaybolur; bu yüzden küçültülmüş bir kopyayı tekrar tekrar sıkıştırmak yerine orijinali saklayın ve her ihtiyaçta ondan yeni bir sürüm üretin.

İkinci kural karşılaştırmaktır. Önizlemeye basılı tuttuğunuzda araç orijinali gösterir, bıraktığınızda sonuca döner; klavyede aynı işi boşluk tuşu yapar. Yüzlerde, gökyüzü geçişlerinde ve ince yazılarda fark varsa kaliteyi biraz yükseltin.

Üçüncü kural büyütmekten kaçınmaktır. Genişlik alanına orijinalden büyük bir değer yazabilirsiniz, fakat araç eksik ayrıntıyı yeniden yaratamaz; sonuç yalnızca daha büyük ve daha bulanık bir dosya olur. Hızlı boyut düğmeleri bu nedenle resmi hiç büyütmez.

Son olarak e-ticarette tutarlılığa bakın. Aynı kategorideki ürün görsellerini aynı genişlik ve kaliteyle hazırlamak hem sayfayı hızlandırır hem de vitrini düzenli gösterir; e-ticarette görsel dil yazımda bu konuya değindim.