Core Web Vitals – Imágenes
Veamos algunos consejos para cumplir las normas del nuevo Core Web Vitals con las imágenes. Formatos, tamaño y etiquetas.
Añadimos el artículo a nuestro listado de tutoriales y artículos sobre SEO. Ya vimos en un artículo anterior qué era y dónde informarnos sobre qué era el Core Web Vitals.
Formato imágenes
Utilizar los formatos de última generación, como son WebP o JPEG.
El problema, es que alguna de ellas, como la WebP, WordPress todavía no las trata dor defecto. Al subirlas al multimedia, no reconoce el formato. Aquí tenéis el artículo que hice en su día de cómo subir imágenes webp a WordPress.
Tamaño imágenes
Se recomienda indicar el tamaño exacto de la imágen y evitar que sea el navegador el que redimensione o cambie tamaños al cargar definitivament la imagen.
Así pues, en todas las imágenes que podáis, indicad el tamaño:
<img src="mi-imagen.jpeg" width="300px" height="300px" />Para los que programéis en PHP y queráis un truco para que automáticamente se ponga el tamaño en las imágenes, este código os puede facilitar mucho la vida:
<?php
$urlimage= "imagenes/miimagen.jpeg";
$image_info = getimagesize($urlimage);
?>
<img src="<?php echo $urlimage; ?>" width="<?php echo $image_info[0]; ?>" height="<?php echo $image_info[1]; ?>" alt="Descripcion" title="Title" />La clave es la función PHP getimagesize() que devuelve toda la información sobre las imágenes.
Etiquetas de las imágenes
Alt
Poner la etiqueta Alt en todas las imágenes poniendo un texto que defina la imagen. Es muy importante.
Title
No tan necesario, pero recomendable. Es ese tip que sale si te pones encima de la imagen.
En definitiva, como más información pongas mejor.
Nombre de la imagen
Intentar poner un nombre descriptivo a la imagen. No es lo mismo:
photo-01-jpeg
que este otro nombre:
paisaje-playa-tarragona-2021.jpeg
El hacerlo de la segunda manera, nos dará más puntos para salir en Google Images. Además, en el caso de tener muchas imágenes, siempre las tendremos localizadas y será más fácil administrarlas.
Intentad evitar letras acentuadas, ñ, ç o letras que no estén en el alfabeto inglés. Pueden dar problemas.
Con estos pequeños consejos, podemos mejorar mucho la puntuación en Core Web Vitals respecto a las imágenes.
Más información
- Más información sobre Web Core Vitals
- La función PHP getimagesize()