Notes de l'equip sobre artesania, formats i les petites decisions darrere d'un bon resultat.
Com el WebP aconsegueix mides més petites que el PNG
El WebP funciona amb dos modes de compressió diferents. El mode sense pèrdua combina la predicció espacial i de color amb una etapa de codificació d'entropia més sofisticada que el DEFLATE del PNG, aconseguint relacions de compressió al voltant d'un 26 per cent millors en imatges típiques segons la mesura publicada de Google. El mode amb pèrdua aplica una transformació basada en blocs semblant a la compressió de vídeo, dissenyada per descartar informació perceptivament irrellevant tot conservant el que l'ull veu realment. Per a imatges amb transparència, el WebP fa servir una subcompressió sense pèrdua a part per a les dades alfa mentre aplica compressió amb pèrdua a les dades RGB, motiu pel qual el WebP amb pèrdua amb transparència pot ser aproximadament tres vegades més petit que un PNG a igualtat de qualitat visual. El DEFLATE del PNG només és sense pèrdua i no pot aprofitar el compromís perceptiu que el mode amb pèrdua explota. La diferència de format explica el desnivell.
El transparència en detall
Tant el PNG com el WebP admeten transparència alfa de 8 bits, és a dir, cada píxel pot contenir un valor d'opacitat de 0 (totalment transparent) a 255 (totalment opac). Quan el motor d'imatge de la plataforma torna a escriure un PNG com a WebP, llegeix els valors RGBA de cada píxel i passa els valors alfa directament al pas de compressió del WebP, on es conserven amb compressió sense pèrdua independentment de com es codifiquin les dades RGB. El resultat és que cada píxel transparent del PNG amb alfa 0, cada píxel semitransparent entre 1 i 254 i cada píxel opac a 255 es correspon amb el mateix estat exacte al WebP. Per a un logotip amb ombres suaus o text amb vores suavitzades sobre un fons transparent, la suavitat de la vora sobreviu intacta. Això contrasta amb el JPG, que no té camp alfa a l'especificació del seu contenidor i ha de compondre la imatge sobre un color de fons abans de codificar.
Core Web Vitals i l'elecció del format d'imatge
El Largest Contentful Paint mesura quant triga a aparèixer a la finestra de visualització l'element visible més gran de la pàgina. Per a la majoria de pàgines de contingut, aquest element és la imatge principal, i Google fa servir el LCP com a senyal de posicionament a la seva avaluació de Core Web Vitals. Les imatges PNG són una font constant de fracassos de LCP per la seva mida, ja que un PNG fotogràfic a resolució 4K pot pesar diversos megabytes mentre que el WebP equivalent a qualitat gairebé sense pèrdua sol ser una fracció d'això. PageSpeed Insights ho marca específicament al seu element de servir imatges en formats de nova generació, indicant el PNG com el format objectiu a substituir. Convertir a WebP els PNG que apareixen en camins crítics de renderització és un dels canvis individuals més rendibles per millorar el rendiment mesurat de la pàgina. El calendari de suport ho fa segur, amb el WebP a Chrome des del 2011, Firefox des del 2019, Safari des del 2020 i Edge des de la seva reconstrucció sobre Chromium.
Sortida amb pèrdua i la configuració gairebé sense pèrdua
L'escriptura de WebP ofereix un paràmetre de qualitat de 0 a 100, on els valors més alts conserven més detall a canvi de fitxers més grans. Aquesta eina escriu amb una configuració fixa gairebé sense pèrdua, ajustada per equilibrar la fidelitat visual amb la mida del fitxer per a les categories habituals de recursos web de fotografies, gràfics d'interfície i icones. Amb aquesta configuració, la sortida és perceptivament indistingible del PNG original a distàncies normals de visualització a pantalla. Tècnicament, es perd una mica de precisió a escala de bit respecte a una codificació realment sense pèrdua, cosa que significa que una comparació a escala de byte entre els píxels descodificats del WebP i els píxels originals del PNG mostrarà petites diferències numèriques. Aquestes diferències estan per sota del llindar de la percepció humana per a contingut fotogràfic. Per a imatge mèdica, fotografia per satèl·lit o preservació digital d'arxiu, on la fidelitat sense pèrdua és un requisit estricte, l'enfocament correcte és conservar el PNG i fer servir el WebP només com a exportació de lliurament, no com a còpia de treball.
Comportament de les metadades
El procés emprat per a la conversió de PNG a WebP treu les metadades EXIF, IPTC i XMP de la sortida. Això coincideix amb el comportament observat als tres grans motors de navegador. Els perfils de color ICC es tracten de manera inconsistent, on Chrome i Safari conserven l'etiqueta del perfil sRGB ICC a la sortida WebP i Firefox treu totes les metadades, inclòs el perfil ICC. El resultat net és que el WebP convertit és segur com a sRGB als navegadors, però qualsevol etiquetatge de gamma ampla com Display-P3, Adobe RGB o ProPhoto RGB present al PNG d'origen no sobreviurà a Firefox. Per a fluxos professionals sensibles al color, aquesta inconsistència importa, així que si la sortida final necessita fidelitat del perfil de color, converteix amb una eina que escrigui dades ICC de manera explícita, o aplica l'etiqueta del perfil com a pas de postprocessament fent servir un editor de metadades d'imatge dedicat.
Quan conservar PNG i quan el WebP n'hi ha prou
L'arbre de decisió pràctic és curt. Si el destí final de la imatge és una pàgina o una aplicació web, i l'entorn de renderització és qualsevol navegador del 2020 endavant, el WebP és el format d'exportació encertat. Si la imatge ha d'obrir-se en una aplicació de disseny com Figma, Sketch o Affinity Designer, verifica el suport de WebP a la versió concreta que fas servir, ja que varia. Si la imatge es farà servir en un flux d'impressió, és preferible PNG o TIFF, ja que la majoria de RIP d'impressió no gestionen el WebP. Si la imatge s'enviarà per correu electrònic, el PNG és més segur, atès que els clients de correu són notòriament inconsistents amb els formats moderns. Si la imatge es farà servir com a fitxer de treball que s'edita i es torna a desar moltes vegades, conserva el PNG com a original. El WebP a qualitat gairebé sense pèrdua és un format de lliurament excel·lent, i el PNG continua sent el millor format per arxivar i editar. El flux ideal conserva el PNG com a original i exporta a WebP per al lliurament web.
