La botiga transfereix menys bytes després d’optimitzar, però les fotografies han perdut nitidesa. Augmentar la qualitat global no sempre ho arregla: el navegador pot ampliar una miniatura, triar un candidat responsive petit o partir d’un original ja degradat. Fer créixer tots els fitxers només encariria la càrrega.
Cal localitzar on s’ha perdut el detall.
Identificar la vista exacta
Prova per separat targeta de categoria, productes relacionats, imatge principal, miniatura de galeria, zoom o lightbox, variació, mòbil i pantalla d’alta densitat. Desa URL, viewport i captura.
«Les imatges són borroses» sol descriure un context concret. Una miniatura correcta no demostra que el zoom tingui prou resolució.
Comparar dimensions visuals i intrínseques
Selecciona la imatge a les eines de Chromium i executa:
const image = $0;
console.log({
selected: image.currentSrc,
natural: [image.naturalWidth, image.naturalHeight],
rendered: [
image.getBoundingClientRect().width,
image.getBoundingClientRect().height
],
devicePixelRatio: window.devicePixelRatio
});$0 representa l’element seleccionat. Si una font de 300 píxels es mostra a 700 CSS, el problema principal és l’escalat, no la compressió.
Revisar mides de WooCommerce i tema
Comprova amplada de miniatura del catàleg, imatge de producte, retall, suport declarat pel tema i mida triada al constructor. Una actualització del tema pot canviar les dimensions esperades mentre els adjunts antics conserven variants prèvies. Per això les pujades noves es poden veure bé i les antigues no.
Defineix primer les necessitats del disseny. Canviar mides i regenerar repetidament per assaig consumeix recursos i dificulta tornar enrere.
Verificar srcset, sizes i zoom
Consulta currentSrc, srcset i sizes a la galeria. Si ocupa 600 píxels CSS en una pantalla 2×, una font propera a 1200 pot ser raonable. Un sizes incorrecte pot triar-ne una de menor i ampliar-la.
Prova escriptori normal, telèfon d’alta densitat i diverses amplades. No forcis l’original més gran en tots els dispositius.
El zoom necessita més resolució que la galeria visible. Confirma dimensions de galeria, objectiu del zoom, original, font seleccionada i necessitat comercial. Conserva una variant detallada per ampliar sense obligar el llistat a baixar-la.
Comprovar la qualitat de l’original
Cap codificador recupera detall inexistent. Si el proveïdor lliura 500 píxels, generar-ne 1200 només interpola. Busca el millor original aprovat.
No apliquis enfocament i ampliació indiscriminats: les vores artificials poden representar malament materials i colors. Si no existeix una font més gran, adapta el disseny o desactiva el zoom.
Ajustar compressió segons el producte
Joieria, teixits, cabells, lletres petites i degradats mostren artefactes abans que formes simples. Prepara una mostra amb detall fi, fons clars i foscos, transparència, etiquetes i textures naturals.
Tria la qualitat basant-te en l’exemple comercial més exigent. Compara el WebP lliurat amb el JPEG a mida de galeria i zoom, buscant taques, halos, bandes, canvis de color i pèrdua de text. Les escales de qualitat de JPEG i WebP no equivalen.
Mantén perfils de color coherents. Estalviar bytes a costa d’un color de producte incorrecte pot augmentar devolucions.
Revisar retalls i màsters danyats
El retall quadrat pot ampliar una porció estreta d’una fotografia vertical. Comprova dimensions generades, posició del subjecte i coherència del catàleg. Si conviuen proporcions diferents, un retall dur universal pot no ser apropiat.
Prova un producte abans d’aplicar el canvi en massa.
Si l’optimització ha sobreescrit l’original, regenerar crea derivats nous des d’un màster danyat. Recupera una font verificada de la còpia, arxiu fotogràfic, proveïdor o desplegament anterior i valida la restauració en staging.
Preservar associacions i memòria cau
Substituir adjunts pot alterar ordre de galeria, variacions, metadades, URL SEO, feeds i CDN. Utilitza un mètode que preservi relacions o creï redireccions deliberades; no eliminis i tornis a pujar tota la biblioteca sense mapa.
Després, identifica l’URL borrosa i purga només l’actiu i les pàgines relacionades. El navegador, la memòria cau de pàgina i la CDN poden mantenir la variant antiga. Evita purgats complets repetits sense saber quina capa està obsoleta.
Validar l’experiència de compra
Comprova claredat i velocitat a categoria, galeria, zoom, canvi de variació, gest mòbil, afegir a la cistella, estabilitat de disseny i bytes transferits.
L’acceptació ha de demostrar font correcta per viewport, absència d’ampliació no intencionada, detall i color aprovats, pes raonable i associacions intactes. No hi ha un límit universal per a tots els productes.
Per a una avaluació aporta URL, captura, currentSrc, dimensions, original autoritzat i canvi que va provocar el problema. No calen credencials al principi.