¿Cómo adapta WordPress las imágenes a su plantilla?

44
¿Cómo WordPress corta las imágenes para su plantilla?

description

¿Qué hace un CMS si inserto una foto vertical en un marco horizontal? Te mostramos cómo WordPress edita las imágenes al adaptarlas a su plantilla.

Transcript of ¿Cómo adapta WordPress las imágenes a su plantilla?

Page 1: ¿Cómo adapta WordPress las imágenes a su plantilla?

¿Cómo WordPress corta las imágenes para su plantilla?

Page 2: ¿Cómo adapta WordPress las imágenes a su plantilla?

1º CASO Imagen más pequeña y distintas proporciones (4:3 a 1:1)

Page 3: ¿Cómo adapta WordPress las imágenes a su plantilla?

1000 x 665

Tenemos una imagen de 1000 por 665 pixeles (4:3)

500 x 500

Para transformar a 500 por 500 pixeles (1:1)

Page 4: ¿Cómo adapta WordPress las imágenes a su plantilla?

WordPress buscará el centro y medirá desde ahí

500 x 500

1000 x 665

Page 5: ¿Cómo adapta WordPress las imágenes a su plantilla?

500 x 500

1000 x 665

WordPress buscará el centro y medirá desde ahí

Page 6: ¿Cómo adapta WordPress las imágenes a su plantilla?

500 x 500

1000 x 665

WordPress se ajsutará siempre al eje más pequeño, en este caso el alto

Page 7: ¿Cómo adapta WordPress las imágenes a su plantilla?

y redimensionará la imagen

500 x 500

1000 x 665

ajustándose al tamaño menor del original, en este caso el alto de la imagen

Page 8: ¿Cómo adapta WordPress las imágenes a su plantilla?

Realizada la redimensión

500 x 500

1000 x 665

Cortará lo que sobra a los costados de forma equitativa

Page 9: ¿Cómo adapta WordPress las imágenes a su plantilla?

Es decir, hay una porción de la imagen que se perderá siempre

500 x 500

1000 x 665

de forma simétrica por cada lado, porque calcula desde el centro

Page 10: ¿Cómo adapta WordPress las imágenes a su plantilla?

500 x 500

1000 x 665500 x 500

Page 11: ¿Cómo adapta WordPress las imágenes a su plantilla?

Para que no queden dudas, WordPress no ajusta el ancho

500 x 500

1000 x 665

porque el alto de la imagen quedaría más pequeño de lo necesario y no haría ningún corte

Page 12: ¿Cómo adapta WordPress las imágenes a su plantilla?

2º CASO Imagen tamaño similar (alto) y distintas proporciones (4:3 a 1:1)

Page 13: ¿Cómo adapta WordPress las imágenes a su plantilla?

Igual que en el ejemplo anterior1000 x 665

665 x 665

WordPress calcula el centro y medirá desde ahí

Page 14: ¿Cómo adapta WordPress las imágenes a su plantilla?

buscando la primera coincidencia con algún lado, en este caso es el alto

665 x 665

1000 x 665

y en este caso se perderá parte de la imagen a los costados de forma equitativa

Page 15: ¿Cómo adapta WordPress las imágenes a su plantilla?

3º CASO Imagen horizontal a vertical o viceversa, con mismo tamaño (4:3 a 3:4)

Page 16: ¿Cómo adapta WordPress las imágenes a su plantilla?

Obviamente sobra ancho

y evidentemente falta alto

Page 17: ¿Cómo adapta WordPress las imágenes a su plantilla?

WordPress no tiene problema en cortar lo que sobra

Pero es imposible agregar lo que falta arriba y abajo

Page 18: ¿Cómo adapta WordPress las imágenes a su plantilla?

Si la opción es hacer más pequeña la imagen

Page 19: ¿Cómo adapta WordPress las imágenes a su plantilla?

Se puede ajustar al ancho, pero no al alto

Pero esto WordPress no lo hará.

Page 20: ¿Cómo adapta WordPress las imágenes a su plantilla?

WordPress tampoco cambiará la proporción de la imagen, nunca.

Eso causaría que la imagen se distorsiona

Page 21: ¿Cómo adapta WordPress las imágenes a su plantilla?

En una foto tipo retrato, sobra alto

pero falta ancho

Page 22: ¿Cómo adapta WordPress las imágenes a su plantilla?

