Imatges a WordPress, les bones pràctiques

white and blue printer paper

Comparteix l'entrada

Optimitzar les imatges ens aporta:

  • El vostre lloc es carrega el més ràpid possible
  • Les vostres imatges estan optimitzades per al rastreig i la indexació de motors de cerca com Google
  • Les imatges disposaran d’un nom descriptiu de la imatge, de manera que serà més senzill cercar la imatge en un futur a la mediateca de WordPress

1. Reduir la mida de la imatge

Com comences a optimitzar les teves imatges? Redimensionar-les a la resolució adequada per a la web és un bon punt de partida, i és una cosa que moltes persones que gestionen llocs web obliden o desconeixen.

a. Redimensionar imatges

Les imatges amb les dimensions adequades faran que el lloc web es carregui més ràpidament, el que significa una millor experiència d’usuari i una puntuació SEO més favorable per a Google. Si no saps com redimensionar les teves imatges, aquí tens algunes regles bàsiques que pots seguir:

  1. Per a les imatges d’inici (és a dir, a pantalla completa), haurien de tenir com a màxim 1920 píxels d’amplada. No obstant això, avui dia, amb les pantalles 4k i els monitors allargats cada vegada més estesos, és raonable utilitzar imatges de resolució més alta per a aquest tipus d’imatges, encara que no cal que superin els 4000 píxels.
  2. Les imatges normals no haurien de tenir més de 1320 píxels d’amplada, ja que la majoria del contingut del teu lloc web s’ajustarà dins d’un contenidor, que normalment no té més de 1320 píxels d’amplada, fins i tot en les pantalles més grans.
  3. Les imatges s’han de redimensionar en funció de la quantitat d’espai de la pantalla que ocuparan. Una imatge que s’espera que cobreixi aproximadament el 50% de la pantalla no ha de tenir més de 680 píxels d’amplada.

Una imatge que ocupi tota l’amplada de la pantalla requereix una resolució més alta per evitar que sembli pixelada. D’altra banda, les imatges normals es troben en un contenidor a la majoria de llocs web i, per tant, no necessiten una resolució tan alta.

b. Format de la imatge

La imatge també ha de tenir un format adequat segons les seves necessitats. El valor predeterminat és tenir la imatge desada en format JPG. Només si la imatge conté alfa (o transparència), s’hauria de mantenir com a PNG ja que el JPG no admet imatges transparents.

Actualment existeix el format WEBP, que permet transparència i que ocupa molt menys que el JPG o el PNG. Aquest format és el recomanable a utilitzar per a aconseguir el millor rendiment web. Com a contrapartida navegadors antics no són capaços d’obrir aquestes imatges

c. Compressió d’imatge

L’últim pas és comprimir les imatges per reduir encara més la mida del fitxer. Us recomanem desar les imatges en format Webp, format desenvolupat per Google. Podeu convertir les vostres imatges a Webp utilitzant el següent enllaç:

Si prefereixes desar les imatges en altres formats pots utilitzar els següents webs per a comprimir les imatges:

  1. JPG / JPEG: CompressJPG
  2. PNG: CompressPNG
  3. GIF: EZGIF GIF optimiser

2. Nomenclatura i etiquetatge adequats de les imatges

Una nomenclatura i etiquetatge adequats de les imatges permeten que siguin optimitzades per a l’exploració i indexació pels motors de cerca com Google.

a. Convencions de nomenclatura

Abans de carregar els fitxers d’imatge al WordPress, és una bona pràctica nomenar-los utilitzant la mateixa convenció que les pàgines web, per tal que tinguin una URL amigable:

  • Totes les paraules en el nom han d’estar en minúscules.
  • Eliminar els caràcters especials.
  • Tots els espais i guions baixos són reemplaçats per guions
  • Els noms de les imatges haurien de ser descriptius.

Aquestes convencions fan que els motors de cerca tinguin una tasca més senzilla en extreure informació de les teves imatges, de manera que puguin indexar-les adequadament.

Utilitzar noms descriptius per a les teves imatges també et permetrà fer un millor ús de la funció de cerca a la mediateca del WordPress, que et permet cercar mitjans utilitzant paraules clau.

b. Etiquetatge d’imatges

Després de carregar les imatges, etiqueta-les amb una descripció adequada tant al camp Text alternatiu (Alt Text) com al camp Títol (Title) quan les utilitzis.

Aquests camps afegiran informació addicional a les teves imatges que és llegida pels motors de cerca i lectors de pantalla, i molts motors de cerca recompensen els llocs que omplen de manera consistent aquests dos atributs per a les seves imatges.

  • En general, voldràs tenir descripcions més detallades que els noms dels fitxers de les imatges, ja que gairebé no hi ha restriccions sobre què pots introduir en aquests camps.
  • Tradicionalment, el Text alternatiu ha estat considerat més important que el text del Títol. Els motors de cerca donen molta més importància al Text alternatiu, igual que fan els lectors de pantalla.
  • El text del Títol determina la informació emergent que apareix quan un usuari col·loca el ratolí sobre una imatge. En general, als motors de cerca no els importa si els utilitzes o no, però poden afegir a l’experiència general.
  • Pots introduir els mateixos valors tant al Títol com al Text alternatiu sense cap penalització.

Conclusió

Per resumir, redimensiona, converteix i comprimeix les teves imatges abans de donar-los a cadascuna un nom únic i descriptiu que segueixi la convenció de nomenclatura adequada. Després de carregar-les al WordPress, etiqueta cada imatge amb el Text alternatiu i el Títol abans d’utilitzar-les.

D’aquesta manera obtindràs millors resultats SEO i la mediateca de WordPress estarà més endreçada

Si tens algun dubte o vols que t’assessorem pots contactar amb nosaltres 

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

Explora més

person showing white envelope

Configurar autoresposta en Webmail Ionos

Accedim al webmail del correu electronic amb el nostre usuari i contrasenya a través del següent enllaç: https://mail.ionos.es Dins el correu electrònic, accedim a la…

Vols fer créixer el teu negoci?

Estiguem en contacte!

Person Holding Plant in Vase
Open chat
Et puc ajudar?
Dualvic
Hola!
Com et puc ajudar?