Dimensionamiento de imágenes instructivas: 13 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

¿Tiene problemas para ajustar el tamaño de las imágenes correctamente? ¿Sus imágenes tienen un tamaño demasiado grande y desbordan el marco como el de arriba? Este instructable intenta resumir lo que he aprendido para abordar este problema.

El personal de Instructable me ha dicho que todas las imágenes cargadas se duplican en varias relaciones de aspecto. Luego, este grupo de imágenes se extrae y se clasifica de manera diferente según el dispositivo desde el que esté viendo el instructable. No hay forma de especificar en el editor normal qué tamaño y proporción mostrar.

Luego sugirieron que "Otra opción que puede funcionar es si subes imágenes que tengan una relación de aspecto más tradicional. Cualquier valor entre 16: 9 y 4: 3 debería mostrarse muy bien".

Tenga en cuenta que dicen que esto "puede" funcionar. Esto es lo que encontré en mis luchas para que mis imágenes se muestren decentemente. (Tenga en cuenta que estoy usando imágenes de mi instructable "Rubik's cube made easy", ¡de ahí todas esas imágenes de cubos!)

La imagen de arriba tiene su tamaño original (600x195) que no se encuentra en ese rango de relaciones de aspecto tradicionales. Como puede ver, Instructables muestra esta imagen demasiado grande con los lados izquierdo y derecho cortados. Veamos qué podemos hacer para que esta imagen se muestre correctamente.

Paso 1: Probemos la relación de aspecto 16: 9

Así que probemos la relación de aspecto 16: 9 (ancho: alto). Mantendré el ancho original de 600 píxeles, 16: 9 significa que la altura debe ser de 338 píxeles, por lo que haremos un tamaño de lienzo de 600x338 y soltaremos esa imagen de 600x195 en él.

Así que veamos cómo se ve esta imagen de 600x338 (relación de aspecto 16: 9). Curiosamente, cuando coloqué esta imagen y obtuve una vista previa, encajó perfectamente: ¡los bordes izquierdo y derecho no se cortaron! Tomé una captura de pantalla solo como prueba, véalo en la siguiente diapositiva.

Pero, cuando veo esto en mi navegador (Chrome), lo que veo en la imagen de arriba es que los lados derecho e izquierdo están cortados nuevamente. Entonces, a partir de este experimento, parece que cambiar el tamaño a una relación de aspecto de 16: 9 no resolverá nuestros problemas.

Como nota al margen, 16: 9 es la "nueva" relación de aspecto común conocida como "pantalla ancha", mientras que 4: 3 es la "pantalla completa" de la vieja escuela que era común en los días de la televisión por tubo. Sí, los millennials probablemente no tienen ni idea de lo que estoy hablando.

Paso 2: Imagen 16: 9 recién cargada como se ve en la vista previa

Esta imagen es la captura de pantalla que muestra que nuestra imagen 16: 9 se ve perfecta en la Vista previa. Éxito, ¿verdad? Bueno, no tan rápido: ¡vea lo que sucede cuando realmente vemos esta página en nuestro navegador (Chrome)! ¡Los bordes izquierdo y derecho se truncan nuevamente! Simplemente regrese para dejar la diapositiva anterior y compruébelo usted mismo.

Lección aprendida: ¡no confíe en la vista previa! Lo que se ve bien en la Vista previa se representa de manera diferente en la visualización real con un navegador.

Además, sí, hay mucho espacio en blanco debajo de mi imagen. Eso es porque coloqué una imagen de 600x195 en un lienzo de 600x338 y la puse en la parte superior, por lo que hay todo ese espacio en blanco en la parte inferior. ¿Qué podemos hacer al respecto? Bueno … intentaremos abordar eso en una diapositiva posterior.

Así que continuemos viendo cómo podemos hacer que esta imagen se muestre en su totalidad.

Paso 3:16: 9 se muestra con los lados izquierdo y derecho cortados

Solo para que conste, en caso de que por alguna razón su navegador muestre estas imágenes 16: 9 perfectamente, esto es de lo que estoy hablando. Aquí hay una captura de pantalla de cómo veo mi imagen 16: 9 en el Paso 1 que se muestra después de "asentarme" después de la vista previa inicial: observe que la izquierda y la derecha están cortadas.

