Bunu resmedin: 2019’da web için en iyi resim formatı

JPEG, WEBP, HEIC, AVIF? Bu rehber seçmenize yardımcı olacaktır.

JPEG’lerin rakipsiz hakimiyetinden on yıl sonra, son yıllarda bu pozisyona meydan okuyan yeni formatların (WebP ve HEIC) ortaya çıkmasına şahit olduk. Web tarayıcıları ve mobil işletim sistemleri arasındaki büyük oyuncular tarafından yalnızca kısmi fakat önemli desteği var. Başka bir yeni görüntü formatının (AVIF), tüm ağda gezinme vaadi ile 2019'da sahneye girmesi bekleniyor.

Bu makalede, klasik formatların kısa bir revizyonuyla başlayacağız, ardından WebP ve HEIC / HEIF ile ilgili açıklamalar yapılacak. Daha sonra AVIF'i keşfetmeye devam edeceğiz ve tüm ana noktaları bir araya getirerek bir özetle sona ereceğiz.

Avantajlar ve dezavantajlar üzerine yorumlar, hem e-ticaret iş akışlarında görüntü optimizasyon boru hatları için araçların geliştirilmesi ve dağıtılması sırasında mevcut yetkili raporların gözden geçirilmesi hem de ilk elden gözlemlerin oluşturulması üzerine kuruludur.

Evrensel destekli web için klasik görüntü formatları

Web görüntüleri için en önemli üç klasik formatı kronolojik sıraya göre kendimize hatırlatalım.

GIF

GIF, LZW kayıpsız sıkıştırmayı ve basit animasyonlar oluşturmamızı sağlayan çoklu kareleri destekler.

Bu biçimin ana sınırlaması 256 renkle sınırlı olmasıdır. Bu, 80'lerin sonlarında yaratıldığında, mevcut ekranlara aynı sınırlama uygulandığı için makul idi. Bununla birlikte, ekran teknolojisinin gelişmesiyle, fotografik görüntülerde bulunanlar gibi herhangi bir düz renk gradyanının çoğaltılmasının uygun olmadığı anlaşılmıştır. Ürettiği renk bandını kolayca tespit edebiliriz.

Ancak, GIF evrensel desteğe sahip hafif bir animasyona izin verir. Bu özellik, kalite sorunlarına duyarlı olmayan, en tipik olanı az animasyonlu veya az renkli küçük resimler olan kullanımlarda formatı bugüne kadar canlı tuttu.

JPEG

Web için resim formatlarının kralı, dijital fotoğrafçılık iş akışlarını desteklemek için geliştirildi.

Her zamanki 24 bit derinliğe sahip, insan gözünün ayırt edebileceğinden çok daha fazla renk çözünürlüğü (aralık veya gam ile karıştırılmaması) sağlar. İnsan görüşünün bilinen mekanizmalarından yararlanarak kayıplı sıkıştırmayı destekler.

Gözlerimiz orta ölçeklere hassas detaylardan daha hassastır. Sonuç olarak, JPEG, ince detayları (yüksek uzaysal frekanslar) kalite faktörü tarafından kontrol edilen bir miktarda atmamızı sağlar. Daha az kalite, daha az detayın korunduğu anlamına gelir. Ayrıca, yüksek parlaklık kontrastlı detaylara sadece kromatik kontrastlı detaylardan çok daha duyarlıyız.

Dolayısıyla, JPEG, RGB (Kırmızı, Yeşil ve Mavi) görüntülerini tek parlaklıkta ve iki kroma kanalında dahili olarak yeniden kodlar. Bu, yalnızca chroma kanallarında daha fazla ayrıntıyı silmek için chroma alt örneklemesini kullanmamızı sağlar. JPEG'in görüntüleri 8x8 piksel bloklar halinde kodladığına dikkat etmek önemlidir.

Kalite faktörünü düşürdüğümüzde ve / veya daha agresif kromato alt örneklemesi uyguladıkça, zil, hal, bloke etme veya bulanıklaşma artefaktlarını artırmaya başladık. JPEG ile ilgili bir sorun, görüntü içeriğine bağlı olarak, artefaktların farklı kalite faktörü değerlerinde görünebilir olmasıdır. En çılgın fark, doğal fotoğrafçılığın etkilerini sanat eseri üzerindeki etkilerle karşılaştırırken ortaya çıkar. Sanat eserleri (şekiller, yazı tipleri) genellikle keskin kenarlara dayandığından, atılan az miktarda ayrıntı için bile eserler üretmeye başlarlar.