Nuevamente, WordPress puede cortar lo que sobra

pero no agregar lo que falta. Simple, no está en la foto…

Page 23: ¿Cómo adapta WordPress las imágenes a su plantilla?

Si se achicara la imagen

Sería pero, pero algo que WordPress no hace.

Page 24: ¿Cómo adapta WordPress las imágenes a su plantilla?

Y como ya señalamos

WordPress no estirará la imagen para cambiar la proporción, porque la distorsiona.

Page 25: ¿Cómo adapta WordPress las imágenes a su plantilla?

4º CASO ¿Se puede agrandar una foto y cambiar de proporción?

Page 26: ¿Cómo adapta WordPress las imágenes a su plantilla?

Tenemos una imagen 1:1

y queremos llenar un espacio mayor cambiando la proporción

400px

400px

Page 27: ¿Cómo adapta WordPress las imágenes a su plantilla?

¿De dónde sacamos más pixeles?

Por ejemplo en una proporción 4:3

400px

600px

100px 100px

400px

Page 28: ¿Cómo adapta WordPress las imágenes a su plantilla?

WordPress nunca creará la versión de tamaño mayor

Lo mismo si está en proporción 3:4

400px

600px

100px

100px

400px

Page 29: ¿Cómo adapta WordPress las imágenes a su plantilla?

5º CASO ¿Se puede achicar una foto y cambiar de proporción?

Page 30: ¿Cómo adapta WordPress las imágenes a su plantilla?

Si tenemos una imagen 1:1

para un espacio menor cambiando la proporción a horizontal

600px

600px

Page 31: ¿Cómo adapta WordPress las imágenes a su plantilla?

En este caso no se puede redimensionar el ancho

En ambos casos mide 600px, entonces sólo se realiza un crop al alto600px

600px

400px

600px

Page 32: ¿Cómo adapta WordPress las imágenes a su plantilla?

Finalmente el ancho se mantiene

Se corta el alto, el cálculo se hace desde el medio. Se pierde imagen arriba y abajo

Page 33: ¿Cómo adapta WordPress las imágenes a su plantilla?

Si tenemos una imagen 1:1

para un espacio menor cambiando la proporción a vertical

600px

600px

Page 34: ¿Cómo adapta WordPress las imágenes a su plantilla?

Si tenemos una imagen 1:1

para un espacio menor cambiando la proporción

600px

600px

600px

400px

Page 35: ¿Cómo adapta WordPress las imágenes a su plantilla?

Si tenemos una imagen 1:1

para un espacio menor cambiando la proporción

Page 36: ¿Cómo adapta WordPress las imágenes a su plantilla?

6º CASO ¿Y si tengo una foto vertical muy grande, se puede achicar y poner en vertical?

Page 37: ¿Cómo adapta WordPress las imágenes a su plantilla?

1000 x 665

El principio es el mismo que en el primer caso

300 x 400

Page 38: ¿Cómo adapta WordPress las imágenes a su plantilla?

Wordpress buscará el centro y dimensionará desde ahí

pero también cortará lo que sobre… SIEMPRE

1000 x 665

300 x 400

Page 39: ¿Cómo adapta WordPress las imágenes a su plantilla?

Wordpress buscará el centro y dimensionará desde ahí

pero también cortará lo que sobre… SIEMPRE

1000 x 665

300 x 400

Page 40: ¿Cómo adapta WordPress las imágenes a su plantilla?

Wordpress buscará el centro y dimensionará desde ahí

pero también cortará lo que sobre… SIEMPRE

1000 x 665

600 x 400

300 x 400

Page 41: ¿Cómo adapta WordPress las imágenes a su plantilla?

Wordpress buscará el centro y dimensionará desde ahí

600 x 400

pero también cortará lo que sobre… SIEMPRE

1000 x 665

300 x 400

Page 42: ¿Cómo adapta WordPress las imágenes a su plantilla?

Wordpress buscará el centro y dimensionará desde ahí

pero también cortará lo que sobre… SIEMPRE

1000 x 665

Page 43: ¿Cómo adapta WordPress las imágenes a su plantilla?

WordPress nunca agrandará una imagen porque se pixelará…

50px

50px 525px

525px

La imagen original será menor que el tamaño requerido

Page 44: ¿Cómo adapta WordPress las imágenes a su plantilla?