Görüntüler kalite kaybı olmadan nasıl boyutlandırılır

“Kalite kaybı olmadan” ifadesi asimetriktir. Küçültme — görüntüyü daha küçük yapmak — tanım gereği bilgi kaybeder (kaynaktan daha az pikseliniz var), ancak iyi bir algoritma kullanırsanız kayıp genellikle görünmezdir. Büyütme — daha büyük yapmak — orada olmayan ayrıntıları icat eder ve sonuç her zaman yerel çözünürlüklü bir kaynaktan daha yumuşak görünür. Bu rehber, hangi iş akışlarının görünür kaliteyi koruduğunu ve hangilerinin korumadığını açıklar.

Küçültme: çoğunlukla güvenli

Kaynağınız 3000×2000 piksel ve web için 600×400’e ihtiyacınız varsa, piksellerin %96’sını atıyorsunuz. Küçültme algoritması atılan pikselleri korunanlara ortaladığı sürece (her N. pikseli örneklemek yerine) sonuç doğru görünür.

Modern tarayıcılar, Photoshop ve özel araçlar varsayılan olarak bilineer veya bikübikenterpolasyon kullanır. Agresif küçültmeler için (> 4× azaltma), titreşimi önlemek için birden fazla geçiş zinciri oluştururlar.

Büyütme: her zaman kaybettirir

100×100 piksellik bir görüntü 10.000 bilgi parçasına sahiptir. Bunu 400×400’e büyütmek, algoritmaning komşular arasında enterpolasyon yaparak icat ettiği 150.000 piksel dahil 160.000 piksel üretir. Sonuç matematiksel olarak bir tahmindir.

• Bilineer / bikübik.Standart enterpolasyon. Yumuşak, hafif bulanık sonuçlar. CSS’de <img> boyutunu değiştirdiğinizde varsayılan.
• Lanczos. Bikübikten daha keskin, kenarları daha iyi korur.
• Yapay zeka büyütme.Topaz Gigapixel, Adobe’nin Süper Çözünürlüğü, ESRGAN tabanlı araçlar. Milyonlarca yüksek çözünürlüklü örnekle eğitilmiş; makul ayrıntılar “halüsine” eder. Sonuçlar enterpolasyondan daha iyi görünür ama gerçekte doğru değil — “ayrıntı” icat edilmiş.

Format görünür kaliteyi etkiler

Mükemmel boyutlandırmada bile kaydettiğiniz format neyin hayatta kaldığını belirler. Tam döküm için PNG vs JPG vs WebP rehberimize bakın; kısa versiyon:

• PNG — kayıpsız. Boyutlandırıp PNG olarak kaydetmek, boyutlandırılmış görüntüyü tam olarak korur.
• %90 JPEG— tipik görüntüleme boyutlarında fotoğraflar için görsel olarak PNG’den ayırt edilemez.
• %80 WebP— eşdeğer kalitede JPEG’den %25-35 daha küçük. 2020’den bu yana fotoğraflar için web standardı.
• GIF— 256 renkle sınırlı; fotoğrafların boyutlandırılmış GIF’leri posterleşmiş görünür. Bunun yerine PNG veya WebP’ye dönüştürün.

Kaynağı koruma iş akışı

1. Kaynağı arşivleyin. Orijinal çözünürlüklü PNG veya RAW. Etiketleyin/klasörleyin ki gelecekte bulabilin.
2. Türevleri oluşturun. Daha önce boyutlandırılmış bir kopyadan değil, kaynaktan web boyutları.
3. Gerçekten ihtiyacınız olan boyutları oluşturun.Yaygın: geleneksel ekranlar için @1×, Retina için @2×, üst düzey telefonlar için @3×. <img srcset> veya <picture> aracılığıyla sunun.
4. Bir JPEG’i yeniden düzenlemeyin. Her kaydetme daha fazla bilgi düşürür. Gerçeği renk düzeltmeniz gerekiyorsa kaynakta yapın, ardından yeniden dışa aktarın.

Tarayıcı tarafında ve masaüstü tarafında boyutlandırma

