¿Qué es Srcset?
Srcset es un atributo de imagen HTML que especifica una lista de imágenes para que el navegador elija en función del tamaño y la resolución de la pantalla. Este concepto se conoce como imágenes responsivas, y garantiza que se cargue la versión de imagen más adecuada para las distintas condiciones de visualización.
He aquí un ejemplo de cómo funciona srcset:
<img srcset="ejemplo-imagen-480w.jpg 480w, ejemplo-imagen-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="ejemplo-imagen-800w.jpg" alt="Ejemplo de ilustración">En este ejemplo, srcset indica al navegador que cargue una imagen de 480 píxeles de ancho si la anchura de la ventana gráfica es inferior a 600 píxeles. Si la anchura de la ventana gráfica es superior a 600 píxeles, el navegador cargará la imagen más grande, de 800 píxeles de ancho.
Alternativamente, puede establecer la densidad de píxeles como condición en lugar del tamaño:
<img srcset="ejemplo-imagen-1x.jpg 1x, ejemplo-imagen-2x.jpg 2x" src="ejemplo-imagen-1x.jpg" alt="Otro ejemplo de ilustración">¿Por qué es importante el Srcset para el SEO?
Srcset es crucial para el SEO porque permite a los navegadores cargar el tamaño de imagen más adecuado en función de las características del dispositivo. Esta optimización tiene varias ventajas:
- Velocidad de carga mejorada: Las imágenes más grandes tienen archivos de mayor tamaño, lo que puede ralentizar los tiempos de carga de la página. Al cargar imágenes del tamaño adecuado para los distintos dispositivos, srcset ayuda a ahorrar ancho de banda y a reducir el tiempo de carga de la página.
- Mejor experiencia de usuario: Los tiempos de carga de página más rápidos mejoran la experiencia del usuario, lo que se traduce en tasas de rebote más bajas y un mayor compromiso.
- Beneficios SEO: La velocidad de carga de la página es un factor directo de clasificación tanto para búsquedas móviles como de escritorio. Optimizar las imágenes con srcset puede tener un impacto positivo en su posicionamiento en los motores de búsqueda.
Prácticas recomendadas para imágenes adaptables
1. Compruebe las recomendaciones de PageSpeed Insights
PageSpeed Insights es una herramienta gratuita de Google que ofrece sugerencias para optimizar la velocidad de su sitio web. Introduciendo la URL de tu página web, puedes recibir recomendaciones específicas para la optimización de imágenes, como:
- Actualización del formato de imagen para una mejor compresión.
- Considerar la carga perezosa para imágenes fuera de pantalla u ocultas.
- Dimensionar correctamente las imágenes para mejorar los tiempos de carga.
2. Utilice el elemento de imagen para la dirección artística
El elemento <picture> permite a los navegadores mostrar distintas imágenes en función de las características del dispositivo. Esto resulta útil cuando se desea mostrar imágenes completamente distintas en lugar de simplemente distintos tamaños de la misma imagen.
He aquí un ejemplo de uso del elemento <picture>:
<imagen> <source media="(min-width: 600px)" srcset="ejemplo-imagen.jpg, ejemplo-imagen-2x.jpg 2x"> <img src="ejemplo-imagen.jpg" alt="Ejemplo ilustración"> </picture>En este ejemplo, example-image.jpg o example-image-2x.jpg se mostrarán en anchos de navegador de 600px o más, dependiendo de la densidad de píxeles del dispositivo. Para anchuras de pantalla inferiores a 600px, o si no se admite el elemento <picture>, se mostrará en su lugar el elemento <img>. Incluya siempre el elemento <img> para garantizar la compatibilidad.
3. Garantizar los retrocesos adecuados
Proporcione siempre una imagen de reserva con el atributo src en caso de que el navegador no admita srcset o el elemento <picture>. Esto garantiza que siempre se muestre una imagen, independientemente de las capacidades del navegador.
4. Utilice un texto alternativo descriptivo
Incluya siempre un texto alternativo descriptivo para sus imágenes. Esto mejora la accesibilidad y proporciona contexto para los motores de búsqueda, mejorando su SEO.
Conclusión
El uso de srcset es una práctica vital para optimizar las imágenes para varios dispositivos, garantizando tiempos de carga más rápidos y una mejor experiencia de usuario. Siguiendo las mejores prácticas, puedes mejorar el rendimiento y el SEO de tu sitio web, haciéndolo más eficiente y accesible para los usuarios.
