Ekipten zanaat, formatlar ve iyi bir yuvarlak kırpmanın arkasındaki küçük kararlar hakkında notlar.
Cropper.js v2 dairesel maskeyi nasıl çizer
Cropper.js v2 bir Web Bileşeni olarak gelir. cropper-canvas, cropper-image ve cropper-handle elemanları sahneyi oluşturur. Dairesel kırpma bir CSS border-radius numarası değildir. Dışa aktarma sırasında uygulanan bir canvas komposit işlemidir (destination-in). Kullanıcı, tutamaç konumlarından canlı hesaplanan dairesel seçim bölgesiyle birlikte tam resmi görür. Kaydet tıklandığında, seçilen boyutlarda geçici bir canvas oluşturulur, resim üzerine çizilir ve komposit maske dairenin dışındaki her şeyi kaldırır. PNG, WebP ve AVIF için sonuç bir alfa kanalı içerir. JPEG'te şeffaf pikseller, JPEG'in spesifikasyonunda alfa kanalı bulunmadığı için kodlamadan önce düz bir renkle doldurulur. Cropper.js v2, MIT lisansı altında github.com/fengyuanchen/cropperjs adresinde yayınlanır.
PNG, WebP, AVIF ve JPEG karşılaştırması, dairesel kırpmada hangisini seçmeli
PNG kayıpsız bir formattır, evrensel destek sunar ve daha büyük dosyalar üretir. 8 MP bir fotoğraftan 512 ile 512 daire dışa aktarması, fotoğraf karmaşıklığına göre 180 ile 350 KB arasında değişir. WebP q85 ile q90 kalitede görsel olarak kayıpsızdır, PNG'den yüzde 25 ile 40 daha küçüktür ve 2023'ten beri tüm modern tarayıcılarda desteklenir. AVIF, AV1 intra kodlaması kullanır, eşdeğer görsel kalitede WebP'den genellikle yüzde 40 ile 50 daha küçüktür, ancak @jsquash/avif WASM kodlayıcısı masaüstünde 3 saniye, mobil orta seviye cihazda 8 MP giriş için 30 saniyeye kadar sürebilir. JPEG en hızlı kodlamadır (masaüstünde yaklaşık 400 ms), ancak alfa kanalı yoktur. Çoğu kullanıcı güvenilirlik için PNG'yi veya boyut için WebP'yi tercih etmelidir.
Platform boyutlandırma rehberi, site başına dairesel avatar ne anlama gelir
LinkedIn profil fotoğrafı en az 400 ile 400 piksel görüntüler, profil sayfasında daire şeklinde gösterilir ve akışta yaklaşık 48 piksel olarak küçültülür. Discord sunucu ikonları 512 ile 512 piksele kadar yüklenir ve daire olarak gösterilir, kullanıcı avatarı sunucu üye listelerinde 128 ile 128, sohbette 32 ile 32 piksel olarak görünür. Instagram mobil profil sayfasında yaklaşık 110 piksel dairesel profil fotoğrafı kullanır, akış küçük resimleri 32 piksel boyutundadır. Slack çalışma alanı avatarı 512 ile 512 piksele kadar yüklenir, kanal listesinde yaklaşık 36 piksel dairesel olarak görünür. Araç orijinal fotoğraf çözünürlüğünde dışa aktarır, kesin çıktı boyutu istiyorsan dairesel kırpmadan önce /resize/ aracını kullanarak resmi hedef boyuta yeniden boyutlandır. Bu, büyütme artefaktı olmadan piksel doğruluğu sağlar.
HEIC ve Safari-only sınırlaması neden var
HEIC, Apple'ın HEVC sıkıştırmasını kullanan konteyner formatıdır. Safari 17 ve sonrası, HEIC dosyalarını createImageBitmap aracılığıyla yerel olarak işler, bu nedenle iPhone fotoğrafını Safari'de daire şeklinde kırpma hiçbir dönüştürme gerektirmeden çalışır. Chrome, Firefox ve Edge, HEIC için createImageBitmap API'sini 2026 itibarıyla hâlâ uygulamıyor, bu nedenle bir decode hatası döndürürler. Araç yüklemede sihirli baytları tespit eder, Safari dışı bir tarayıcıda HEIC algılanırsa, dosyayı JPG'ye dönüştürmeyi öneren dostu bir hata mesajı görünür. Geçici çözüm olarak iPhone'da Fotoğraflar uygulamasında fotoğrafı aç ve JPG olarak paylaş, paylaşım sayfasında bu seçenek hazır gelir. Not olarak, .heic uzantısı .jpg olarak yeniden adlandırılan dosyalar yine reddedilir, çünkü sihirli bayt tespiti yeniden adlandırmaları yakalar.
Dairenin dışı neden şeffaftır ve bu neden önemlidir
PNG veya WebP daire kırpma dışa aktardığında, daire sınırının dışındaki pikseller alfa değeri 0'a sahiptir, yani tamamen şeffaftır. Bunun pratik sonucu şudur, platformun kendi arka plan rengi temiz şekilde görünür ve dosyayı tam boyuta gösteren ortamlarda (dosya eki önizlemesi, fotoğraf albümü) şeffaf alan dama tahtası deseni olarak görünür. Figma veya Canva gibi bir tasarım aracına yapıştırırsan, beyaz hale artefaktı olmadan herhangi bir rengin üzerine katmanlandırabilirsin. JPEG seçeneği, şeffaflığın sorun yarattığı durumlar için vardır, bazı eski e-posta istemcileri, bazı CMS görsel yükleyicileri ve bazı eski platformlar şeffaflığı kaldırıp siyahla değiştirir, seçtiğin dolgu rengiyle JPEG kullanmak bundan kaçınır.
DevTools Ağ sekmesiyle tarayıcı içi işlemeyi doğrulama
Meraklı bir kullanıcı, görselin cihazından çıkmadığını adım adım doğrulayabilir. Tarayıcı DevTools'unu aç (F12 veya sağ tık, ardından İncele), Ağ sekmesine git, önceki girişleri temizlemek için Temizle düğmesine tıkla, ardından daire kırpma aracına bir görsel yükle ve tutamaçları sürükle. Yükleme ve kırpma sürükleme sırasında Ağ sekmesini izle. Görünen tek istekler, yüklemeden önce yüklenen sayfa varlıklarıdır (JS, CSS, yazı tipleri), görsel veri taşıyan hiçbir yeni POST veya PUT isteği görünmez. Kaydet düğmesine tıkladıktan sonra Ağ sekmesinde bir blob: URL'sine kısa süreli bir istek görünür, bu tarayıcının yerel blob'u çözmesidir, bir sunucuya veri göndermez. Bu doğrulama Chrome, Firefox, Safari ve Edge'de yapılabilir.