Fotoğraflar için JPEG, kayıpsız sıkıştırma ile karşılaştırıldığında, fark edilebilecek eserler ile 10 kat faktörü azalmasını kolayca sağlar.

PNG

Bu kayıpsız grafik formatı GIF'in yerini almak üzere geliştirilmiştir, renk bantlama (ve lisanslama) sorunlarını giderir. JPEG'in en az sıkıştırma oranlarında bile büyük eserler ürettiği önemli miktarda resmi olan görüntüler için ihtiyaç vardı.

Şeffaflığı ve GIF ile karşılaştırıldığında gelişmiş bir sıkıştırmayı destekler. Bilgileri atmadığından, PNG yapay eserler üretmez. Tabii ki, bu, kayıplı sıkıştırma ile karşılaştırıldığında, birçok farklı renk gradyanının varlığında daha ağır görüntü ağırlığının pahasınadır.

Resmin sık görülen bir karakteristiğinden yararlanmayı başarır: Fotoğrafçılıktan farklı olarak - ince çeşitlilikteki renklerin devamlılığını sağlayan - sanat resimlerinde genellikle az sayıda iyi tanımlanmış renk bulunur.

Bu yüzden PNG, görüntüleri büyük miktarlarda pikselleri basit bir ayrık palete eşleştirerek ve sonuçta çok fazla bit kaydederek sıkıştırır. GIF ile karşılaştırıldığında, genellikle daha az bayt ile çok daha yüksek kalite sunar.

Kısmi destekli yeni gelenler: HEVC'ye dayalı WEBP ve HEIC

Video kodekleri tarafından akışları sıkıştırmak için kullanılan mekanizmalar iki ana tipte sınıflandırılabilir: çerçeveler arası ve çerçeveler arası. İlki, zaman içinde artıklıklardan yararlanırken, çerçeve içi mekanizmalar, geri kalanına herhangi bir bağımlılık olmadan, belirli bir çerçeve içindeki fazlalığı azaltmaya odaklanır. Bu sıkıştırma mekanizması hareketsiz görüntülere uygulanabilir.

Video paylaşımının patlaması - kalbindeki mobil ağlarla - ve ekran çözünürlüğünün sabit şekilde artması, sıkıştırmada mümkün olan en yüksek verimi elde etmek için yeni kodlama standartlarına yönelik çabaları artırdı.

Dolayısıyla, yeni görüntü formatları, yeni video kodlama standartlarının türevleri olarak ortaya çıkmaktadır. Bu yeni görüntü formatları, JPEG'den daha büyük özellik setleri sunar ve gelişmiş görsel kalitede dosya ağırlığında ilgili tasarruf vaat eder.

WEBP

Google, tüm tipik kullanım durumlarıyla başa çıkmak için web yetenekli bir görüntü formatı sağlamak amacıyla bu formatı geliştirmiştir.

Daha da önemlisi, görsel kaliteden ödün vermeden JPEG'den daha hafif görüntüler elde etmeyi amaçlamaktadır. Daha karmaşık işlemler - blok tahmini gibi - kullanır ve VP8 video kodeğinin bir türevidir. Kayıpsız sıkıştırmayı destekler ve JPEG'den farklı olarak, kodsuz görüntüleri hem kayıpsız hem de kayıpsız sıkıştırmayla birleştiren saydamlık ve animasyonlara izin verir.

Prensip olarak JPEG, PNG ve GIF'in yerine geçmelidir. Önemli bir dezavantaj, evrensel desteğin olmaması olmuştur. Yakın zamana kadar, WebP, Chrome tarayıcı ve Android uygulamalarında olduğu gibi Google destekli yazılımlarla sınırlandırılmıştı.

Ancak, Edge ve Firefox’un (iOS Firefox hariç) 2019’da WebP desteğini tanıtacağı duyurusu ile açıkça çekişme kazanıyor. Ayrıca Apple - Safari ve iOS’un WebP’yi desteklemediğini de belirtmekte fayda var.

HEIC / HEIF

Bu format, iki farklı açıdan kayda değer bir evrim getiriyor.

İlk olarak, dosya kabı mevcut resim formatları arasında ayarlanmış en büyük özelliği destekler. Örneğin, çoklu kare sıkıştırmalı çoklu çerçeve görüntülerini destekler; verimli HDR, çoklu odaklama veya çoklu görüntü görüntüleri için temel bir özelliktir.

