Plantear la decisión correctamente
Reducir una imagen con CSS no reduce el tamaño de descarga del archivo. La imagen original debe estar preparada para ajustarse al tamaño donde se utilizará en la pantalla. Proporcionar diferentes anchos para escritorio y teléfono reduce la transferencia de datos innecesaria. Proporcionar información sobre el tamaño también evita que el diseño salte al cargar el contenido.
¿Qué se debe considerar en la aplicación?
La imagen importante que aparece en la primera pantalla y la galería inferior no tienen la misma prioridad. No retrase innecesariamente la imagen principal de la página; suba imágenes no vistas solo cuando sea necesario. Elija el formato según el tipo de imagen; conservar los bordes nítidos en un logotipo es diferente a la compresión de fotos.
Verificación y siguiente paso
Después de la compresión, no se fije solo en el tamaño del archivo. Compruebe si hay distorsiones en el texto, los rostros, las líneas finas y las transiciones oscuras. Las descripciones de las imágenes deben transmitir el significado de la foto; las imágenes decorativas no deben producir repeticiones innecesarias en el lector de pantalla.
Tu lista de verificación
- Genere un tamaño de origen adecuado para la pantalla.
- Dé la prioridad correcta a la primera imagen.
- Compruebe visualmente la compresión.