Si ves que mi imagen del Paso 1 se muestra perfectamente, bueno, genial. ¡Hágamelo saber! Pero así es como lo veo. Sí, es mucho mejor que la imagen original de la página del título, pero aún está cortada. Entonces, para mí, a pesar de los consejos del personal de Instructables, la relación de aspecto 16: 9 no es suficiente. Pasemos a la relación de aspecto 4: 3.

Paso 4: Probemos la relación de aspecto 4: 3

Probemos la relación de aspecto 4: 3. Mantendré el ancho original de 600 píxeles, 4: 3 significa que la altura debe ser de 450 píxeles, por lo que haremos un tamaño de lienzo de 600x450 y soltaremos esa imagen de 600x195 en él.

¿Cómo se ve esta imagen de 600x450 (relación de aspecto 4: 3)?

Nuevamente, cuando lo coloco por primera vez, la imagen se ve muy bien (excepto por todo el espacio en blanco en la parte inferior). Izquierda y Derecha se muestran bien. Mirándolo en un navegador, parece que Derecha e Izquierda siguen mostrándose bien.

Como se señaló anteriormente, todo ese espacio en blanco debajo de la imagen se debe a que dejé caer mi imagen de 600x195 en un lienzo de 600x450 y simplemente la coloqué en la parte superior.

Lección aprendida: parece que se requiere una relación de aspecto de 4: 3 para que los lados derecho e izquierdo no queden cortados. Desafortunadamente, esto significa que habrá mucho espacio en blanco para las imágenes cortas y anchas, porque tendrás que colocar esas imágenes en un lienzo de tamaño 4: 3. Sí, puede centrar su imagen para que haya el mismo espacio en blanco en la parte superior e inferior, pero independientemente, habrá una gran cantidad de espacio en blanco encima o debajo de su imagen, pero hasta donde yo sé, este es el compromiso que obtendrá. tienes que hacer en Instructables para que tus imágenes se vean intactas.

Paso 5: 4: 3 con imagen centrada

Aquí está la misma imagen de 600x195 colocada en un lienzo de 600x450 pero centrada para que haya el mismo espacio en blanco en la parte superior e inferior. Se ve un poco mejor, el texto no parece tan separado de la imagen.

Paso 6: 4: 3 con imagen en la parte inferior

Y, por último, aquí está la misma imagen que se colocó y se movió hacia la parte inferior. Ahora hay una tonelada de espacio en blanco en la parte superior de la imagen. La imagen ahora está realmente separada de la barra de título, pero está más cerca del texto. Estos son sus compromisos y lecciones aprendidas:

• 4: 3 parece ser la relación de aspecto que necesita usar para que las imágenes se muestren en su totalidad en Instructables.
• no confíe en la vista previa: puede mostrar su imagen perfectamente, pero las partes podrían estar truncadas en el navegador real

Paso 7: ¿Cuál es el ancho mínimo?

Ahora veamos cuál debería ser el ancho mínimo. La imagen que se muestra tiene un tamaño de 382x206, cercano a 2: 1, parece realmente enorme, ¿no? Obviamente, Instructables ha ampliado la imagen para que se ajuste a un ancho establecido, probablemente 640 píxeles, no estoy seguro.

Pero encaja porque es más "cuadrado", es decir, no es demasiado ancho para su altura. ¡Oh, espera, esa Vista previa me engañó de nuevo! En realidad, no encaja: los lados de R&L se truncan nuevamente.

En realidad, esto es extraño, no es solo la vista previa lo que está estropeado. De hecho, lo miré en el navegador y al principio se procesó correctamente (es decir, los bordes de R&L no se cortaron). Pero mirándolo a través del navegador nuevamente, ahora la imagen se está renderizando con un cambio de tamaño con los bordes de R&L truncados. Impar.

Intentemos hacer la imagen más pequeña. Reduciremos la imagen a 200x108, manteniendo la misma relación de aspecto 2: 1.

Paso 8: Reducir la imagen pero mantener la relación de aspecto

Así que cambio el tamaño de esa imagen a 200x108, manteniendo la misma relación de aspecto 2: 1.

