El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Optimització d'imatges

Següent ►
►

Introducció

L'optimització d'imatges és una part essencial 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 el seu posicionament en els resultats de cerca. En aquesta secció, aprendrem com optimitzar les imatges per millorar el SEO del nostre lloc web.

Conceptes Clau

  1. Formats d'imatge: JPEG, PNG, GIF, WebP
  2. Comprimir imatges
  3. Etiquetes Alt i Títol
  4. Sitemaps d'imatges
  5. Lazy Loading

Formats d'Imatge

JPEG vs. PNG vs. GIF vs. WebP

Format Avantatges Desavantatges
JPEG Compressió alta, mida de fitxer petita, ideal per a fotografies Pèrdua de qualitat amb compressió alta
PNG Compressió sense pèrdua, suport de transparència, ideal per a gràfics Mida de fitxer més gran
GIF Suport d'animacions, compressió sense pèrdua Limitat a 256 colors, mida de fitxer gran per a imatges complexes
WebP Compressió alta amb i sense pèrdua, mida de fitxer petita No suportat per tots els navegadors

Comprimir Imatges

La compressió d'imatges és crucial per reduir la mida dels fitxers sense sacrificar massa qualitat. Hi ha diverses eines i plugins que poden ajudar en aquest procés:

  • Eines en línia: TinyPNG, JPEG-Optimizer, Compressor.io
  • Plugins per CMS: Smush (WordPress), ShortPixel (WordPress), ImageRecycle (Joomla)

Exemple de Compressió amb TinyPNG

  1. Visita TinyPNG.
  2. Carrega la teva imatge.
  3. Descarrega la imatge comprimida.

Etiquetes Alt i Títol

Les etiquetes Alt i Títol són importants per a l'accessibilitat i el SEO. Ajuden els motors de cerca a comprendre el contingut de les imatges.

Exemple d'HTML amb Etiquetes Alt i Títol

<img src="imatge-exemple.jpg" alt="Descripció de la imatge" title="Títol de la imatge">
  • Alt: Descripció breu i precisa de la imatge.
  • Títol: Informació addicional que apareix quan l'usuari passa el cursor sobre la imatge.

Sitemaps d'Imatges

Els sitemaps d'imatges ajuden els motors de cerca a descobrir totes les imatges del teu lloc web. Això pot millorar la indexació i el trànsit de cerca d'imatges.

Exemple de Sitemap d'Imatges

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://www.exemple.com/pagina1.html</loc>
    <image:image>
      <image:loc>http://www.exemple.com/imatge1.jpg</image:loc>
      <image:caption>Descripció de la imatge 1</image:caption>
    </image:image>
  </url>
  <url>
    <loc>http://www.exemple.com/pagina2.html</loc>
    <image:image>
      <image:loc>http://www.exemple.com/imatge2.jpg</image:loc>
      <image:caption>Descripció de la imatge 2</image:caption>
    </image:image>
  </url>
</urlset>

Lazy Loading

El Lazy Loading és una tècnica que carrega les imatges només quan són visibles a la pantalla de l'usuari. Això pot millorar significativament la velocitat de càrrega inicial de la pàgina.

Exemple de Lazy Loading amb HTML5

<img src="imatge-exemple.jpg" alt="Descripció de la imatge" loading="lazy">

Exercici Pràctic

Tasca

  1. Selecciona una imatge del teu lloc web.
  2. Comprimeix la imatge utilitzant TinyPNG.
  3. Afegeix les etiquetes Alt i Títol a la imatge.
  4. Inclou la imatge en un sitemap d'imatges.
  5. Implementa el Lazy Loading per a la imatge.

Solució

  1. Imatge Original: imatge-original.jpg
  2. Imatge Comprimida: imatge-comprimida.jpg
  3. Codi HTML:
<img src="imatge-comprimida.jpg" alt="Descripció de la imatge comprimida" title="Títol de la imatge comprimida" loading="lazy">
  1. Sitemap d'Imatges:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://www.exemple.com/pagina.html</loc>
    <image:image>
      <image:loc>http://www.exemple.com/imatge-comprimida.jpg</image:loc>
      <image:caption>Descripció de la imatge comprimida</image:caption>
    </image:image>
  </url>
</urlset>

Conclusió

L'optimització d'imatges és un aspecte fonamental del SEO On-Page que pot millorar la velocitat de càrrega del lloc web, l'experiència de l'usuari i el posicionament en els resultats de cerca. Assegura't de seguir les millors pràctiques per a la compressió d'imatges, l'ús d'etiquetes Alt i Títol, la creació de sitemaps d'imatges i la implementació del Lazy Loading per obtenir els millors resultats.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats