45. ¿En qué tamaño tengo que subir la imagen de una categoría?
La imagen de las categorías no se puede ajustar en apariencia. No dispone de ningún ajuste. Informamos que se pueden subir mas de una imagen por categoría. A la que hacemos referencia es a la que se muestra por defecto. De moemto s la única que se puede mostrar en la vista pública.
Respecto al tamaño orientativo y proporcional a subir es de 1043 px de ancho x 200 px de alto.
Lo consideramos orientativo ya que dependerá de ajustes como por ejemplo; si se muestra o no el navegador lateral y cuanto espacio de ancho se ha decidido que ocupe, O por ejemplo; si el ancho del contenido de la página está establecido en compacto o en ancho completo.
Se recomienda inspeccionar imagen con el inspector de código del navegador para consultar el:
1. Rendered Size (Tamaño renderizado)
-
Qué es:
Es el tamaño en píxeles con el que la imagen se está mostrando en la página web en tu pantalla, después de aplicarle cualquier ajuste de estilo (CSS), resolución de pantalla, y escala de visualización. -
Por qué es importante:
A veces, la imagen original (su tamaño natural) puede ser mucho más grande o más pequeña de lo que se muestra en la página. Esto afecta el rendimiento de la web:- Si la imagen cargada es más grande que el tamaño renderizado, estás gastando ancho de banda innecesariamente.
- Si la imagen es más pequeña que el tamaño renderizado, puede verse pixelada o distorsionada.
-
Ejemplo:
- Tamaño original de la imagen: 1200x800 píxeles.
- Tamaño renderizado: 600x400 píxeles.
Esto significa que la imagen se está mostrando a la mitad de su tamaño real.
2. Rendered Aspect Ratio (Relación de aspecto renderizada)
-
Qué es:
Es la proporción entre el ancho y el alto de la imagen tal y como se muestra en la página web. Representa cómo el navegador ajusta la imagen para que se vea en pantalla. -
Por qué es importante:
El aspecto de la imagen puede cambiar si no se respeta la relación entre ancho y alto originales, lo que puede causar distorsión o que partes de la imagen no se vean:- Si el navegador estira o comprime la imagen para ajustarse a un tamaño diferente, se altera el aspecto visual.
- Mantener la proporción correcta asegura que la imagen se vea como debería, sin deformaciones.
- En Wakaprint no la distorsiona. Si no es proporcional la escalará y no mostrará partes de la imagen.
-
Ejemplo:
- Una imagen original de 1200x800 píxeles tiene una relación de aspecto natural de 3:2.
- Si el navegador la muestra como 900x600 píxeles, la relación de aspecto sigue siendo 3:2 y la imagen se verá bien.
- Pero si el navegador la muestra como 900x700 píxeles, la relación cambia a 9:7, causando que la imagen se distorsione.
¿Dónde ves estos datos en Chrome?
- Haz clic derecho sobre una imagen y selecciona "Inspeccionar".
- Busca la pestaña "Elements" y selecciona el código HTML de la imagen (
<img>). - Verás un tooltip flotante que muestra algo como:
- Natural Size: Tamaño real de la imagen (por ejemplo, 1200x800).
- Rendered Size: Tamaño con el que se está mostrando (por ejemplo, 600x400).
- Rendered Aspect Ratio: Proporción del tamaño mostrado (por ejemplo, 3:2).
Resumen: Por qué son importantes
- Rendered Size es una ayuda para asegurarse de que las imágenes estén optimizadas: que el tamaño de archivo no sea más grande de lo necesario.
- Rendered Aspect Ratio garantiza que la imagen mantenga su proporción original y no se distorsione al ajustarse al diseño de la página.
Ejemplos de imágenes subidas a categoría y visualización en vista pública. La establecida por defecto es la que tiene el marco azul turquesa.
Ejemplo 1. Imagen subida en tamaño 1043 px ancho x 200 px de alto. En 72 ppp de resolución. Calidad alta.
La imagen en tamaño 1043 px ancho x 200 px de alto vista en la categoría del lado del cliente. Con ajuste de contenido de página en modo compacto.
________________________________________________________________
Ejemplo 2. Imagen subida en tamaño 1103 px ancho x 618 px de alto. En 72 ppp de resolución. Calidad alta.
La imagen 1103 px ancho x 618 px de alto vista en la categoría del lado del cliente. Con ajuste de contenido de página en modo compacto.
________________________________________________________________
Ejemplo 3. Imagen subida en tamaño 1103 px ancho x 618 px de alto. En 72 ppp de resolución. Calidad alta.
La imagen 1103 px ancho x 411 px de alto vista en la categoría del lado del cliente. Con ajuste de contenido de página en modo compacto.
________________________________________________________________
Ejemplo 4. Imagen subida en tamaño 1200 px ancho x 234 px de alto. En 72 ppp de resolución. Calidad alta.
La imagen 1200 px ancho x 234 px de alto vista en la categoría del lado del cliente. Con ajuste de contenido de página en modo compacto.
