Los medios juegan un papel crucial a la hora de mejorar el atractivo visual y la eficacia de su sitio web. El uso adecuado de imágenes, videos y otros tipos de medios puede atraer a los visitantes, transmitir información de forma más efectiva y crear una experiencia de usuario más dinámica.
-
Cualquier archivo (texto, imagen, video, audio) que se cargue en el sistema estará disponible de forma pública. No se deberá cargar información personal ni confidencial. Para eliminar el archivo por completo, elimine el archivo desde el Administrador de medios.
-
Imágenes, íconos, clips de audio y archivos: hasta 15 000 imágenes, clips de audio y archivos combinados por sitio. Los archivos adicionales pueden generar un mensaje de error. Cada archivo no debe tener más de 50 MB.
-
Videos: hasta 100 por sitio. Los archivos adicionales pueden generar un mensaje de error. Cada archivo no debe tener más de 200 MB. Los archivos de mayor tamaño pueden generar un mensaje de error o no completar la carga. Si se necesitan videos adicionales, YouTube o Vimeo pueden ser posibles opciones.
-
No se admiten espacios dentro de los nombres de archivos. Se pueden cargar archivos que tengan espacios, aunque podría generar un comportamiento inesperado con el archivo.
-
Los archivos y sus nombres pueden almacenar en caché por un tiempo. Si se elimina un archivo, es probable que permanezca disponible durante algún tiempo. Esto incluye el nombre del archivo, lo que significa que puede aparecer el error "El nombre ya existe" al intentar emplear el nombre de un archivo eliminado recientemente.
-
Debido al almacenamiento en caché, no se recomienda cargar un archivo con el mismo nombre que un archivo eliminado recientemente, ya que el archivo eliminado puede seguir apareciendo durante algún tiempo.
-
Tipo de archivo SVG: Los SVG son archivos de imagen que contienen código HTML, lo que significa que cuando agregas un icono SVG a tu sitio también estás agregando líneas de código. Múltiples SVG complejos pueden agregar miles de líneas de código y hacer que su sitio se cargue lentamente. Si necesita emplear varios íconos SVG en la misma página, le recomendamos convertir algunos de ellos en imágenes normales (.png, .jpeg, etc) para evitar problemas de carga o funcionalidad.
-
No se pueden cargar archivos de ningún tipo a la carpeta raíz de un dominio.
-
Los metadatos de archivo (incluidos los datos EXIF) no son compatibles y se eliminarán al cargarlos.
La relación de aspecto es la relación entre el ancho y la altura de los medios y representa el valor numérico de su forma (normalmente, la relación de aspecto es más importante en imágenes y videos). El tamaño del medio no cambia necesariamente su relación de aspecto. Por ejemplo, tanto 1280x720px como 3840x2160px tienen la misma relación de aspecto de 16:9.
Si la relación de aspecto de un archivo multimedia es significativamente diferente a la forma de la sección o elemento en el que se empleará, puede parecer cortado. Dependiendo del widget o elemento, cambiar la relación de aspecto del archivo puede ser la mejor manera de solucionarlo. Para las imágenes, se puede emplear el Editor de imágenes incorporado para cambiar la relación de aspecto recortándolas. Si un video necesita ser editado, tendría que hacer con un toolexterno.
Nota
-
El límite de tamaño de archivo es de 50 MB por imagen.
-
Los archivos de imagen contribuyen al límite de 15 000 archivos.
Se admiten los siguientes tipos de archivos de imagen:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
El editor optimiza las imágenes según demanda, adaptándolas al dispositivo empleado y al tamaño visible en el sitio.
Tenga en cuenta que el tamaño de la imagen cargada nunca aumenta y solo se optimizan las imágenes que se muestran en el sitio que son más pequeñas que las originales. Por ejemplo, si carga una imagen con un ancho de 2000 px pero se usa en un área que requiere solo 1920 px, la imagen se optimizará a 1920 px. Sin embargo, si carga una imagen con un ancho de 100 px, no estará optimizada y puede aparecer pixelada si se muestra en un área más grande.
Si bien el editor puede optimizar imágenes de cualquier tamaño, se recomienda cargar imágenes cercanas al tamaño máximo en que aparecerán en el sitio. Por ejemplo, si la imagen será una miniatura con un ancho de 160 px, considere cargar una imagen con un ancho máximo de alrededor de 200 px.
Además de la optimización, todas las imágenes del sitio se sirven en formato WebP. Este formato permite tamaños de archivo más pequeños y preserva la calidad de la imagen, lo que contribuye a un rendimiento más rápido del sitio sin sacrificar la claridad visual.
Nota
La optimización de imágenes de IONOS solo funciona en imágenes JPG y PNG. Si está cargando un archivo TIFF, GIF u otro formato de imagen, es posible que IONOS no pueda optimizarlo.
La relación de aspecto es la relación entre los atributos de ancho y alto de una imagen y está asociada esencialmente con la forma de la imagen. Una relación de aspecto de 16:9 puede ser una imagen de 16x9 px o una imagen de 1600x900 px. Es básicamente cualquier resolución de imagen que tenga una relación de 16:9.
Representación de las dos relaciones de aspecto más comunes:
La resolución de una imagen se refiere a la cantidad de detalles que contiene una imagen, específicamente la cantidad de pixeles que componen la imagen y es esencialmente el detalle y la claridad de la imagen.
Aunque las imágenes están optimizadas en su sitio, realmente no cambia el tamaño del diseño de esas imágenes en su sitio. Si utiliza una imagen en un PC que tiene una relación de aspecto de 16:9, lucirá perfecta en el PC debido a que el dispositivo de escritorio es ancho. Sin embargo, un dispositivo móvil es mucho más pequeño, por lo que una relación de aspecto de 16:9 a veces lucirá pequeña.
Para compensar, puede usar la función ocultar en el dispositivo para crear versiones específicas para esos dispositivos o puede cambiar el tamaño de las dimensiones de la imagen en el área de diseño del widget. Los cambios de tamaño son independientes del dispositivo para la mayoría de los elementos.
La relación de aspecto recomendada depende de dónde se empleará y cómo desea que se muestre.
Si se va a emplear una imagen en orientación horizontal, un ejemplo de relación recomendada podría ser 16:9, ya que esto indicaría que será más ancha que alta. Sería lo opuesto para el retrato, 9:16.
Para las recomendaciones de tamaño, en general es mejor mantener el ancho de la imagen igual o ligeramente más grande que el tamaño optimizado. Por ejemplo, si la imagen se empleará en una imagen widget en desktop, el ancho máximo recomendado es de 1920 px o solo un poco más grande. Las imágenes más grandes requieren más optimización, lo que puede afectar la calidad de la imagen. Si la optimización está desactivada, las imágenes más grandes no perderán calidad, pero ralentizarán el sitio debido a su tamaño.
Proporciones y tamaños comunes
Cuando una imagen ocupará todo el ancho del sitio:
-
Relaciones de aspecto comunes para desktop: 16:9, 3:4
-
Tamaños de resolución comunes (px) para desktop: 1600x900, 1280x720, 1280x960
Los dispositivos móviles a menudo tienen la relación de aspecto opuesta en comparación con los dispositivos de escritorio. Es posible que deba usar la función para ocultar en el dispositivo para mostrar los controles deslizantes móviles correctamente.
La relación de aspecto y el tamaño de la imagen de un widget pueden variar en función del tamaño, la ubicación y la configuración del widget. Si bien existen pautas generales, no hay estándares fijos.
Galería widget y widget que ofrecen diseños de galería
Entre estos widget se incluyen los siguientes:
-
Galería de fotos
-
Galería de productos
-
Carrusel de archivos
-
Página de store de terceros widget
La relación de aspecto de las imágenes en estos widget debe reflejar cómo desea que se muestren.
-
Por ejemplo, galerías de estilo cuadrado deberían tener una relación de imágenes de 1:1.
-
Las galerías de estilo de imágenes altas deben tener relaciones de aspecto de mayor altura, como 2:5 o 200 px por 500 px.
-
Las relaciones de aspecto de las imágenes deberían ser las mismas para mantener la coherencia en el diseño. Deje cierto relleno en la imagen para usar el efecto 'hover', de forma que sus imágenes no queden cortadas.
-
Tamaños de resolución comunes (px): cualquier resolución, pero cuando sea posible no mayor a 1500px para la velocidad de la página.
Todos los diseños disponibles vienen con relaciones de aspecto establecidas que no cambiarán, aunque las opciones de diseño con tamaños de imágenes uniformes tienen la opción en la configuración de diseño de cambiar la altura. Cuando se cambia la altura de estos diseños, las relaciones de aspecto cambiarán en función del tamaño del widget.
Las relaciones de aspecto establecidas para los diseños de mosaico (las opciones con imágenes de distintos tamaños) variarán según el diseño, así como también la cantidad de columnas establecido en la configuración de diseño.
Mientras que el widget de la página de la categoría ofrece una variedad para seleccionar, la imagen de la página del producto tiene una relación de aspecto de 1:1.
Para ver las opciones disponibles para el widget en la página de categoría:
-
En el panel lateral, haga clic en Vender en línea.
-
Haga clic enstore páginas.
-
Haga clic en Página de categorías (si el store no tiene categorías configuradas, la página aparecerá atenuada y no estará disponible para editar).
-
Haga clic con el botón derecho en el widget que muestra las categorías y seleccione Editar diseño.
-
Haga clic en Productos.
-
Haga clic en la miniatura debajo de Diseño para ver las opciones de diseño disponibles.
-
Para ver las relaciones de aspecto disponibles, desplazar hacia abajo en la sección Productos hasta la opción Relación de aspecto de la imagen .
De forma predeterminada, la relación de aspecto de la mayoría de los elementos anulará la relación de aspecto de la imagen, lo que provocará que se corten partes de la imagen. Sin embargo, algunos elementos incluyen una configuración que permite mostrar la imagen completa sin recortarla.
|
Imagen original |
Imagen en widget con relación de aspecto primordial |
|---|---|
|
La relación de aspecto es 3:2 |
Un ejemplo de relación de aspecto posible podría ser 3:1 (solo la parte de la imagen que no está cubierta por los cuadros blancos). |
Al emplear la opción Portada en la configuración de diseño del elemento, la relación de aspecto del elemento anulará la relación de aspecto de la imagen. Si las relaciones de aspecto no coinciden, se cortarán partes de la imagen.
Además, algunos elementos, como filas y secciones, se ajustan al tamaño de la pantalla del dispositivo. Como resultado, la relación de aspecto del elemento cambiará según el tamaño de la pantalla que esté visualizando el sitio en ese momento.
Una técnica para evitar que la imagen quede cortada es emplear la opción Imagen completa en la configuración de diseño del elemento. Tenga en cuenta que no todos los elementos tendrán esta opción.
Para obtener más información sobre los fondos, consulte Fondos de elementos.
El área total de una imagen no puede exceder 3,145,728 píxeles. Es improbable que cualquiera de sus imágenes supere este límite, pero puede verificarlo rápidamente multiplicando la anchura por la altura de píxeles.
Cada archivo no debe tener más de 50 MB. Los archivos de mayor tamaño pueden generar un mensaje de error o no completar la carga.
Cargar una imagen superior al límite podría provocar uno de los siguientes errores:
-
Las imágenes no se cargan.
-
Las imágenes se cargan, pero las vistas en miniatura del selector de imágenes no aparecen.
-
Las imágenes no se cargan en el editor.
-
Las imágenes no se cargan en el sitio en vivo.
Se recomienda que use el formato SVG para las imágenes de logotipos, ya que los archivos SVG no están optimizados de la misma manera que otros archivos de imágenes, por lo que, aunque el logotipo que cargue sea pequeño, no perderá calidad.
Nota
Los SVG son archivos de imágenes que contienen código HTML, lo que significa que cuando usted agrega un icono de SVG a su sitio, también está agregando líneas de código.
Pautas de tallas
El rango del ancho del logotipo cuando se incorpora al encabezado o pie de página es entre 250 px y 400 px. Por lo general, la altura no es una preocupación y estará determinada por la relación de aspecto del logotipo.
Cargar la mayor resolución para su sitio garantizará que las imágenes de su sitio sean de alta resolución para sus clientes y usuarios. Sin embargo, es bueno tener en cuenta que las imágenes grandes también tienen un efecto drástico en la velocidad de su página. Debido a que la escala de las imágenes de alta resolución se reduce, los usuarios normalmente no notan la diferencia de resolución. Es mejor cargar imágenes cuyo tamaño corresponda al uso esperado. Por ejemplo, si tiene una fotografía de 300 px por 300 px en su sitio, no le conviene cargarla como una imagen de 4000 px por 4000 px.
Para optimizar los tamaños de imagen en su sitio:
-
Solo cargue imágenes del tamaño en que se pretende emplear (por ejemplo, si la imagen va a aparecer en el sitio como 300 px por 300 px, no la cargue como una imagen de 4000 px por 4000 px).
-
El tamaño máximo de la imagen no puede superar los 3.145.728 pixeles.
-
Tenga en cuenta las relaciones de aspecto, ya que las imágenes 16:9 se ven muy bien en el escritorio, pero parecen demasiado pequeñas en el móvil. En este caso:
-
Emplee la función Ocultar en el dispositivo para crear versiones específicas de la imagen para cada dispositivo.
-
Cambie el tamaño de la imagen (relación de aspecto) para que se ajuste: los cambios de tamaño son independientes del dispositivo.
-
Nota
-
Para obtener información y directrices sobre los iconos del sitio que se pueden encontrar en el área SEO y configuración del editor, consulte Configuración de SEO del sitio.
-
Los archivos de iconos contribuyen al límite de archivos de 15 000.
El tipo de archivo SVG es el único tipo de archivo compatible con esta pestaña.
-
Relaciones de aspecto comunes: Generalmente 1:1, pero cualquier relación de aspecto servirá.
-
Tamaños de resolución comunes (px): 200x200, 80x80 o cualquier resolución. Los SVG pueden tener cualquier resolución.
Advertencia
Los SVG son archivos de imagen que contienen código HTML, lo que significa que cuando agregas un icono SVG a tu sitio también estás agregando líneas de código. Múltiples SVG complejos pueden agregar miles de líneas de código y hacer que su sitio se cargue lentamente o potencialmente se rompa. Si necesita emplear varios íconos SVG en la misma página, le recomendamos convertir algunos de ellos en imágenes normales (.png, .jpeg, etc) para evitar problemas de carga o funcionalidad.
Los videos se pueden alojar en los archivos del sitio cargándolos al administrador de medios o grabándolos directamente usando la cámara y el micrófono de su computadora. Además, los videos de YouTube, Vimeo o Dailymotion se pueden agregar a partes específicas del sitio usando el widget de video o como fondo para elementos que admiten video. Estos videos externos solo estarán disponibles en la ubicación donde se agreguen y no estarán disponibles en el editor.
Nota
Se pueden cargar hasta 100 videos por sitio. Los archivos adicionales pueden generar un mensaje de error. Cada archivo no debe tener más de 200 MB. Los archivos de mayor tamaño pueden generar un mensaje de error o no completar la carga. Si se necesitan videos adicionales, YouTube o Vimeo pueden ser posibles opciones.
-
Los videos pueden tomar tiempo y ancho de banda para cargar y pueden distraer a los usuarios de enlaces o texto importantes de su página, así que úselos con moderación.
-
Los videos de YouTube no son compatibles con dispositivos móviles, ya que no se reproducen de forma automática en dispositivos iOS.
-
Los iPhone con batería en modo de baja potencia no reproducen automáticamente videos en un sitio y, en su lugar, mostrarán un botón de reproducción.
-
Los videos de fondo no reproducirán sonidos.
-
Cuando agregue un video de Dailymotion que forma parte de una lista de reproducción, asegúrese de agregar solo el enlace directo al video (y omita el parámetro de la lista de reproducción, que se parece a esto:?playlist-x1x2f3). Si el URL del video tiene este parámetro, bórrelo. Por ejemplo: https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 sería https://www.dailymotion.com/video/x60ktex
Podría haber varias causas por las cuales un video no se carga. A continuación se muestran algunas técnicas que puede probar y solucionar problemas:
-
Verifique el tamaño del archivo para cerciorar de que sea inferior a 200 MB.
-
Revise los videos actuales cargados para cerciorar de que haya menos de 100.
-
Intente subir un video diferente.
-
Si se carga otro video, es probable que esté relacionado con el archivo del video. Crear un nuevo archivo desde la fuente original puede solucionar el problema.
-
Si otro video no se carga, puede estar relacionado con algo local de tu computadora, por ejemplo, la velocidad de la página o el navegador. Si es local en tu computadora, algunas técnicas que puedes probar podrían ser:
-
Borrar el caché del navegador
-
Probar un navegador diferente
-
Probando una red diferente
-
Resetear su computadora
-
-
Nota
Los archivos de audio contribuyen al límite de 15 000 archivos.
El audio se puede alojar en los archivos del sitio cargándolos al administrador de medios o grabándolos directamente usando el micrófono de su computadora. Además, el audio de SoundCloud o Mixcloud se puede agregar a partes específicas del sitio usando el widget de audio. El audio externo solo estará disponible en la ubicación donde se agregue y no estará disponible en el editor.
Para obtener más información sobre cómo incorporar audio en un sitio, consulte Audio widget.
Nota
-
Los archivos en la pestaña de archivos del administrador de medios contribuyen al límite de 15 000 archivos.
-
No puede subir archivos a su carpeta raíz.
La pestaña de archivos del administrador de medios admite casi cualquier tipo de archivo. Los archivos cargados aquí se pueden vincular usando el selector de enlaces, pero no se pueden usar directamente en ningún widget. Por ejemplo, una imagen cargada en esta pestaña no estará disponible para su uso con ningún widget de imagen.
Los nombres de archivos pueden permanecer almacenados en caché por un tiempo. Si se eliminó recientemente un archivo con el mismo nombre, es probable que aún esté en caché y deberá usar un nombre diferente.
Es posible que se eliminó recientemente un archivo con el mismo nombre. Los nombres de archivos pueden permanecer almacenados en caché por un tiempo. Habría que cambiar el nombre del archivo.
Para cambiar el nombre de un archivo, abra el Administrador de medios, seleccione el archivo y haga clic en Cambiar nombre. Si usa una biblioteca o un selector, active la opción Gestionar para la biblioteca o el selector.
Es probable que esto se deba a que existe un archivo con el mismo nombre o a uno eliminado recientemente. Los nombres de archivos pueden permanecer almacenados en caché por un tiempo, por lo que cambiar el nombre del archivo puede ser la mejor opción si encuentra este problema.
Para cambiar el nombre de un archivo, abra el Administrador de medios, seleccione el archivo y haga clic en Cambiar nombre. Si usa una biblioteca o un selector, active la opción Gestionar para la biblioteca o el selector.