Demaneu contrasenyes al formulari?

No. El formulari públic no demana mai accessos. Les dades segures es demanen només després d’aprovar l’abast i el pressupost.

Qui revisa la incidència?

La sol·licitud arriba a Jordi Ensenyat, fundador de Code Barcelona i especialista en WordPress amb més de 15 anys d’experiència.

Es canvia res abans del pressupost?

No. Primer es revisen els símptomes visibles i es defineix l’abast. La intervenció comença després de l’aprovació i amb una via de recuperació preparada.

Treballeu amb webs en anglès i fora d’Espanya?

Sí. WP Repair atén incidències de WordPress i WooCommerce en català, castellà i anglès mitjançant un servei remot.

WordPress serveix imatges a mida completa al mòbil: revisar srcset

Una pàgina mostra una imatge a 360 píxels en un telèfon, però baixa un fitxer de diversos milers. Reduir sempre l’original no és la solució: WordPress potser ja té variants correctes i sizes indica al navegador que triï malament. També pot ser un fons CSS o codi del constructor sense marcat adaptable.

Primer identifica quin fitxer selecciona el navegador i per què.

Inspeccionar `currentSrc`

Amb srcset, src pot ser només l’alternativa. Consulta la sol·licitud triada:

const image = document.querySelector("main img");
console.log({
  src: image?.src,
  currentSrc: image?.currentSrc,
  naturalWidth: image?.naturalWidth,
  renderedWidth: image?.getBoundingClientRect().width
});

Utilitza un selector verificat. Compara amplada intrínseca i visual considerant window.devicePixelRatio. Una font de 700 píxels per a una caixa CSS de 350 pot ser raonable en una pantalla 2×; una de 3000 resulta difícil de justificar.

Llegir l’HTML renderitzat

Una imatge adaptable pot tenir aquest aspecte:

<img
  src="/uploads/photo-1024.webp"
  srcset="/uploads/photo-480.webp 480w,
          /uploads/photo-768.webp 768w,
          /uploads/photo-1024.webp 1024w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="1024"
  height="683"
  alt="Prova de lliurament d’imatges WordPress"
>

Revisa Elements o el codi final després que actuïn els connectors. La vista de l’editor no és la font definitiva.

srcset ofereix candidats i sizes estima l’amplada de disseny. Si declara 100vw per a una imatge que ocupa un terç de l’escriptori, el navegador triarà una font excessiva. Escriu el valor a partir del CSS real:

sizes="(max-width: 767px) calc(100vw - 32px),
       (max-width: 1199px) 50vw,
       560px"

No copiïs l’exemple sense mesurar farciment, columnes i màxims.

Confirmar que existeixen les variants

WordPress registra mides mitjançant ajustos, tema i connectors. Una pujada antiga pot ser anterior a una mida nova. Segons la versió de WP-CLI:

wp media image-size

També es pot inspeccionar wp_get_registered_image_subsizes() en una prova controlada. No regeneris tota la biblioteca fins a saber quines mides falten: pot consumir emmagatzematge i CPU.

Revisar el constructor

Els constructors ofereixen Miniatura, Mitjà, Gran i Complet. Triar «Complet» pot inserir l’original o produir srcset incomplet. Comprova mida seleccionada, amplada personalitzada, fons o <img>, ajustos mòbils i càrrega diferida.

Canviar el giny a una mida registrada adequada pot resoldre el lliurament sense substituir fitxers.

Tractar per separat els fons CSS

Un fons no té srcset. Pots utilitzar consultes:

.service-hero {
  background-image: url("/uploads/hero-mobile.webp");
}

@media (min-width: 768px) {
  .service-hero {
    background-image: url("/uploads/hero-desktop.webp");
  }
}

image-set() ofereix selecció moderna, però necessita compatibilitat i alternativa provades. Si la imatge aporta significat, <img> o <picture> serà normalment més accessible.

Utilitzar `<picture>` per a un altre retall

Quan el mòbil necessita una composició diferent:

<picture>
  <source media="(max-width: 767px)"
    srcset="/uploads/hero-mobile-480.webp 480w,
            /uploads/hero-mobile-768.webp 768w">
  <img src="/uploads/hero-desktop-1200.webp"
    srcset="/uploads/hero-desktop-800.webp 800w,
            /uploads/hero-desktop-1200.webp 1200w"
    width="1200" height="700"
    alt="Especialista en rendiment WordPress">
</picture>

Reserva proporcions per evitar CLS.

Comprovar reescriptures i cada context

Connectors i CDN poden substituir URL o format. Verifica petició final, Content-Type, dimensions, bytes, memòria cau i paràmetres. Neteja només la memòria cau relacionada després de corregir el marcat.

No eliminis variants grans sense revisar-ne els usos: una mateixa imatge pot ser targeta, hero, zoom de producte o baixada de premsa. Corregeix la selecció en cada context.

Prova telèfon estret i ample, tauleta, portàtil, escriptori gran i alta densitat quan sigui important. Registra amplada visual, currentSrc, amplada intrínseca i bytes.

Regenerar amb còpia i mostra

Si realment falten variants, copia uploads i base de dades, registra mides, regenera primer una mostra, revisa retalls i disc, executa un procés acotat i verifica URL i qualitat. No eliminis automàticament fitxers antics fins a entendre referències i reversió.

Per a una avaluació aporta URL, imatge, viewport, currentSrc, amplades i canvis recents. No calen credencials inicials.

La reparació ha de reduir bytes al mòbil mantenint nitidesa i usos legítims d’alta resolució.

Encarregar l’optimització d’imatges

Si necessites corregir el lliurament a les plantilles, el servei d’optimització d’imatges de WordPress inclou una mostra representativa, acceptació visual, revisió del recurs servit i una publicació reversible. Envia els URL afectats i identifica qui pot aprovar el detall de producte i la qualitat de les imatges.