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

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

Embed Size (px)

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.

Citation preview

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?