Com resoldre el lliurament d'imatges a PageSpeed Insights

1. 01Obre la pàgina afectada a PageSpeed Insights o Lighthouse. Tria l'informe mòbil o d'escriptori, desplega la millora del lliurament d'imatges i anota l'URL de la imatge marcada i el canvi proposat.
2. 02Troba la imatge a la pàgina. A les eines del desenvolupador, compara el fitxer descarregat amb les dimensions mostrades tenint en compte la densitat de pantalla. Comprova la font triada, no només l'original de la biblioteca.
3. 03Si la imatge servida té massa píxels, corregeix primer les mides adaptables o la configuració del tema. Si les dimensions són adequades, compara la compressió o un format alternatiu compatible.
4. 04Prepara una còpia amb les dimensions necessàries en un editor. Utilitza el compressor d'imatges Bitinz per als fitxers adequats i revisa text, vores, transparència i degradats abans de substituir res.
5. 05Publica el fitxer nou o el canvi de plantilla. Comprova que la pàgina demana la imatge nova i no una versió antiga de la memòria cau; repeteix l'informe amb el mateix dispositiu.

Chrome estima l’estalvi a partir de la mida descarregada i una relació eficient entre bytes i píxels del format. No marca imatges amb un estalvi previst inferior a 4 KiB. És un llindar d’informe, no una mida màxima recomanada.

Lighthouse 13 va substituir les auditories d'imatges antigues per aquesta anàlisi; Lighthouse 12 ja mostrava les anàlisis per defecte. Els avisos de format, dimensions sobrants i animació pesada poden requerir solucions diferents. Per al procés complet, segueix com comprimir imatges per a un web.

• WordPress: comprova la mida triada al bloc o tema i el marcatge real srcset i sizes. WordPress genera variants adaptables, però una plantilla pròpia o una descripció imprecisa de la disposició encara pot servir una mida inadequada. Canviar només l'original pot deixar les còpies generades antigues en ús.
• Shopify: les imatges de la botiga ja s'optimitzen amb la CDN de Shopify, inclosa la tria del format. Shopify diu que no cal comprimir manualment abans de pujar. Davant un avís, revisa l'amplada demanada pel tema i el marcatge adaptable en lloc de degradar repetidament la font. Un desenvolupador pot revisar image_url i image_tag.
• Next.js: utilitza les opcions adaptables del component Image i dona a sizes un valor coherent amb la disposició real, sobretot amb fill. Sense un valor adequat, una imatge estreta es pot tractar com si ocupés tota la finestra i descarregar una variant més gran. Canviar només la qualitat no resol aquest desajust.

Conserva un original editable. Per a imatges servides independentment, compara la mida i l'aspecte reals del fitxer preparat; la comparació de JPG, PNG i WebP ajuda a triar. Bitinz no redimensiona imatges. La conversió a WebP pot generar un fitxer més gran: conserva la versió que convé al web.

Per a publicacions recurrents, l'API per a desenvolupadors processa fitxers adequats amb compte i quota mensual. No repara el marcatge del tema ni la disposició adaptable. Torna a comprovar la pàgina servida després de connectar l'automatització.

• L'URL marcat correspon a la imatge i versió que has canviat.
• El navegador tria una font adequada per a diferents mides de pantalla.
• La compressió conserva detalls útils, transparència i degradats suaus.
• La imatge principal visible no es retarda per una càrrega diferida inadequada.
• El nou informe utilitza el mateix dispositiu; també s'han revisat l'aspecte i la càrrega reals.