AVIF (AV1 Görüntü Dosyası Formatı) JPG, JPEG, PNG ve WebP gibi diğer formatlarla karşılaştırıldığında çok daha önemli bir dosya küçültme sunan görüntülerin depolanmasına yönelik modern bir görüntü dosyası formatı özelliğidir. AVIF spesifikasyonunun 1.0.0 sürümü Şubat 2019'da tamamlandı ve Alliance for Open Media tarafından kamuoyuna yayınlandı.
Bu makalede AVIF görüntüleri oluşturmaya yönelik bazı tarayıcı tabanlı araçlar ve komut satırı araçları hakkında bilgi edineceksiniz.
AVIF'yi neden JPG, PNGS, WebP ve GIF üzerinden kullanmalısınız?
- Kayıpsız sıkıştırma ve kayıplı sıkıştırma
- JPEG'de korkunç şeritlenme sorunu yaşanıyor
- WebP çok daha iyi, ancak AVIF ile karşılaştırıldığında hala gözle görülür bir blokaj var
- Çoklu renk alanı
- 8, 10, 12 bit renk derinliği
Uyarılar
Jake Archibald şunu yazdı: göre Birkaç yıl önce bu yeni görüntü formatını kullanmıştık ve görüntüleri sıkıştırmanın bazı dezavantajlarını belirlememize de yardımcı oldu; normalde AVIF'e sıkıştırırken bu ikisine dikkat etmelisiniz:
- Bir kullanıcı görsele sayfa bağlamında bakarsa ve sıkıştırma nedeniyle görsel onlara çirkin görünüyorsa, bu düzeyde bir sıkıştırma kabul edilemez. Ancak bu sınırın üzerindeki küçük bir çentik sorun değil.
- Görüntünün orijinaline kıyasla fark edilebilir ayrıntıları kaybetmesi normaldir bu ayrıntı görüntünün bağlamı açısından önemli olmadığı sürece.
Ayrıca bakınız: Smashing Magazine'den Addy Osmani, AVIF ve WebP'nin kullanımı hakkında derinlemesine bilgi veriyor.
Tarayıcı Çözümleri
Squoosh
Squoosh çeşitli formatlardaki görüntüleri AVIF dahil yaygın olarak kullanılan diğer sıkıştırılmış formatlara dönüştürmenize olanak tanıyan popüler bir görüntü sıkıştırma web uygulamasıdır.
Özellikler
- Dosya boyutu sınırı: 4MB
- Görüntü optimizasyon ayarları (sağ tarafta bulunur)
- İndirme kontrolleri – buna, ortaya çıkan dosyanın boyutunun ve orijinal görsele göre azalma yüzdesinin görülmesi de dahildir
- Serbest kullanmak
AVIF.io
AVIF. Io herhangi bir kod biçimi gerektirmeyen bir resim aracıdır. Tek yapmanız gereken, seçtiğiniz görselleri PNG, JPG, GIF vb. formatlarda yüklemektir; bu, bunların sıkıştırılmış versiyonlarını döndürür.
Özellikler
- Dönüşüm ayarları (yükleme banner'ının sağ üst köşesinde bulunur)
- Serbest kullanmak
Sorularınızın cevaplarını adresinde bulabilirsiniz. AVIF.io SSS sayfası.
Komut Satırı Çözümleri
avif-cli
avif-cli
by Lovell bir klasörde saklanan görüntülerinizi (PNG, JPEG vb.) almanızı ve bunları belirlediğiniz küçültme boyutunda AVIF görüntülerine dönüştürmenizi sağlar.
İşte gereksinimler ve yapmanız gerekenler:
- Node.js 12.13.0+
Paketi kurun:
npm install avif
Komutu terminalinizde çalıştırın:
npx avif --input="./imgs/*" --output="./output/" --verbose
./imgs/*
– tüm resim dosyalarınızın konumunu temsil eder./output/
– çıktı klasörünüzün konumunu temsil eder
Özellikler
- Serbest kullanmak
- Dönüşüm hızı ayarlanabilir
Daha fazla komut hakkında bilgi edinmek için avif-cli GitHub sayfası.
keskin
keskin yaygın formatlardaki büyük görüntüleri daha küçük, web dostu AVIF görüntülerine dönüştürmek için başka bir kullanışlı araçtır.
İşte gereksinimler ve yapmanız gerekenler:
- Node.js 12.13.0+
Paketi kurun:
npm install sharp
Adlı bir JavaScript dosyası oluşturun sharp-example.js
ve bu kodu kopyalayın:
const sharp = require('sharp')
const convertToAVIF = () => {
sharp('path_to_image')
.toFormat('avif', {palette: true})
.toFile(__dirname + 'path_to_output_image')
}
convertToAVIF()
Nerede path_to_image
adı ve uzantısıyla görüntünüzün yolunu temsil eder, yani:
./imgs/example.jpg
Ve path_to_output_image
görüntünüzün saklanmasını istediğiniz yolu adı ile birlikte temsil eder ve yeni uzatma, yani:
/sharp-compressed/compressed-example.avif
Komutu terminalinizde çalıştırın:
node sharp-example.js
Ve orada! Çıkış konumunuzda sıkıştırılmış bir AVIF dosyanız olmalıdır!
Özellikler
- Serbest kullanmak
- Görüntüler döndürülebilir, bulanıklaştırılabilir, yeniden boyutlandırılabilir, kırpılabilir, ölçeklendirilebilir ve daha fazlası
sharp
Ayrıca bakınız: Stanley Ulili'nin şu konudaki makalesi: Node.js'de Sharp ile Görüntüler Nasıl İşlenir.
Sonuç
AVIF, front-end geliştiricilerin projeleri için dikkate alması gereken bir teknolojidir. Bu araçlar mevcut JPEG ve PNG görsellerinizi AVIF formatına dönüştürmenize olanak tanır. Ancak iş akışınıza yeni bir araç katarken olduğu gibi, avantajların ve dezavantajların özel kullanım durumunuza göre uygun şekilde değerlendirilmesi gerekecektir.
Umarım benim yazarken keyif aldığım kadar siz de bu yazıyı okurken keyif alırsınız. Zaman ayırdığınız için çok teşekkür ederim ve umarım harika bir gün geçirirsiniz!