Görüntüleri yeniden boyutlandır _

Tarayıcı tabanlı görüntü yeniden boyutlandırma nasıl çalışır

Her yeniden boyutlandırma, tamamen JavaScript'te çalışan kısa bir süreçtir. Herhangi bir codec kütüphanesi indirilmez ve sunucu dahil edilmez. Tarayıcının kendi Canvas API'si dosyayı çözer, hedef boyutta yeniden çizer ve bellekte yeniden kodlar, ardından sayfanın önizleyebileceği veya zip'leyebileceği bir Blob teslim eder. Her adım sekmenin sandbox'ında yaşadığından, orijinal dosyalar hiçbir zaman ağa ulaşmaz.

1. Her yüklenen dosyayı Blob olarak okur ve bir nesne URL'si oluşturur; böylece tarayıcı baytları sunucuya kopyalamadan veya diske yazmadan yerel olarak çözebilir.
2. Seçtiğiniz moddan hedef boyutları hesaplar — en uzun kenar sınırı, tam genişlik ve yükseklik veya yüzde ölçeği. En-boy oranı kilidi tek bir alanı düzenlerken oranları doğru tutar.
3. Hedef boyutta ekran dışı bir Canvas oluşturur ve çözülmüş pikselleri yeniden çizmek için ctx.drawImage(source, 0, 0, width, height) çağırır. Tarayıcı, ölçeklenmiş sonucu yumuşatan interpolasyonu yönetir.
4. Kaynak formatta yeniden kodlamak için canvas.toBlob çağırır. PNG kayıpsız kalır, JPEG ve WebP yüksek kalitede yeniden kodlanır. Ardından sayfa bir önce/sonra kartı gösterir ve fflate ile bellekte oluşturulan görüntü başına indirme veya tek ZIP sunar.

Neden görüntüleri yeniden boyutlandırmalısınız?

• Aşırı büyük görüntüler, yavaş sayfaların en yaygın nedenidir. 600 piksel genişliğinde bir düzene doğrudan bırakılan 4000×3000 piksellik bir telefon fotoğrafı, ekranın gösterebileceğinden yaklaşık 40 kat fazla piksel taşır. En uzun kenarı yüklemeden önce 1600 px ile sınırlamak sayfa ağırlığını ciddi ölçüde keser ve Core Web Vitals LCP'yi iyileştirir.
• Yükleme formları kesin boyutlar dayatır. Avatar slotları, kimlik fotoğrafı portalları, marketplace listeleri ve OG sosyal kartlar belirli piksel boyutları ister: Open Graph önizlemesi için 1200×630, uygulama simgesi için 512×512, küçük resim için 150×150. Doğru sayıyı girin ve reddedilen yükleme döngüsünü atlayın.
• E-posta ve sohbet araçları büyük her şeyi sessizce yeniden sıkıştırır; bu da temiz bir ekran görüntüsünü mahvedebilir. Makul bir genişliğe kendiniz yeniden boyutlandırmak, başkasının kayıplı sürecine bırakmak yerine sonucu öngörülebilir kılar.
• Toplu tutarlılık, galeri ve kataloglar için önemlidir. Karma boyuttaki fotoğraf klasörünü tek bir 800×800 hedefine sokmak, her kartın ızgarada hizalı olmasını sağlar; düzeni bozan dev bir görüntü kalmaz.

Yaygın uygulamalar

Yeniden boyutlandırma, kaynak boyutlar ile hedefin beklentileri uyuşmadığında gündeme gelir. Üç desen tekrar tekrar karşımıza çıkar.

• Shopify veya WooCommerce mağazası için ürün fotoğraflarını hazırlama. 4000 piksellik kamera orijinallerinin klasörü, mağaza cephesinin hızlı yüklenmesi için en uzun kenarı 1600 px ile sınırlandırılır; en-boy oranı dokunulmadan kalır, böylece hiçbir şey uzamış görünmez.
• Bir ana dosyadan sosyal ve uygulama varlıkları oluşturma. Open Graph kartı için tam 1200×630, ardından uygulama simgesi için 512×512 ayarlayın; ağır bir editör açmadan birkaç tıklamayla her birini dışa aktarın.
• QA veya destek ekran görüntülerinin biletlere eklemeden önce toplu olarak küçültülmesi. 50 görüntülük klasörü %50'ye ölçeklemek, hata takipçisine girmeden önce arşiv boyutunu genellikle yaklaşık dörtte üç oranında düşürür.

Uygulamalı örnek: 4000 px fotoğraftan 1600 px web görüntüsüne

