El humilde elemento `img` y los elementos básicos de la web
Addy Osmani sobre imágenes en HTML:
El elemento humilde
imgha adquirido algunos superpoderes a lo largo de los años. Dado lo fundamental que es la optimización de imágenes en la web, veamos qué puede hacer y cómo puede ayudar a mejorar la experiencia del usuario y los Core Web Vitals .
Addy hace un buen trabajo traduciendo cosas como esta en publicaciones de Instagram, así que las insertaré aquí:
Yo diría que este material es un conocimiento necesario para cualquier desarrollador de HTML 1 . Las imágenes afectan el rendimiento de un sitio. Las imágenes afectan la accesibilidad de un sitio. Las imágenes afectan la UX de un sitio. Las imágenes afectan el SEO de un sitio. Eso no es algo que puedas desperdiciar. Hay muchas cosas que saber, pero ese es el trabajo.
Todavía tengo mucha curiosidad por estas decoding="async"cosas. He leído algunas cosas que sugieren que es mejor tener esto en todas las imágenes (aunque Addy no sugiere esto, pero tampoco brinda orientación). Todavía no entiendo cuál es la mejor manera de usar este atributo, pero si resulta que es “todo el tiempo”, creo que deberíamos presionar a los navegadores para que establezcan ese comportamiento como predeterminado para no tener que preocuparnos por el atributo. .
También veo que Addy sugiere cargar la imagen del héroe lo antes posible, pero sin más trucos. Tengo curiosidad por saber si este truco que cubrimos sobre simplemente no cargar al héroe en absoluto (hasta la interacción) en un esfuerzo por engañar a CWV para que obtenga números más altos terminará siendo una buena práctica o una mala.
- No escucho mucho el término “desarrollador HTML”, pero me gusta. Por ejemplo, la gente utiliza habitualmente “desarrollador de React” para describir a quienes desarrollan React. Si escribe código que termina como DOM, es un desarrollador de HTML. Usted es responsable de la experiencia que ofrece HTML. ⮑
Deja un comentario