Ajusta el tamaño al lugar donde se muestra
Fíjate en el espacio más ancho que ocupará la imagen en tu página. Un banner de ancho completo puede necesitar unos 1600-2000 píxeles. Una imagen dentro de la columna de un artículo suele necesitar 800-1200 píxeles. Una miniatura pequeña puede necesitar solo unos cientos. Las herramientas para desarrolladores de tu navegador o los ajustes de tu tema suelen indicarte el ancho mostrado. Si no lo sabes, un ancho de 1200 píxeles es una opción segura habitual para la imagen de un artículo.
Ten en cuenta las pantallas nítidas
Las pantallas de alta densidad muestran más detalle por píxel. Para las imágenes importantes, usar aproximadamente el doble del ancho mostrado las mantiene nítidas. Para las imágenes normales, basta con el ancho mostrado. Duplicar el tamaño multiplica aproximadamente por cuatro el número de píxeles, así que hazlo solo donde la nitidez importe. Las fotos con detalles finos se benefician más que los gráficos simples o los fondos desenfocados.
Mantén las proporciones
Cambia solo el ancho o el alto y deja que el otro se ajuste. Estirar ambos a valores fijos deforma a las personas y los círculos. Cuando necesites una forma exacta, recorta en lugar de estirar. Por ejemplo, para convertir una foto 4:3 en un cuadrado, recórtala primero a un cuadrado y luego redimensiónala al ancho que necesites.
Reduce, no amplíes
Hacer una imagen más pequeña funciona bien. Hacerla más grande no puede añadir detalle, así que se ve borrosa. Si necesitas una imagen mayor, parte de un original más grande. Si el original es pequeño, a menudo es mejor mostrarlo más pequeño que estirarlo.
Un ejemplo práctico
Supón que tienes una foto de móvil de 4000x3000 para una entrada de blog cuya columna de texto mide 800 píxeles de ancho. Redimensiónala a 800x600, o a 1600x1200 si quieres que se vea nítida en pantallas de alta densidad. En ambos casos el número de píxeles baja mucho respecto al original, y luego la compresión puede reducir aún más el archivo. Las cifras son ilustrativas y el ahorro real depende de la imagen.
Un segundo caso es una cuadrícula de miniaturas donde cada imagen aparece a unos 300 píxeles de ancho. Cargar allí fotos a tamaño completo hace la página pesada sin ningún beneficio visible. Redimensionar cada una a unos 300-600 píxeles de ancho mantiene la cuadrícula rápida y nítida. Las imágenes de producto son similares: si la plantilla de la tienda las muestra a 600 píxeles de ancho, una versión de 1200 píxeles suele bastar incluso para pantallas nítidas, mientras que un original de 5000 píxeles solo añade tiempo de descarga.
Los banners principales requieren más cuidado. Ocupan todo el ancho, así que revisa el diseño más ancho que admites y evita poner texto esencial dentro de la imagen, donde el recorte en pantallas pequeñas podría cortarlo.
Flujo de trabajo paso a paso
- Averigua el ancho al que se muestra la imagen en tu página.
- Decide si quieres 1x o aproximadamente 2x ese ancho.
- Abre el original, no una copia reducida anteriormente.
- Fija el ancho y mantén bloqueada la relación de aspecto.
- Recorta primero si necesitas otra forma.
- Comprime la imagen redimensionada para la web.
- Compruébala en un móvil y en una pantalla de escritorio.
- Sustituye la imagen antigua en tu página y recarga para confirmar que se ve bien.
Errores comunes
- Confiar en que el navegador reduzca una imagen enorme, de modo que los visitantes igualmente la descargan entera.
- Fijar ancho y alto a la vez y aplastar la imagen.
- Ampliar una imagen pequeña para llenar un banner.
- Redimensionar repetidamente una copia ya comprimida.
- Olvidar conservar el original.
- Usar un solo tamaño para todas las imágenes de la página en lugar de ajustar cada una a su espacio.
Lista de comprobación rápida
- Ancho mostrado conocido
- Tamaño ajustado a 1x o aproximadamente 2x de ese ancho
- Proporciones mantenidas
- Original intacto
- Comprimida después de redimensionar
Consejo: nombra el archivo redimensionado de forma clara, por ejemplo con el ancho al final, para poder distinguirlo del original más adelante.
Redimensiona y comprime con DoneImg
Abre la herramienta de redimensionar de DoneImg, añade tu imagen e introduce el ancho que necesitas. Tu navegador hace el trabajo, así que no se sube nada. Luego abre la herramienta de compresión para reducir el tamaño del archivo y descarga el resultado. Repite el mismo ancho para todas las imágenes de una galería, para que la página se vea coherente y cargue de forma predecible. Previsualiza siempre el resultado antes de descargarlo y conserva el original intacto. Si necesitas otra forma, usa la herramienta de recorte antes de redimensionar.
¿Debo redimensionar o comprimir primero?
Redimensiona primero, porque con menos píxeles el compresor tiene menos trabajo y obtiene un archivo más pequeño.
¿Redimensionar reduce la calidad?
Hacer una imagen más pequeña la mantiene nítida a su nuevo tamaño, aunque luego no podrás ampliarla de nuevo sin que se vea borrosa, así que conserva el original.