İkincisi, dikkate değer bir esnekliğe sahip birçok resim dışı veri tipini destekler. Şu anda, bu kabı kullanan görüntülerin çoğu, en yeni nesil ekranların özellikli 4k ve 8k çözünürlükleriyle verimli bir şekilde başa çıkmak için geliştirilen H265 / HEVC video kodeğinden gelen görüntüler için türev ile sıkıştırılmıştır. HEVC kodlaması, JPEG'den daha az kısıtlama içeren daha karmaşık işlemleri içerir. Biraz daha yüksek kodlama süreleri pahasına, çok daha yüksek bir sıkıştırma verimliliği sağlar - web iş akışlarında hiç sorun değil.

H265 gibi, HEVC'ye dayalı HEIC de Apple tarafından desteklenmektedir. İOS ve macOS'ta yerel desteğe sahiptir ve Safari tarayıcıları tarafından desteklenir, ancak - çoğunlukla patent ve lisans sorunları nedeniyle - diğerleri tarafından desteklenmez (Android, Chrome, Firefox, Windows veya Edge).

Bu yüzden büyük bir soru ortaya çıkıyor: PNB sürümleri ile geri dönüş olarak WEBP / HEIC alternatifleri ve JPEG sunmalı mıyız?

Her bir olaya bakalım ...

WEBP türevlerine hizmet etmeli miyim?

Google, bu formatın JPEG kalitesinden daha hafif görüntüler ürettiğini iddia ediyor. Bununla birlikte, bağımsız testler, bu sonucun farklı kalite ölçütleri arasında tutarlı olmadığını ve ağırlık azalmasının, çoğu durumda, bulanıklık bulanıklığının artmasıyla dengelendiğini göstermiştir.

E-ticaret görüntüleri ile yaptığımız kendi testlerimizde, WebP için dosya tasarrufu gördük, ancak daha fazla bulanıklık ve daha az ayrıntı. Bununla birlikte, bulanıklığı değil görsel olarak rahatsız edici olduğunu düşündüğümüz eserleri çalma ve engelleme riskini daha az gördük.

WebP, Apple tarayıcıları ve işletim sistemleri tarafından desteklenmediğinden, genellikle JPEG ile rekabet eden WebP türevlerini önermiyoruz. Bu tür hareketler, medya yönetimi karmaşıklığını sınırlı faydalarla artıracaktır.

Apple WebP'yi desteklemeye başlarsa bu durum değişecektir.

Durum buysa, genişletilmiş WebP özellik seti ve üretilen daha hafif görüntüler, görüntü yönetimi iş akışlarını etkin bir şekilde basitleştirerek kullanımına değer olabilir.

WebP'i kendiniz denemek için, ImageMagick gibi klasik bir araç iyi bir seçenektir. Hem WebP hem de JPEG için farklı kalite ve çözünürlük ayarlarıyla karşılaştırmalı görüntü sürümlerini kolaylaştırır. Sonuçlar Chrome ile görüntülenebilir.

# WEBP kalitesine dönüştürmek 60
input.jpg -quality 60 output_60.webp dönüştürmek
# JPEG kalitesine dönüştürün 60
input.jpg - kalite 60 dönüştürmek output_60.jpg
# WEBP kalitesine dönüştürün 60 ve genişlik 450px
input.jpg dönüştürmek - resize 450 - kaliteli 60 output_450_60.webp

Sıkıştırma algoritmaları farklı şekilde çalıştığından, her durumda farklı kalite ve çözünürlük kombinasyonlarının farklı etkileri olacaktır. Bu nedenle, belirli bir kullanım durumu için olası tasarrufları ve en iyi ayarları anlamak için ilgili dosya boyutlarınızı birkaç resim üzerinde kontrol edin.

HEIC türevlerine hizmet etmeli miyim?

HEIC'in (JPEG üzerinden) avantajı açıktır. Ağırlık azalması sürekli olarak önemlidir - yaklaşık% 50 - görsel kalite kaybı olmadan. Desteklenen özellik sadece şaşırtıcı.

Sorun yine tarayıcı ve işletim sistemi desteği.

HEVC'nin patent sorunları ve ilgili ağır telif hakları göz önüne alındığında, desteğin Apple dünyasındakilerle sınırlı kalmasını bekleyebiliriz. JPEG, görüntüleri sıkıştırmakta zaten etkili olduğundan, küçük bir şeyin% 50'si, görüntü işleme iş akışımıza karmaşıklık eklemek için yeterli olmayabilir.

