Skip to content

Instantly share code, notes, and snippets.

@Javiafellay

Javiafellay/Rendimiento de imagenes

Last active January 4, 2022 00:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Javiafellay/fc243bd222180404e4a4eb97d699fcb0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Javiafellay/fc243bd222180404e4a4eb97d699fcb0 to your computer and use it in GitHub Desktop.
Download ZIP
Snippet para mejorar el rendimiento de la carga de imagenes en la web
Raw
Rendimiento de imagenes
<div class="imagen">
<picture>
<source srcset="build/img/imagen_vocalista.avif" type="image/avif">
<source srcset="build/img/imagen_vocalista.webp" type="image/webp">
<img loading="lazy" width="200" height="300" src="build/img/imagen_vocalista.jpg" alt="imagen vocalista">
</picture>
</div>
@Javiafellay
Copy link
Author

Javiafellay commented Jan 4, 2022

  1. El loading Lazy es opcional para la carga retrasada de las imágenes al momento de hacer scrooling,
  2. El width y el Height es recomendable colocar siempre en el html para una vista previa rápida de la misma
  3. Para evitar la interferencia con el css es recomendable utilizar el código de abajo en la hoja de estilo.
    max-width: 100%;
    display: block;
    width: 100%;
    height: auto;
    display: block;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment