Poner imágenes en sitios web es increíblemente simple, ¿no? En realidad, sí, lo es. Tu usas <img> y vincularlo a una fuente válida en el src atributo y listo. Excepto que hay (cuenta los dedos) 927 cosas que podrías (y algunas realmente deberías) hacer que a menudo se pasan por alto. Veamos…
- Asegúrate de usar el formato de oración
alttexto en la imagen para describir lo que representa la imagen. - Envuélvelo en un
<figure>y usa un<figcaption>si quieres texto visible que lo acompañe. - Utilizar una
<picture>elemento con una variedad de<source>elementos si quieres…- Tenga diferentes imágenes de origen para diferentes tamaños de pantalla y otras condiciones.
- Sirva imágenes con diferentes formatos para aprovechar los formatos de imagen de última generación.
- Conozca lo suficiente sobre los formatos de imagen desde el principio, de modo que pueda usar formatos como SVG cuando sea apropiado.
- Conozca lo suficiente sobre su audiencia para que pueda usar por defecto el formato más moderno que pueda.
- Usar
srcsetysizesatributos para servir imágenes de diferentes tamaños para ser eficientes en ancho de banda en diferentes dispositivos. Tenga en cuenta que para ser lo más eficiente posible, la creación de estas variaciones de imagen depende de la imagen en sí, no de los tamaños predeterminados. - Optimiza la imagen y todas sus variaciones. Pruebe muchos programas de optimización de imágenes, ya que todos producen resultados diferentes. Elige lo mejor. Asegúrese de que las versiones optimizadas no sean accidentalmente más grandes o de menor calidad que las originales, ya que eso puede suceder.
- Carga diferida de imágenes para que los usuarios no tengan que descargar imágenes que no verán. Nativamente, tenemos
loading="lazy"pero esto es tan importante que probablemente valga la pena polillenarlo. - Asegúrate de incluir
widthyheightatributos para que la imagen reserve la cantidad correcta de espacio en un diseño antes de que se cargue (incluso cuando la imagen es de ancho fluido). - Aloja tus imágenes en una CDN global, rápida y sin cookies. Probablemente
<link rel="preconnect">y<link rel="dns-prefetch">a los dominios CDN. Pero no haga nada de CDN en desarrollo, solo puesta en escena o producción. La fuente canónica de sus imágenes deben ser sus propios servidores, para que pueda mover los CDN según sea necesario. - La imagen más grande de la página podría precargarse por completo, como
<link rel="preload" as="image">para el mejor LCP posible. - Trate de averiguar cuándo debe usar
decoding="async"(No tengo ni idea). - Tenga un estilo alternativo para cuando/si la imagen no se carga.
- Considere estados antes de la carga o de falla más agradables para las imágenes, como pequeñas versiones borrosas de las imágenes.
- Implemente un control del rendimiento para asegurarse de que las imágenes gigantes deshonestas no se filtren y alteren sus presupuestos de rendimiento, y puedan detectar errores de imágenes rotas.
Seguro que me olvido de alguno. Te hace sudar, ¿no?
Addy cubrió mucho de esto con más detalle en este artículo de Smashing Magazine y tiene un libro completo sobre el tema.
Si me preguntas, no se puede hacer. Al menos, no todo junto mientras se es práctico con su tiempo. Afortunadamente: las computadoras. Sé que tanto Eleventy Image como gatsby-plugin-image son bien considerados por lo bien que automatizan estas cosas y ofrecen la mayor cantidad posible de estas mejores prácticas.
Otra realidad a veces es simplemente hacer algunas de estas cosas, quizás las mayores ganancias, mientras se es práctico con el tiempo. En “La mitad del tamaño de las imágenes mediante la optimización para pantallas de alta densidad” de Jake, escribe:
Esta es la técnica que uso para la mayoría de las imágenes en este blog: tomo el tamaño máximo que se puede mostrar la imagen en píxeles CSS, lo multiplico por dos y lo codifico con una calidad más baja, ya que siempre se mostrará en una densidad 2x o mayor. Sí. Eso es.
Con reminiscencias del truco 1.5✕ de Dave de 2013.