Mantys CoreImágenes
srcset y sizes, la imagen LCP, heros de fondo y SVG: servir la imagen correcta, al tamaño correcto, en el momento correcto.
Mi hero es una imagen de fondo: por qué ralentiza el LCP y cómo solucionarlo (Divi, Elementor)
Una imagen de fondo CSS es invisible para el navegador hasta que la hoja de estilos se descarga y se aplica, no tiene srcset, y los maquetadores a menudo le aplican lazy load con JavaScript, así que el hero arranca tarde; la mejor solución es una imagen real, y la siguiente, un preload por dispositivo y nada de lazy load en esa sección.
La imagen LCP no es la misma en móvil y en escritorio: cómo hacer el preload de la correcta
Cuando la imagen más grande difiere entre el móvil y el escritorio, un único preload hace que uno de los dos descargue una imagen que no va a mostrar, o que descargue el hero dos veces, y la solución es un preload por dispositivo, con el mismo srcset y sizes que la imagen, colocado justo después de la etiqueta viewport.
SVG en línea: perfecto para un icono, veneno para una ilustración
Un SVG no es un único tipo de imagen. Un icono pequeño en línea es ideal, una ilustración pesada en línea infla tu página, y una foto raster escondida dentro de un SVG es lo peor de las tres. Aquí tienes cómo distinguirlos y elegir el formato correcto cada vez.
¿Por qué PageSpeed Insights sigue diciendo “Properly size images” si ya tengo un srcset?
Srcset le ofrece al navegador una lista de tamaños, pero es el atributo sizes el que le indica cuál elegir. Si sizes falta, es incorrecto o se ignora, el navegador descarga la imagen más grande de la lista, y PageSpeed lo marca, haya o no srcset.