Una de les claus del disseny web amb WordPress actual, i més concretament de l’optimització SEO i WPO de la nostra pàgina, és optimitzar les imatges per a WordPress. En aquesta guia actualitzada t’explico com fer-ho, amb els formats i les eines d’avui.
Per què optimitzar imatges?
Les imatges són un dels elements essencials del disseny d’un lloc web. Atrauen l’atenció dels visitants, permeten presentar una idea i influir en un punt de vista sense escriure ni una línia de text.
Tanmateix, fer servir imatges de bona qualitat i alta resolució implica arxius molt pesats. Aquest pes alenteix el teu web, empitjora l’experiència d’usuari i perjudica mètriques com l’LCP (les Core Web Vitals de Google), perquè sovint la imatge principal és el que més triga a carregar. Per veure imatges grans sense penalitzar la velocitat, necessitem comprimir-les i adaptar-les.
En aquest article et mostro els mètodes que pots fer servir al teu web fet amb WordPress.
Coneix el pes, la mida i el format de les teves imatges
Pes i resolució
Per començar, has de saber quant pesa una imatge i quina resolució té. Ho pots veure a la biblioteca de mitjans de WordPress o al teu ordinador. No hi ha una mida perfecta: l’ideal és un equilibri entre qualitat i pes. Com a orientació, una imatge de contingut sol estar ben per sota dels 200–300 KB, i les imatges grans de capçalera, una mica per sobre però sense passar-se.
Formats d’imatge
- JPG: ideal per a fotografies, amb molts colors i degradats. Permet comprimir molt.
- PNG: ideal per a logotips, icones i gràfics, i quan necessites transparència. Sol pesar més que un JPG en fotografies.
- WebP: format modern, amb millor compressió que JPG i PNG i compatible amb tots els navegadors actuals. WordPress l’admet des de fa temps i avui és la meva opció recomanada.
- AVIF: encara més eficient que WebP. WordPress l’admet en les seves versions recents i el seu ús creix, tot i que convé comprovar la compatibilitat amb el teu plugin i el teu hosting.
- SVG: per a logos i icones vectorials, que es veuen nítids a qualsevol mida i pesen molt poc.
Mida en píxels
No pugis una foto de 4000 × 3000 píxels si al teu web es veurà a 1200 píxels d’amplada. Com a referència, una amplada màxima d’uns 1920 píxels és suficient per a la gran majoria de webs. WordPress, a més, redueix automàticament les imatges enormes i genera diverses mides de cadascuna per adaptar-les a cada dispositiu.
Hi ha dos moments per optimitzar les imatges: abans de pujar-les i una vegada publicades.
Comprimir imatges abans de pujar-les
Editor de fotografies
La primera opció és comprimir-les amb un editor com Photoshop, GIMP o Affinity Photo. Solen tenir l’opció «Desa per al web» o «Exporta com a», amb la qual pots ajustar la mida, la qualitat i el format.
Eines en línia per comprimir
Una de les més utilitzades, i la que faig servir jo en molts dels meus treballs, és TinyPNG (que també comprimeix JPG i WebP). No cal registrar-s’hi: arrossegues i deixes anar les teves imatges, una o diverses alhora, i descarregues les optimitzades. Pot reduir una part molt important del pes i manté la transparència als PNG. Una altra excel·lent opció gratuïta és Squoosh, de Google, que et permet comparar la qualitat abans i després i convertir a WebP o AVIF.
Optimitzar imatges ja publicades a WordPress
Una vegada que les imatges són a la teva biblioteca, les pots comprimir automàticament amb un plugin. Alguns dels més usats són Smush, ShortPixel, Imagify i EWWW Image Optimizer. Tots tenen versió gratuïta amb límits i plans de pagament, i gairebé tots poden convertir les teves imatges a WebP i optimitzar les noves cada vegada que les puges.
En el cas de Smush, una vegada activat, només has de premér el botó d’optimització massiva perquè treballi en el procés. La versió gratuïta limita quantes imatges processa cada vegada, així que si en tens moltes, hauràs de repetir el procés.
A més, en configurar el plugin pots limitar la mida màxima de les imatges. Si puges fotos de 4000 × 4000 píxels, no cal: posa com a límit una amplada raonable (per exemple, 1920 px) i baixaràs encara més el pes.
Consell: si puges poques fotos, pots tenir el plugin inactiu quan acabi la compressió, i així el teu web no haurà de carregar-lo a cada visita (tot i que l’optimització automàtica de noves imatges és molt còmoda). També et pots ajudar d’un plugin de memòria cau i optimització com WP Rocket.
Altres bones pràctiques amb les imatges
- Càrrega diferida (lazy loading): WordPress l’aplica per defecte a les imatges. Assegura’t de no aplicar-la a la imatge principal de la part superior de la pàgina (la que es veu tot just entrar), perquè alentiria l’LCP.
- Indica sempre l’amplada i l’alçada de les imatges per evitar salts de disseny mentre carrega la pàgina.
- Fes servir una CDN si el teu web rep visites de diferents països.
- Revisa el teu maquetador: si fas servir Elementor, evita imatges de fons gegants i aprofita les opcions d’imatges responsive.
Extra: descriu bé les teves imatges per millorar el SEO
És essencial donar informació sobre cada imatge per millorar-ne el posicionament i l’accessibilitat. A la biblioteca de mitjans de WordPress omple el text alternatiu (alt), que descriu allò que mostra la imatge, el títol i, si escau, la descripció. I posa-li un nom d’arxiu descriptiu abans de pujar-la (per exemple, «optimitzar-imatges-wordpress.webp» en lloc d'»IMG_4521.jpg»).
Preguntes freqüents
Quin format d’imatge és millor per a WordPress?
WebP és avui la millor opció general. Fes servir JPG per a fotografies si necessites màxima compatibilitat, PNG només quan necessitis transparència, i SVG per a logos i icones.
Quant ha de pesar una imatge al web?
No hi ha un número màgic, però com a regla general, com menys, millor: les imatges de contingut, per sota d’uns 200–300 KB.
Optimitzar imatges millora el SEO?
Sí: millora la velocitat de càrrega, l’experiència d’usuari i la presència a Google Imatges.
Finalment, després de fer aquesta optimització pots comprovar si la teva pàgina ha millorat en velocitat de càrrega. Si no saps com, llegeix l’article sobre Com mesurar la velocitat de càrrega del teu web?
Si t’ha agradat, deixa’m un comentari o comparteix aquest article a xarxes socials. Em farà molta il·lusió!