Ahora, de nuevo, parece encajar al principio (¡con la resolución (calidad de imagen) muy deteriorada!) Pero, por supuesto, probablemente la estés mirando y no encaja en absoluto, y se ve exactamente como la imagen original, excepto que la original tiene mejor resolución. Nuevamente, Instructables está expandiendo la imagen para que se ajuste a un ancho establecido, por eso esta imagen más pequeña (200x108) se ve tan horrible, mucho peor que la original de 382x206.

Digo "probablemente" porque realmente no tengo idea de cómo Instructables muestra estas imágenes en su navegador. Por alguna razón, si actualizo mi caché y reviso este Instructable, los tamaños de mis imágenes no parecen ser consistentes, por lo que realmente no sé qué está haciendo Instructables, excepto que puede ser inconsistente. Por lo tanto, el objetivo de este Instructable: descubrir cómo cambiar el tamaño de las imágenes para que se muestren al menos de manera algo consistente.

Paso 9: prueba de que las imágenes se procesan correctamente al principio

Esto es lo que vi al principio inmediatamente después de subir la imagen: ¡encaja! (Tenga en cuenta que tuve que ajustar la captura de pantalla anterior en una imagen de 1600x1200 (es decir, una proporción de 4: 3) para que Instructables muestre la captura de pantalla completa).

Pero, por supuesto, sabes que cuando miras esa imagen un par de diapositivas hacia atrás ahora, ya no encaja. Veamos cuál debe ser el ancho mínimo para que encaje.

Paso 10: Probar 382x287 (relación 4: 3)

Mantuve el ancho de 382 y coloqué la imagen original de 382x206 en un lienzo de 382x287 para convertirla en una relación de aspecto de 4: 3 porque hemos descubierto anteriormente que Instructable necesita una imagen que se ajuste a esa relación de 4: 3 para mostrarla en su totalidad.

Así que ahora hay mucho espacio en blanco debajo. Encaja sin nada cortado, pero nuevamente se ha expandido para llenar un ancho establecido, por lo que la imagen no es nítida. Intentemos encontrar cuál es este ancho Instructable perfecto.

Paso 11: Ampliación de la imagen de 300x206 a 600x206 para ver si se muestra mejor

Dejé caer la imagen original de 382x206 (2: 1) en un lienzo de 600x206 (3: 1) solo para ver si ampliarla a 600 píxeles haría que Instructables mostrara la imagen completa. Nuevamente, al principio lo hizo, pero como puede ver ahora no lo hace.

Esto es lo realmente extraño: cada vez, cuando suelta una imagen por primera vez, parece que Instructables mostrará esa imagen correctamente, sin importar el tamaño o la relación de aspecto de esa imagen. Esta vez incluso me desconecté de Instructables y cerré esa pestaña, y luego volví a visitar este Instructable "fresco", por así decirlo, para verificar si la imagen todavía se mostraba correctamente. Por lo general, esto es suficiente para permitir que Instructable haga lo suyo y comience a cambiar el tamaño de las imágenes que no tienen una relación de aspecto de 4: 3 y mostrarlas con los lados izquierdo y derecho cortados.

Para mi sorpresa, las primeras veces que volví a visitar este Instructable "fresco", esta imagen permaneció mostrada en su totalidad, pero, lamentablemente, después de que me alejé para hacer otra cosa y llegué tal vez una hora más tarde, esta imagen comenzó a mostrarse. ampliada con los lados L&R truncados nuevamente tal como lo ve arriba.

¿Por qué o cómo sucede esto? No tengo idea. No tengo idea de por qué esperar un período de tiempo después de cargar una imagen haría que Instructables la renderizara de manera diferente, pero lo hace. Como prueba, mostraré mi captura de pantalla de la imagen de arriba mostrándose perfectamente en los primeros oh, 10-15 minutos después de que la cargué en la siguiente diapositiva.

Paso 12: prueba de que las imágenes se muestran correctamente al principio después de cargarlas

Aquí hay una captura de pantalla que muestra la imagen de 600x206 que se muestra en su totalidad inmediatamente después de la carga. Esta es una captura de pantalla de la diapositiva anterior. ¡Regrese a la diapositiva anterior y podrá ver lo mejorada que está la imagen ahora!