Büyük görüntülerin kullanıldığı, görsel kaliteye büyük ilgi duyan ve kullanıcı tabanındaki büyük oranda Apple cihazının bulunduğu bazı durumlarda bu formatı sunmayı düşünmelisiniz.

HEIC ile test yapmak Mac ile çok kolaydır. Önizleme, bir görüntüyü farklı kalite değerleri ve farklı çözünürlüklerle HEIC ve JPEG'e dışa aktarmamızı sağlar. Aralarındaki açık ve sistematik farkı görmek için birçok test yapmanıza gerek yoktur.

Önizlemede HEIC'e Aktar

Bir web görüntüsü işleme iş akışına entegre edilebilecek daha esnek bir şey denemek istiyorsanız, GPAC bir göz atmaya değer.

Peki ya AVIF?

AVIF yarışmacılarımızın sonuncusu.

HEVC'ye dayalı WebP ve HEIC gibi, AVIF de video standartlarındaki en son çabaların bir türevidir. Aynı zamanda HEIC / HEIF konteynerlerini kullanır ve bu nedenle mevcut tüm ana formatları kapsayan eksiksiz bir özellik setini destekler. AV1 çerçeve içi kodlama mekanizmalarının kullanımından miras kalan sıkıştırma işlemlerinde çok daha yüksek verimlilik sağlar. Bu avantajlar bu formatı çekici kılmaktadır.

Bir diğer önemli avantaj, tamamen açık bir yaklaşım olarak geliştirilmesinin arkasındaki büyük konsorsiyum olan Açık Medya İttifakından, telif ücretinden arındırılmış, lisanssızdır. Google, Netflix, Adobe, Mozilla, Microsoft, Facebook ve Amazon gibi büyük oyuncular - web grafikleri ve video sahnesindeki başlıca aktörler - bu yeni formatı destekliyor ve hem yazılım hem de donanımda hızlı ve geniş bir benimseme için bir durum yaratıyor. Akış formatı Mart 2018'de bir referans kodu ile dondurulmuşken, AV1 için donanım desteğine sahip ilk cihazların 2019'un sonunda beklenmesi bekleniyor.

Bu makalenin yazıldığı sırada, mevcut AV1'in açık kaynaklı uygulaması hala deneysel olarak kabul edilebilir ve üretime uygun olmayabilir.

özet

JPEG, 2019’da web için genel görüntüler için kral formatı kalacak ve PNG önemli resimlere sahip görüntüler için varsayılan seçenek olarak kalacaktır.

Sebep? Evrensel destek

Görüntüyü açan herhangi bir şey, önceki yıllarda ve on yıllardaki gibi 2019'da JPEG veya PNG'yi açacaktır! Bu nedenle, bu evrensel formatların bir süre daha geçerli olacağından şüphe yok.

WebP'in faydaları tartışmalıdır. WebP’in açık bir avantajı, PNG’nin yerini alması ve görüntü işleme iş akışlarını potansiyel olarak basitleştirmesidir. Bununla birlikte, evrensel destek olmadan bu avantaj ortadan kalkar. Bu, yalnızca Apple fikrini değiştirirse ve WebP nihayet evrensel olarak benimsendiğinde değişirse, o zaman tüm JPEG, PNG ve GIF görüntülerinin yerine kullanılabilir.
 
Buna karşılık, HEVC'ye dayalı HEIC görüntüleri, özellikle büyük çözünürlüklerde net avantajlar sunar. İOS ve macOS kullanıcılarının trafiği, büyük ağır görüntüleri olan bir web sitesiyle alakalıysa, özellikle yavaş mobil bağlantılar için potansiyel UX iyileştirmeleriyle, HEIC alternatifleri sunmayı düşünmek faydalı olabilir. Hızlanmanın yanı sıra, HEIC kaliteyi garanti eder, neredeyse agresif JPEG politikalarını rahatsız eden rahatsız edici engelleme ve çalma eserlerinden arınmış.

AVIF'nin 2019 için beklenmesine rağmen, destek ve evlat edinme zaman alacak. Fakat kesin olarak, yakın gelecekte radarınızın altında tutulması gereken bir görüntü formatıdır.

Tabii ki, görüntü optimizasyonu için bir bulut hizmetinin kullanılması işin yapılması için her zaman kolay ve anlaşılır bir alternatif olarak kalacaktır.