Diseño web y UX
No deformes tus fotos: aprende a redimensionarlas
Tienes la foto perfecta, pero no encaja bien en el espacio donde la quieres colocar.

En pocas palabras
Ideas principales
- Tienes la foto perfecta, pero no encaja bien en el espacio donde la quieres colocar.
- La plantilla de tu blog no permite imágenes cuadradas; o el slideshow de la home de tu web es demasiado alargado; o las fotos de tus productos no siempre quedan bien encuadradas en el listado de tu tienda…
- Cada caso puede tratarse de manera diferente, te mostramos las soluciones posibles… y lo que no deberías hacer jamás.
- Si deformas tu logo o tus fotos, tu imagen y tu web pierden calidad.
Este contenido forma parte del archivo histórico de Sitelicon. Conserva la información disponible en la fecha de publicación; las condiciones, herramientas y requisitos de las plataformas pueden haber cambiado.
Contexto
A todos nos ha pasado. Tienes la foto perfecta, pero no encaja bien en el espacio donde la quieres colocar. La plantilla de tu blog no permite imágenes cuadradas; o el slideshow de la home de tu web es demasiado alargado; o las fotos de tus productos no siempre quedan bien encuadradas en el listado de tu tienda online, etc.
Cada caso puede tratarse de manera diferente, te mostramos las soluciones posibles… y lo que no deberías hacer jamás.
Imagina que tienes esta foto y necesitas colocarla en un espacio cuadrado:
http://www.contrabase.com/wp-content/uploads/2015/03/post-01.jpg
OPCIÓN 1: DEFORMAR
Si el espacio del que dispones es distinto al formato de la imagen, la solución fácil es achatar o estirar la foto, pero, ¡cuidado! esta es la peor opción de todas y NO deberías hacerlo jamás. Si deformas tu logo o tus fotos, tu imagen y tu web pierden calidad. Parecerá que descuidas tu web y dará una impresión “cutre”.
http://www.contrabase.com/wp-content/uploads/2015/03/post-02.jpg
OPCIÓN 2: CENTRAR
Centrar la imagen suele ser la mejor opción en la mayoría de casos. Esto significa que los lados de la foto se recortarán un poco, pero casi siempre podremos prescindir de un trozo. El encuadre de la foto queda centrado en el espacio disponible. Sería algo así:
http://www.contrabase.com/wp-content/uploads/2015/03/post-03.jpg
OPCIÓN 3: AJUSTAR
De esta manera metemos la imagen entera en el espacio que tenemos. No se recorta ni se deforma, pero quedarán unos márgenes rellenando el espacio sobrante. Esta opción es menos estética que la anterior, pero es la solución adecuada cuando es importante mostrar la imagen completa.
http://www.contrabase.com/wp-content/uploads/2015/03/post-04.jpg
¿Tienes más dudas? Si necesitas ayuda o tienes cualquier problema con la gestión de tus imágenes en la web, contacta con nosotros.
Fuentes y revisión
Información contrastada y fechada.
Artículo revisado el . Las funciones de las plataformas digitales pueden cambiar con el tiempo.
Servicios relacionados
Podemos ayudarte a llevarlo a la práctica.
Seleccionamos para cada artículo las capacidades de Sitelicon que guardan una relación directa con el tema tratado.
Desarrollo web
Diseñamos y construimos experiencias web claras, accesibles y preparadas para evolucionar.
Ver servicioAplicaciones y software a medida
Convertimos necesidades de usuario y negocio en interfaces y funcionalidades específicas.
Ver servicioSEO + GEO/AIO
Conectamos estructura, contenidos, accesibilidad y rendimiento para mejorar la visibilidad.
Ver servicio