New Dimensions
--
File Size
--
Scale
--
Redimensiona imágenes a dimensiones exactas con bloqueo de proporción y ajustes predefinidos comunes. Todo el procesamiento ocurre en tu navegador -- no se sube nada a ningún servidor.
Las imágenes con el tamaño adecuado son críticas para la velocidad de página y Core Web Vitals. OneStepToRank monitoriza tus rankings, sigue a la competencia y optimiza tu estrategia local de SEO automáticamente.
ComenzarCada plataforma tiene requisitos específicos de dimensiones de imagen. Usar el tamaño incorrecto hace que tus visuales cuidadosamente diseñados se recorten, estiren o reduzcan de forma que perjudican tu marca. Facebook recomienda 1200x630 para vistas previas de enlaces y 1080x1080 para publicaciones en el feed. Instagram usa 1080x1080 para publicaciones cuadradas, 1080x1350 para retrato y 1080x608 para paisaje. Las imágenes en Twitter/X se ven mejor a 1200x675 píxeles. Obtener estas dimensiones correctas no es opcional, es la diferencia entre una presencia profesional y una amateur.
Para sitios web, el principio clave es servir imágenes exactamente al tamaño en que se mostrarán. Una imagen mostrada a 600 px de ancho en CSS no debe ser un original de 3000 px de ancho — el navegador aún descarga el archivo completo antes de escalarlo, desperdiciando ancho de banda y ralentizando la carga. La excepción son las pantallas retina, donde debes servir imágenes a 2× el tamaño de visualización CSS (por ejemplo, 1200 px para un espacio de 600 px) para mantener la nitidez en pantallas de alta densidad.
El desarrollo web moderno requiere servir diferentes tamaños de imagen a distintos dispositivos. Un usuario de escritorio con un monitor de 1920 px de ancho necesita una imagen diferente a la de un usuario móvil con pantalla de 375 px. Los atributos HTML srcset y sizes te permiten definir múltiples versiones de la imagen para que el navegador elija según el ancho del viewport y la relación de píxeles del dispositivo. Esto implica crear varias versiones de cada imagen — típicamente a 400 px, 800 px, 1200 px y 1600 px de ancho.
Las pantallas retina (densidad de 2x y 3x) empaquetan dos o tres veces más píxeles físicos en la misma área de pantalla. Sin imágenes preparadas para retina, las fotografías se ven suaves y borrosas en iPhones, iPads, MacBooks y la mayoría de los dispositivos Android modernos. La solución es sencilla: redimensiona tus imágenes al 2× del tamaño de visualización y permite que CSS las limite. Un espacio de imagen de 600 x 400 necesita una imagen fuente de 1200 x 800. Usa esta herramienta para crear cada variante de tamaño, luego comprímelas con nuestro Compresor de Imágenes para mantener los tamaños de archivo manejables.
La imagen más rápida es la más pequeña que aún se vea bien. Para secciones hero, apunta a imágenes comprimidas por debajo de 200 KB. Para imágenes de contenido en línea, mantenlas bajo 100 KB. Las miniaturas deben estar bajo 30 KB. Estos objetivos asumen que usas formatos modernos como WebP — si estás limitado a JPEG, los tamaños serán 25‑35 % mayores para una calidad equivalente. Siempre redimensiona las imágenes al tamaño de visualización antes de comprimir. Una fotografía de 4000 x 3000 comprimida a 150 KB se verá peor que una versión redimensionada correctamente a 1200 x 900 comprimida al mismo tamaño, porque la compresión debe trabajar mucho más para encajar más píxeles en el mismo presupuesto de archivo.
Reducir el tamaño conserva bien la calidad ya que consolidás píxeles. Ampliar (agrandar) reduce la calidad porque el navegador debe interpolar nuevos píxeles que no existían en el original, provocando borrosidad. Para obtener los mejores resultados, siempre comienza con la fuente de mayor resolución y reduce el tamaño. Nunca aumentes una imagen pequeña y esperes resultados nítidos.
La proporción de aspecto es la relación proporcional entre el ancho y la altura. Las proporciones comunes incluyen 16:9 (panorámica), 4:3 (estándar) y 1:1 (cuadrada). Bloquear la proporción de aspecto asegura que al cambiar una dimensión, la otra se ajuste automáticamente para mantener las proporciones, evitando estiramientos o aplastamientos. Desbloquéala solo cuando intencionalmente deseas un escalado no proporcional.
Publicaciones en Facebook: 1200x630. Feed de Instagram: 1080x1080 (cuadrado) o 1080x1350 (retrato). Twitter/X: 1200x675. LinkedIn: 1200x627. Pinterest: 1000x1500. Las fotos de perfil en todas las plataformas suelen ser 400x400 o más grandes. Usar las dimensiones correctas garantiza que tus imágenes se muestren sin recortes inesperados ni degradación de calidad.
Las pantallas Retina y HiDPI tienen una densidad de píxeles 2‑3 × mayor que las pantallas estándar. Una imagen mostrada a 300 x 200 píxeles CSS en una pantalla retina de 2× realmente usa 600 x 400 píxeles físicos. Si tu imagen solo tiene 300 x 200, aparecerá borrosa en estas pantallas. La solución es proporcionar imágenes al 2× del tamaño de visualización previsto y usar ancho/alto en CSS para limitarlas.