check_circle
Recomendaciones clave
Usar CSS para redimensionar
Es preferible usar CSS en lugar de atributos HTML para cambiar el tamaño
Mantener proporción
Evita la distorsión manteniendo la relación de aspecto original
Optimizar tamaño
Usa imágenes con el tamaño adecuado para optimizar la carga
Ejemplos de código:
<img src="imagen.jpg" style="width: 300px; height: auto;">
Mantiene la proporción de aspecto
<img src="imagen.jpg" style="max-width: 100%;">
Imagen responsiva que se adapta al contenedor
compare
Comparación de técnicas
thumb_up
Recomendado
check_circle
CSS para dimensiones
height: auto
height: auto
thumb_down
Evitar
cancel
Cambiar proporción
Imágenes grandes escaladas
Imágenes grandes escaladas
devices
Imágenes responsivas
desktop_windows
max-width: 100% - se adapta al ancho del contenedor
photo_size_select_actual
srcset - diferentes imágenes para diferentes resoluciones
picture_in_picture
<picture> - control avanzado de imágenes responsivas
lightbulb
Consejo profesional
Redimensiona las imágenes antes de subirlas al servidor. Usar imágenes más grandes de lo necesario ralentiza la carga y consume ancho de banda innecesariamente.