Mejora el rendimiento y SEO de tu sitio web dominando la optimización de imágenes. Esta guía cubre desde técnicas de compresión avanzada hasta estrategias para alt text efectivos y implementación de imágenes responsive.
Comparativa de imágenes optimizadas vs no optimizadas
Contenido del Artículo
Alt Text: Accesibilidad y SEO
Descripciones textuales que mejoran accesibilidad y posicionamiento:
Contexto
Describir función de la imagen
Palabras clave
Incluir términos relevantes
Evitar stuffing
Descripciones naturales
Imágenes decorativas
Alt vacío ("")
<!-- Ejemplo efectivo -->
<img src="zapatos-running.jpg" alt="Zapatos deportivos para running en terreno montañoso">
<!-- Ejemplo pobre -->
<img src="zapatos-running.jpg" alt="zapatos running deporte calzado atletismo">Técnicas de Compresión
Formatos modernos y herramientas de optimización:
<!-- Imagen responsive con formatos modernos -->
<picture>
<source srcset="imagen.avif" type="image/avif">
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción">
</picture>
/* Estilos para carga diferida */
img.lazy {
background: #f1f1f1;
width: 100%;
height: auto;
}| Formato | Mejor uso | Herramientas |
|---|---|---|
| WebP | Fotografías | cwebp, Squoosh, Imagemagick |
| AVIF | Imágenes críticas | avifenc, Squoosh |
| SVG | Iconos, gráficos | SVGO, SVGOMG |
| JPEG 2000 | Compatibilidad | ImageMagick |
Implementación HTML Óptima
Atributos esenciales para rendimiento:
Width/Height
Evitar desplazamientos (CLS)
Loading Lazy
Carga diferida fuera de viewport
Decoding Async
No bloquear renderizado
Srcset/Sizes
Imágenes responsive
<!-- Ejemplo completo optimizado -->
<img
src="producto.jpg"
srcset="producto-480w.jpg 480w, producto-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Descripción detallada del producto"
width="800"
height="600"
loading="lazy"
decoding="async">Herramientas y Automatización
Flujos de trabajo profesionales para equipos:
// Ejemplo Webpack con image-minimizer-webpack-plugin
module.exports = {
optimization: {
minimizer: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.squooshMinify,
options: {
encodeOptions: {
mozjpeg: { quality: 80 },
webp: { lossless: 1 },
avif: { cqLevel: 35 },
},
},
},
}),
],
},
};
// Ejemplo .gitlab-ci.yml
optimize_images:
stage: build
script:
- apt-get install -y webp
- find ./src/images -type f -name '*.jpg' -exec cwebp -q 80 {} -o {}.webp \;
