El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

L'optimització d'imatges és una part crucial del SEO On-Page. Les imatges no només fan que el contingut sigui més atractiu i fàcil de comprendre, sinó que també poden influir significativament en la velocitat de càrrega del lloc web i en la seva classificació en els motors de cerca. En aquesta secció, aprendrem com optimitzar les imatges per millorar el SEO del nostre lloc web.

Conceptes Clau

Formats d'imatge: JPEG, PNG, GIF, WebP.
Comprimir imatges: Reduir la mida del fitxer sense perdre qualitat.
Etiquetes alt: Descripcions alternatives per a les imatges.
Noms de fitxer descriptius: Utilitzar noms de fitxer que descriguin el contingut de la imatge.
Sitemaps d'imatges: Incloure imatges en el sitemap del lloc web.

Formats d'Imatge

JPEG vs PNG vs GIF vs WebP

Format	Avantatges	Desavantatges
JPEG	Mida de fitxer petita, bona qualitat per a fotografies	Pèrdua de qualitat amb compressió
PNG	Suporta transparència, alta qualitat	Mida de fitxer més gran
GIF	Suporta animacions, mida de fitxer petita per a gràfics simples	Limitat a 256 colors, no adequat per a fotografies
WebP	Mida de fitxer molt petita, alta qualitat	No suportat per tots els navegadors

Recomanació

Utilitza JPEG per a fotografies i imatges amb molts colors.
Utilitza PNG per a gràfics amb transparència o text.
Utilitza GIF per a animacions simples.
Utilitza WebP si el teu públic utilitza navegadors que el suporten.

Comprimir Imatges

Eines de Compressió

TinyPNG: https://tinypng.com/
ImageOptim: https://imageoptim.com/
Kraken.io: https://kraken.io/

Exemple Pràctic

1. Carrega la teva imatge a TinyPNG.
2. Descarrega la imatge comprimida.
3. Substitueix la imatge original per la comprimida al teu lloc web.

Etiquetes Alt

Importància de les Etiquetes Alt

Accessibilitat: Les etiquetes alt ajuden les persones amb discapacitat visual a comprendre el contingut de la imatge.
SEO: Els motors de cerca utilitzen les etiquetes alt per comprendre el contingut de la imatge.

Exemple d'Etiqueta Alt

<img src="imatge-de-producte.jpg" alt="Sabatilles esportives blaves de marca X">

Noms de Fitxer Descriptius

Bones Pràctiques

Utilitza noms de fitxer que descriguin el contingut de la imatge.
Separa les paraules amb guions.

Exemple

Incorrecte: IMG1234.jpg
Correcte: sabatilles-esportives-blaves.jpg

Sitemaps d'Imatges

Què és un Sitemap d'Imatges?

Un sitemap d'imatges és un fitxer XML que proporciona informació sobre les imatges del teu lloc web als motors de cerca.

Exemple de Sitemap d'Imatges

<url>
  <loc>https://www.exemple.com/pagina-de-producte</loc>
  <image:image>
    <image:loc>https://www.exemple.com/imatges/sabatilles-esportives-blaves.jpg</image:loc>
    <image:caption>Sabatilles esportives blaves de marca X</image:caption>
  </image:image>
</url>

Exercicis Pràctics

Exercici 1: Comprimir una Imatge

Tria una imatge del teu lloc web.
Utilitza una eina de compressió com TinyPNG per reduir la mida del fitxer.
Substitueix la imatge original per la comprimida al teu lloc web.

Exercici 2: Afegir Etiquetes Alt

Tria una imatge del teu lloc web que no tingui etiqueta alt.
Afegeix una etiqueta alt descriptiva a la imatge.

Exercici 3: Renombrar Fitxers d'Imatge

Tria una imatge del teu lloc web amb un nom de fitxer no descriptiu.
Renombra el fitxer amb un nom descriptiu i actualitza l'enllaç a la imatge al teu lloc web.

Solucions

Solució a l'Exercici 1

1. Carrega la imatge a TinyPNG.
2. Descarrega la imatge comprimida.
3. Substitueix la imatge original per la comprimida al teu lloc web.

Solució a l'Exercici 2

<img src="imatge-de-producte.jpg" alt="Sabatilles esportives blaves de marca X">

Solució a l'Exercici 3

Incorrecte: IMG1234.jpg
Correcte: sabatilles-esportives-blaves.jpg

Conclusió

L'optimització d'imatges és essencial per millorar la velocitat de càrrega del lloc web i la seva classificació en els motors de cerca. Assegura't d'utilitzar els formats d'imatge adequats, comprimir les imatges, afegir etiquetes alt descriptives, utilitzar noms de fitxer descriptius i incloure les imatges en el sitemap del teu lloc web. Amb aquestes pràctiques, milloraràs significativament el SEO del teu lloc web.

Optimització d'imatges