Notes de l'equip sobre artesania, formats i les petites decisions darrere d'un bon resultat.
Per què l'AVIF supera el PNG de manera tan decisiva en mida de fitxer
L'AVIF es basa en el format modern de compressió visual, dissenyat per a l'eficiència perceptiva més que per a la fidelitat sense pèrdua. El PNG es recolza en DEFLATE sobre dades de píxels en brut, cosa que és sense pèrdua però deixa intacta una enorme redundància en el contingut fotogràfic. L'AVIF substitueix aquesta redundància per la predicció de blocs presa del vídeo, descartant informació que el sistema visual humà no nota. El resultat és espectacular. Una foto de 116 kilobytes es converteix en uns 16 kilobytes com a AVIF a qualitat 85, i un PNG transparent normalment s'encongeix entre un 30 i un 50 per cent respecte a un WebP equivalent. La diferència s'eixampla amb fotografies d'alta resolució i s'estreny amb gràfics senzills. Per a qualsevol lloc que serveixi imatges transparents a un públic modern, l'estalvi d'amplada de banda es tradueix directament en càrregues més ràpides i un cost de sortida més baix.
La història del canal alfa en detall
Tant el PNG com l'AVIF emmagatzemen la transparència com un pla transparència separat al costat de les dades de color. Quan aquesta parella processa el teu PNG, el descodificador extreu els píxels de color i la màscara transparència de manera independent. Després l'etapa d'escriptura de l'AVIF escriu un fitxer nou amb la seva pròpia pista transparència, fent servir la codificació dins del fotograma del format modern per comprimir tots dos plans a qualitat 85. L'alfa no es fon dins del color i no se substitueix per un emplenament de fons. Ombres suaus, vores difuminades i degradats parcialment transparents es codifiquen tots fidelment. L'única degradació que afegeix l'AVIF és la compressió amb pèrdua sobre el mateix pla transparència, que pot crear una franja amb prou feines perceptible al voltant de vores molt dures amb un zoom extrem. A mides de visualització normals i qualitat 85, la diferència no és visible. Per a feina d'icones de precisió de píxel a mides minúscules, conserva el PNG.
Velocitat de conversió a la pràctica, navegador per navegador
El mòdul de preparació de l'AVIF es carrega un cop per sessió del navegador, uns 800 mil·lisegons per recuperar-lo més 300 per inicialitzar-lo, així que la primera conversió porta aproximadament un segon de preparació. Les conversions en calent se la salten del tot. Al Chrome d'escriptori, 0.12 megapíxels triga uns 40 mil·lisegons, 1 megapíxel al voltant de 250 mil·lisegons, i 8 megapíxels aproximadament 2.8 segons. El Firefox és l'excepció, executant el mateix procés unes quatre vegades més lent, de manera que una foto 4K pot trigar 30 segons o més allà. El WebKit al Safari se situa entre tots dos, més a prop del Chrome. En maquinari mòbil de gamma mitjana les xifres van de tres a cinc vegades pitjor que el Chrome d'escriptori. Si converteixes fitxers grans sovint, el Chrome en un ordinador d'escriptori o portàtil dona el millor rendiment.
Quan conservar el PNG en lloc de convertir-lo
El PNG continua sent l'opció encertada en diversos casos fins i tot quan la mida del fitxer importa. Primer, els gràfics amb text nítid a mides petites, com etiquetes, distintius o icones a escala de favicon, poden mostrar artefactes a l'AVIF que són inacceptables a distàncies de visualització típiques. Segon, els fitxers font de veritat que es fan servir per editar més endavant haurien de quedar-se en PNG, ja que cada passada per un format amb pèrdua acumula pèrdua de qualitat. Tercer, els entorns que rebutgen l'AVIF, inclosos alguns editors de documents, eines de disseny antigues i clients de correu, necessiten PNG per a la interoperabilitat. Finalment, l'animació més enllà del primer fotograma no es conserva, ja que aquesta parella tracta un sol fotograma. Per a tota la resta, fotografies transparents i actius gràfics que van cap a un lliurament web modern, PNG a AVIF és l'intercanvi encertat.
Core Web Vitals i l'argument de l'amplada de banda
El Largest Contentful Paint, la mètrica de càrrega principal, es veu afectat directament per la mida de la imatge més gran d'una pàgina. Reduir aquesta imatge de 116 kilobytes a 16 kilobytes, tal com es va mesurar en una foto 4K durant el desenvolupament, retalla el temps de transferència en una connexió de 10 Mbps d'uns 93 mil·lisegons a uns 13 només per a aquest element. Multiplica això per una graella de productes, un carrusel hero o una interfície plena d'icones transparents i l'estalvi acumulat empeny el LCP molt per sota del llindar de 2.5 segons que Google considera bo. L'adopció de l'AVIF es va accelerar precisament perquè l'argument es pot fer en xifres dures. Amb al voltant d'un 94.3 per cent de cobertura de navegadors, el cas de retrocés és prou petit perquè el guany d'amplada de banda compensi el marcatge picture addicional.
En què es diferencia d'un convertidor en línia habitual
La majoria de convertidors AVIF en línia pugen el teu PNG a màquines que no controles, el processen allà i el guarden segons la política de retenció que fixa aquell proveïdor, sovint vaga. RoundCut és directe sobre el seu flux. Com que l'AVIF és exigent, la conversió s'executa al nostre servidor per al millor resultat, amb un codificador al navegador com a alternativa automàtica quan el servidor no està disponible. Quan el teu fitxer se'ns envia, es converteix i després s'elimina en unes 2 hores, i eliminat sense cap ús més que la conversió. No hi ha emmagatzematge permanent ni compartició de la teva imatge. Per a qui treballa amb documents de clients, fotografia de producte pròpia o contingut d'usuaris, la versió honesta de l'intercanvi és aquesta: el fitxer pot passar pel nostre servidor, es tracta només per generar el teu AVIF i no s'hi queda.
