Zephyrnet Logosu

AVIF Görüntüleri Oluşturmak için Yararlı Araçlar

Tarih:

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:

  1. 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.
  2. 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.

caniuse.com'daki başlıca tarayıcılarda avif özelliğinin desteklenmesine ilişkin veriler

Tarayıcı Çözümleri

Squoosh

Squoosh'un ekran görüntüsü.
Squoosh'un ekran görüntüsü.

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'nun ekran görüntüsü.
AVIF.io'nun ekran görüntüsü.

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!

spot_img

En Son İstihbarat

spot_img