Modern tarayıcılar Canvas2D’de yüksek kaliteli boyutlandırma yapar —görüntü boyutlandırma aracımızınkullandığı budur. Sonuçlar çoğu durumda Photoshop’un bilineer/bikübik ile görsel olarak özdeştir.

Toplu işlem veya olağandışı enterpolasyon ihtiyaçları için masaüstü araçlar (ImageMagick, GraphicsMagick, oxipng) tarayıcı araçlardan daha ince kontrol sağlar.

Yaygın hatalar

• Kod yerine CSS’de boyutlandırmak.CSS’de width=400 ile sunulan 4000×3000 görüntü ağ üzerinde hâlâ 4000×3000 bayttır. Görüntüleme sırasında değil, dışa aktarma sırasında boyutlandırın.
• Retina’yı unutmak. @2× ekranda 200×200 görüntü bulanık görünür. 400×400 olarak dışa aktarın, 200×200 CSS pikseli olarak görüntüleyin.
• Büyüterek kırpmak.Bir görüntünün %25’ine kırparsanız, çeyrek çözünürlüklü bir görüntünüz var. Orijinal boyutlara büyütmek yalnızca eserleri büyütür.

Canlı araç için tarayıcı tabanlı görüntü boyutlandırıcımıza ve tamamlayıcı görüntü sıkıştırıcımıza bakın. İkisi de tamamen tarayıcınızda çalışır — dosyalar sayfayı terk etmez.

Örnek çalışma: Retina dizüstü için bir kahraman görüntüsü

Tasarımdaki hedef alan: 1200 × 600 CSS pikseli. Kaynak: 6000 × 4000 piksel, sRGB JPEG, 24 megapiksel DSLR çekimi.

• Çıktı boyutlarını seçin. @2× Retina için 2400 × 1200 cihaz pikseli dışa aktarın.
• Önce kırpın, sonra yeniden örnekleyin.6000 × 4000’i 2:1 bölgeye kırpın, ardından ImageMagick’teki Lanczos3 ile 2400 × 1200’e küçültün: magick input.jpg -filter Lanczos -resize 2400x1200^ -gravity center -extent 2400x1200 [email protected].
• 80 kalitede WebP olarak kodlayın. cwebp -q 80 [email protected] -o [email protected]. Beklenen dosya boyutu: bu çözünürlükte ~85-130 KB.
• Destekleyen tarayıcılar için bir AVIF varyantı ekleyin. avifenc --speed 6 -q 60 [email protected] [email protected] → WebP’den %25-40 daha küçük.

Yaygın hatalar (devam)

• Her düzenleme sonrasında JPEG’i yeniden kaydetmek.Her JPEG kodlama kayıplıdır. 5-10 turdan sonra eserler görünür hale gelir.
• Yanlışlıkla en yakın komşuyu kullanmak.CSS image-rendering: pixelatedveya PowerPoint “Resim ekle, yeniden örnekleme yapma” her ikisi de düzgün ölçeklendiriciyi atlar.
• Alfa kanalını unutmak.Şeffaflıklı bir PNG’yi önceden çarpılmamış bir algoritmayla boyutlandırmak, alfa kenarlarında koyu saçaklar üretir.
• imageSmoothingQuality="high"’a tarayıcıda güvenmek. Safari, Firefox ve Chrome bunu farklı uygular.

Özel durumlar

• SVG. Vektör grafiklerin yeniden örneklemeye ihtiyacı yoktur — herhangi bir boyutta kayıpsız olarak yeniden işlenirler.
• Animasyonlu GIF/WebP. Kare başına zamansal tutarlılık olmadan yeniden örnekleme kareler arasında titreme oluşturur. ffmpeg ile zamansal filtre kullanın veya modern animasyon formatına dönüştürün.
• HDR görüntüler. 10 bit ve 12 bit PQ/HLG kodlu içerik, HDR farkında yeniden örnekleyiciler gerektirir.
• Kaplamasız kağıtta >300 PPI baskı.Kaplamasız kağıtta mürekkep nokta kazancı yaklaşık 250 PPI’da doyar; 600 PPI’ya kaynağı yeniden örneklemek boşa bayttır.