Telefondan doğrudan gelen 4000×3000 piksellik bir fotoğraf, herhangi bir web düzeninin ihtiyacından çok daha büyük yaygın bir yüktür. Yeniden boyutlandırmanın ne tasarruf ettiğinin iyi bir ölçütüdür.

Fotoğrafı yükleme alanına bırakın, modu En uzun kenarı sınırla üzerinde bırakın ve değeri 1600 olarak ayarlayın. Canvas süreci görüntüyü en-boy oranı korunarak 1600×1200'de yeniden çizer, ardından orijinal formatta yeniden kodlar. Çıktı kartı, tipik bir JPEG için birkaç megabayttan birkaç yüz kilobayta düşen yeni boyutları ve dosya boyutunu gösterir. Tek dosyayı almak için karttaki İndir'e tıklayın veya tek geçişte birkaç görüntü yeniden boyutlandırdıysanız ZIP indir'e tıklayın. Bırakmadan indirmeye kadar tüm gidiş-dönüş bir saniyenin çok altında çalışır ve sayfanın kendisi yüklendikten sonra sıfır bant genişliği kullanır.

Hangi yeniden boyutlandırma modları mevcuttur?

Üç. En uzun kenarı sınırla, genişlik veya yüksekliğin daha uzun olanını bir piksel değeriyle sınırlar ve diğer tarafı eşleşecek şekilde ölçekler — hiçbir zaman bozulmadığı için güvenli varsayılandır. Tam genişlik × yükseklik, her iki sayıyı girmenize olanak tanır; ilkini düzenlerken ikincisini kaynak orandan yeniden hesaplayan en-boy oranı kilidiyle birlikte — form tam orantısız bir boyut gerektirdiğinde kilidi kapatın. Yüzde ile ölçekle, her iki boyutu tek bir faktörle çarpar; tüm toplu işlemi bir anda yarıya indirmek veya iki katına çıkarmak için kullanışlıdır. Altı tek tıklamalı hazır ayar (1920×1080'den 150×150 küçük resme) en yaygın hedefleri karşılar.

Bu cihazımda mı gerçekleşiyor?

Evet, tamamen. Sayfa, her görüntüyü bellekte çözmek, yeniden çizmek ve yeniden kodlamak için tarayıcının yerel Canvas API'sini ve Web File API'sini kullanır. Sunucuya görüntü verisi gönderilmez, geçici yükleme yoktur, bulut gidiş-dönüşü yoktur. Bunu kendiniz doğrulayabilirsiniz: DevTools'u açın, Ağ paneline geçin ve bir yeniden boyutlandırma çalıştırın. Göreceğiniz tek giden istekler, sayfa ilk yüklemesi ve reklam çağrılarıdır. Görüntü şeklinde hiçbir şey sekmeden ayrılmaz; bu da taranan kimlik belgeleri, tıbbi görüntüler ve asla yüklemek istemeyeceğiniz diğer materyaller için güvenli kılar.

Yeniden boyutlandırma kaliteyi düşürür mü?

Görüntüyü küçültmek (küçültme ölçekleme) mükemmel görünür — tarayıcı kaynak pikselleri daha az piksele ortalar, böylece ayrıntılar keskin kalır ve dosya çok küçülür. Kaynak çözünürlüğün ötesine büyütmek (büyütme ölçekleme) hiç yakalanmamış ayrıntıları icat edemez, bu nedenle büyütülmüş küçük bir görüntü yumuşak görünecektir — bu, her yeniden boyutlandırıcının sınırlamasıdır, yalnızca bu araçta değil. Çıktı, kaynak formatı korur: PNG kayıpsız kalır, JPEG ve WebP yüksek kalite ayarında yeniden kodlanır, bu nedenle orijinalden görsel fark fark edilmesi zordur.

Hangi dosya formatları destekleniyor?

Girişte, tarayıcının çözebileceği herhangi bir format kabul edilir: PNG, JPEG, WebP, GIF ve BMP, bir telefon, kamera veya ekran görüntüsü aracının ürettiği hemen her dosyayı kapsar. Çıktı, Canvas kodlayıcısının desteklediği yerde kaynak formatı korur — PNG, JPEG ve WebP doğrudan çalışır. Canvas API'sinin çözebileceği ancak yeniden kodlayamayacağı GIF ve BMP, kayıpsız PNG olarak kaydedilir. Yeniden boyutlandırılan dosya adı yeni boyutları içerir (örneğin photo-1600x1200.jpg), böylece bir toplu işlemi kolayca sıralayabilirsiniz.

Görüntülerinizi bırakın, boyutu seçin, yeniden boyutlandırın. Her şey sekmenizde çalışır. Yükleme yok, hesap yok, sunucu kuyruğu bekleme yok.