Tenga en cuenta que mi captura de pantalla tenía en realidad un tamaño de 1563x766, pero como aprendí de mis experimentos al comienzo de este Instructable, sabía que no se ajustaba a la relación de aspecto 4: 3 (1563x766 es aproximadamente 4: 2), así que si acaba de cargar esa captura de pantalla en su tamaño original. Instructable truncaría los bordes. Así que coloqué esa imagen en un lienzo de 4: 3, por eso hay muchos espacios en blanco vacíos debajo de mi captura de pantalla.

Tenga en cuenta que la captura de pantalla también se tomó antes de que cambiara el título del Paso 11 y terminara de escribir todo este texto en caso de que se lo esté preguntando.

Lección aprendida: ver la imagen cargada en un navegador inmediatamente después de cargarla no mostrará necesariamente cómo se mostrará en el futuro. Por alguna razón, casi cualquier imagen de tamaño y / o relación de aspecto parece mostrarse bien inmediatamente después de la carga, e incluso durante unos 10-15 minutos después de la carga e incluso después de cerrar la sesión de Instructables y verla desde una nueva sesión del navegador, etc..

¡Pero espere una hora o más y las cosas cambiarán! Su imagen, si no se ajusta a la relación de aspecto 4: 3, será ajustada (generalmente ampliada) por Instructable para que los bordes se trunquen.

Paso 13: Conclusión: lo que aprendí

Entonces, en resumen, ¿qué aprendí?

1. Para mostrar una imagen en su totalidad, es imprescindible mantener una relación de aspecto de 4: 3 (ancho: alto).

2. Utilice imágenes originales que sean grandes con la resolución más alta posible y colóquelas en un lienzo con una proporción de 4: 3. Si es demasiado grande, Instructables lo reducirá y tendrá imágenes agradables y nítidas.

3. Si su imagen es demasiado pequeña (mucho menos de 600 píxeles de ancho), Instructable expandirá su imagen y la hará al menos 600 píxeles de ancho, haciéndola menos nítida. Digo "ish" porque realmente no sé exactamente qué ancho está usando Instructable, pero parece cercano a 600. Probablemente sea 640, que era un ancho común en los días de los monitores de tubo de la vieja escuela.

600x450 y 640x480 son relaciones de aspecto de 4: 3. Todos los monitores de tubo de "pantalla completa" de la vieja escuela eran de 640x480 (ancho x alto).

4. ¿Qué hacer si su imagen original no tiene al menos 600 píxeles de ancho? Casi todo lo que puede hacer es colocarlo en un lienzo que se ajuste a la proporción 4: 3 que muestra su imagen cerca de su tamaño original. Si su imagen original es pequeña, habrá mucho espacio en blanco, así que intente centrar su imagen o coloque el espacio en blanco encima o debajo de su imagen y haga que se vea lo mejor que pueda.

Hasta donde yo sé, este es el compromiso que tendrá que hacer en Instructables para que sus imágenes se muestren intactas.

Como ejemplo, la imagen de arriba tiene un tamaño de lienzo de 600x450 con una imagen de 382x206 colocada en ella y centrada, por lo que tenemos el mismo espacio en blanco arriba y abajo. La imagen se muestra aproximadamente en su tamaño original, creo que Instructables podría expandirla a 640x480 (expansión insignificante), así que eso es lo mejor que podemos hacer con esa imagen original.

5. ¡NO confíe en la vista previa ni confíe en la apariencia de su imagen durante las primeras horas después de cargarla en Instructable! Por alguna razón, los tamaños de las imágenes no parecen ser consistentes hasta un par de horas después de subirlas.

Cada vez que colocas una imagen por primera vez, parece que Instructables mostrará esa imagen correctamente, sin importar el tamaño o la relación de aspecto de esa imagen. Incluso puede seguir mostrándose correctamente durante un período de tiempo después, pero NO SE DEJE ENGAÑAR porque eventualmente, cambiará su tamaño y le dará problemas a menos que siga la regla 4: 3.

Espero que esto ayude y, por favor, si encuentra una manera mejor o tiene alguna otra pista, ¡hágamelo saber!