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, vídeos y otros tipos de medios puede atraer a los visitantes, transmitir la información de forma más eficaz y crear una experiencia de usuario más dinámica.
-
Imágenes, iconos, 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 superar los 50 MB
Ten en cuenta que si tienes un plan de tienda nativa Elite, el límite de archivos aumenta a 20 000.
-
Vídeos: hasta 100 por sitio. Los archivos adicionales pueden generar un mensaje de error. Cada archivo no debe superar los 200 MB. Los archivos más grandes pueden generar un mensaje de error o no completarse la carga. Si se necesitan vídeos adicionales, YouTube o Vimeo pueden ser opciones posibles
-
No se admiten espacios en los nombres de los archivos. Se pueden cargar archivos que tengan espacios, aunque podrían provocar un comportamiento inesperado en el archivo.
-
[en] After you delete a file, its name may stay cached for a while. Give new uploads a different name, or you may see the error Name already exists, or the deleted file may keep showing.
-
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 agregas líneas de código. Varios archivos SVG complejos pueden añadir miles de líneas de código y hacer que tu sitio se cargue lentamente. Si necesitas usar varios iconos SVG en la misma página, te recomendamos convertir algunos de ellos en imágenes normales (.png, .jpeg, etc.) para evitar problemas de carga
-
No se pueden cargar archivos de ningún tipo a la carpeta raíz de un dominio.
-
Los metadatos de los archivos (incluidos los datos EXIF) no son compatibles y se eliminarán al cargarlos.
La relación de aspecto es la relación entre la anchura 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 vídeos). El tamaño del contenido multimedia no cambia necesariamente su relación de aspecto. Por ejemplo, tanto 1280x720 px como 3840x2160 px tienen
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 utilizará, puede parecer que está recortado. Según el widget o elemento, cambiar la relación de aspecto del archivo puede ser la mejor manera de solucionarlo. En el caso de las imágenes, el editor de imágenes incorporado se puede usar para cambiar la relación de aspecto recortándola. Si es necesario editar un vídeo, es necesario hacerlo con una herramienta externa
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 bajo demanda, adaptándolas al dispositivo que se utiliza 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 más pequeñas que la original. Por ejemplo, si subes una imagen con un ancho de 2000 píxeles pero se usa en un área que solo requiere 1920 píxeles, la imagen se optimizará a 1920 píxeles. Sin embargo, si subes una imagen con un ancho de 100 píxeles, no se optimizará y puede aparecer pixelada si
Si bien el editor puede optimizar imágenes de cualquier tamaño, se recomienda subir imágenes cercanas al tamaño máximo en el que aparecerán en el sitio. Por ejemplo, si la imagen va a ser una miniatura con un ancho de 160 píxeles, considera subir una imagen con un ancho máximo de
Además de la optimización, todas las imágenes del sitio se muestran en formato WebP. Este formato permite tamaños de archivo más pequeños y, al mismo tiempo, preserva la calidad de la imagen, lo que contribuye a un rendimiento más rápido del sitio sin sacrificar la claridad visual
Nota
Dudaoptimización de imágenes solo funciona en imágenes JPG y PNG. Si estás cargando un TIFF, GIF u otros formatos de imagen Duda es posible que no pueda optimizarlo.
La optimización se puede desactivar para las imágenes de fondo, el widget Imagen y el widget Galería fotográfica.
Para obtener más información, consulte los siguientes artículos:
Aviso
La desactivación de la optimización de imágenes podría afectar a la velocidad o el rendimiento de la página.
La relación de aspecto es la relación entre el atributo de ancho y alto de una imagen y se asocia esencialmente con la forma de la imagen. Una relación de aspecto de 16:9 puede ser una imagen de 16 x 9 px o una imagen de 1600 x 900 px. Básicamente es cualquier resolución de imagen que
Visualizació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 píxeles que la componen y es esencialmente el detalle y la claridad de la imagen.
Si bien las imágenes están optimizadas en su sitio, en realidad no cambian el tamaño del diseño de las imágenes de su sitio. Si utilizas una imagen en el escritorio con una relación de aspecto de 16:9, se verá perfecta en el escritorio, ya 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 parece
Para compensar, puedes usar la función de ocultación en el dispositivo para crear versiones específicas para esos dispositivos o puedes cambiar el tamaño 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 utilizará y de cómo desea que se muestre.
Si se va a utilizar una imagen con 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 contrario para el retrato,
Para las recomendaciones de tamaño, en general es mejor mantener el ancho de la imagen igual o ligeramente mayor que el tamaño optimizado. Por ejemplo, si la imagen se va a utilizar en un widget de imagen en el escritorio, el ancho máximo recomendado es de 1920 píxeles o solo un poco más. Las imágenes más grandes requieren una mayor optimización, lo que puede afectar a 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 abarque todo el ancho del sitio:
-
Relaciones de aspecto comunes para computadoras de escritorio: 16:9, 3:4
-
Tamaños de resolución comunes (px) para escritorio: 1600 x 900, 1280 x 720, 1280 x 960
Los dispositivos móviles suelen tener la relación de aspecto opuesta a la de los dispositivos de escritorio. Es posible que tengas que usar la función de ocultación en el dispositivo para mostrar correctamente los controles deslizantes móviles
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 hay pautas generales, no hay estándares fijos.
Widgets de galería y widgets que ofrecen diseños de galería
Estos widgets incluyen lo siguiente:
-
Galería de fotos
-
Galería de productos
-
Deslizador multimedia
-
third party store widgets de página
La relación de aspecto de las imágenes de estos widgets debe reflejar cómo quieres que se muestren.
-
Por ejemplo, las galerías de estilo cuadrado deben tener una proporción de imágenes de 1:1.
-
Las galerías de estilos de imágenes altas deben tener proporciones de altura más largas, como 2:5 o 200 píxeles por 500 píxeles.
-
Las proporciones de imagen deben ser las mismas para mantener la coherencia del diseño. Deja un poco de relleno en la imagen para usar el efecto de pasar el ratón y evitar que las imágenes se corten
-
Tamaños de resolución comunes (px): cualquier resolución, pero cuando sea posible no más de 1500 px para la velocidad de la página.
Todos los diseños disponibles vienen con proporciones de aspecto establecidas que no cambiarán, aunque las opciones de diseño con tamaños de imagen 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 proporciones de aspecto establecidas para los diseños de mosaico (las opciones con imágenes de diferentes tamaños) variarán según el diseño y el número de columnas establecido en la configuración de diseño.
Si bien el widget de la página de categorías ofrece una variedad para elegir, 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ías:
-
En el panel lateral, haga clic Almacenar.
-
Haga clic Páginas de tienda.
-
Haga clic Página de categoría (si la tienda no tiene categorías configuradas, la página aparecerá en gris y no estará disponible para editarla).
-
Haga clic con el botón derecho en el widget que muestra las categorías y seleccione Editar diseño.
-
Haga clic Productos.
-
Haga clic en la miniatura situada debajo Diseño para ver las opciones de diseño disponibles.
-
Para ver las relaciones de aspecto disponibles, desplázate hacia abajo en la sección Productos hasta la Relación de aspecto de la imagen opción.
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 partes de la imagen se corten. Sin embargo, algunos elementos incluyen una configuración que permite mostrar la imagen completa sin recortarla
|
Imagen original |
Imagen en el widget con una relación de aspecto predominante |
|---|---|
|
La relación de aspecto es 3:2 |
Por ejemplo, una 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 usar el Cubierta 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 proporciones de aspecto no coinciden, se cortarán partes de la imagen
Además, algunos elementos, como las filas y las secciones, se ajustan al tamaño de la pantalla del dispositivo. Como resultado, la relación de aspecto del elemento cambiará en función del tamaño de la pantalla que esté visualizando el sitio en ese momento.
Una técnica para evitar que la imagen se corte es utilizar el Imagen completa opción 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 antecedentes, consulte Fondos de elementos.
Algunos widgets ofrecen una configuración que permite mostrar la imagen completa sin recortarla.
Widgets que ofrecen la configuración para mostrar la imagen completa:
-
Imagen (en el Editor 2.0; en el Editor clásico, el widget siempre se ajustará a la relación de aspecto de la imagen)
-
Deslizador multimedia
-
Galería de fotos
El área total de una imagen no puede superar los 3.145.728 píxeles. Es poco probable que alguna de tus imágenes supere este límite, pero puedes comprobarlo rápidamente multiplicando el ancho en píxeles por la altura
Cada archivo no debe superar los 50 MB. Los archivos más grandes pueden generar un mensaje de error o no completarse la carga
Si subes una imagen que supere el límite, se pueden producir los siguientes errores:
-
Las imágenes no se suben.
-
Las imágenes se cargan, pero no se muestran las miniaturas del selector de imágenes.
-
Las imágenes no se cargan en el editor.
-
Las imágenes no se cargan en el sitio en vivo.
Se recomienda usar 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 imagen, por lo que incluso si el logotipo que subes es pequeño, no perderás calidad.
Nota
Los SVG son archivos de imagen que contienen código HTML, lo que significa que cuando agregas un ícono SVG a tu sitio también agregas líneas de código.
Pautas de tallas
El rango del ancho del logotipo cuando se incorpora en el encabezado o pie de página oscila entre 250 y 400 píxeles. Por lo general, la altura no es un problema y vendrá determinada por la relación de aspecto del logotipo
Subir la mayor resolución para su sitio garantiza que las imágenes de su sitio sean de alta resolución para sus clientes y clientes. Sin embargo, ten en cuenta que las imágenes grandes también tienen un efecto drástico en la velocidad de tu página. Dado que las imágenes de alta resolución se reducen, los usuarios normalmente no notan la diferencia de resolución. Es mejor subir imágenes que sean tan grandes como para las que se van a utilizar. Por ejemplo, si tienes una imagen de 300 x 300 píxeles en tu sitio, no querrás subirla como una imagen de 4000 x 4000 píxeles
Para optimizar el tamaño de las imágenes de tu sitio:
-
Sube solo imágenes del tamaño que vayan a ser utilizadas (por ejemplo, si la imagen va a tener un tamaño de 300 x 300 píxeles en el sitio, no la subas como una imagen de 4000 x 4000 píxeles).
-
El tamaño máximo de la imagen no puede superar los 3.145.728 píxeles.
-
Tenga en cuenta las relaciones de aspecto, ya que las imágenes de 16:9 se ven muy bien en el escritorio, pero parecen demasiado pequeñas en los dispositivos móviles. En este caso
-
Usa el Ocultar en el dispositivo función para crear versiones específicas de la imagen para cada dispositivo.
-
Cambie el tamaño de la imagen (relación de aspecto) para que quepan; los cambios de tamaño son independientes del dispositivo.
-
El área total de una imagen no puede superar los 3.145.728 píxeles. Es poco probable que alguna de tus imágenes supere este límite, pero puedes comprobarlo rápidamente multiplicando el ancho en píxeles por la altura
Nota
-
Para obtener información y directrices sobre los iconos de sitios, consulte Configuración de SEO del sitio.
-
Los archivos de iconos contribuyen al límite de 15 000 archivos.
El tipo de archivo SVG es el único tipo de archivo admitido en esta pestaña.
-
Relaciones de aspecto comunes: Por lo general, 1:1, pero cualquier relación de aspecto funcionará.
-
Tamaños de resolución comunes (px): 200 x 200, 80 x 80 o cualquier resolución. Los SVG pueden tener cualquier resolución.
Aviso
SVG son archivos de imagen que contienen código HTML, lo que significa que cuando agregas un ícono SVG a tu sitio también agregas líneas de código. Si tienes varios archivos SVG complejos, puedes añadir miles de líneas de código y provocar que tu sitio se cargue lentamente o que se rompa. Si necesitas usar varios iconos SVG en la misma página, te recomendamos convertir algunos de ellos en imágenes normales (.png, .jpeg, etc.) para evitar problemas de carga
Los vídeos se pueden alojar en los archivos del sitio subiéndolos al administrador multimedia o grabándolos directamente con la cámara y el micrófono del ordenador. Además, los vídeos de YouTube, Vimeo o Dailymotion se pueden añadir a partes específicas del sitio mediante el widget de vídeo o como fondo para los elementos compatibles con el vídeo. Estos vídeos externos solo estarán disponibles en la ubicación en la que se hayan añadido y no estarán disponibles en el editor
Nota
Se pueden subir hasta 100 vídeos por sitio. Los archivos adicionales pueden generar un mensaje de error. Cada archivo no debe superar los 200 MB. Los archivos más grandes pueden generar un mensaje de error o no completarse la carga. Si se necesitan vídeos adicionales, YouTube o Vimeo pueden ser opciones posibles
Para obtener información detallada sobre dónde y cómo se pueden incorporar los vídeos al sitio, consulte estos artículos:
-
Los vídeos pueden tardar tiempo y ancho de banda en cargarse, y pueden distraer a los usuarios de los enlaces o textos importantes de la página, así que usa los vídeos con moderación.
-
Los vídeos de YouTube no son compatibles con dispositivos móviles, ya que no se reproducen automáticamente en dispositivos iOS.
-
Los iPhones con batería en modo de bajo consumo no reproducirán automáticamente los vídeos de un sitio, sino que mostrarán un botón de reproducción.
-
Los vídeos de fondo no reproducirán sonido.
-
Cuando añadas un vídeo de Dailymotion que forme parte de una lista de reproducción, asegúrate de añadir solo el enlace directo al vídeo (y omite el parámetro de la lista de reproducción, que tiene un aspecto parecido al siguiente:? lista de reproducción=x1x2f3). Si la URL de tu vídeo tiene este parámetro, simplemente elimínalo. Por ejemplo:
https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2seríahttps://www.dailymotion.com/video/x60ktex
Puede haber varias causas por las que un vídeo no se sube. Estas son algunas técnicas para intentar solucionar problemas
-
Compruebe el tamaño del archivo para asegurarse de que es inferior a 200 MB.
-
Revisa los vídeos subidos actualmente para asegurarte de que hay menos de 100.
-
Prueba a subir un vídeo diferente.
-
Si se sube otro vídeo, es probable que esté relacionado con el archivo del vídeo. Crear un archivo nuevo a partir de la fuente original puede solucionarlo.
-
Si no se sube otro vídeo, puede estar relacionado con algo local en tu ordenador, por ejemplo, con la velocidad de la página o con el navegador. Si es local en tu ordenador, algunas técnicas que puedes probar son las siguientes:
-
Borrar la memoria caché del navegador
-
Probar con otro navegador
-
Probando con una red diferente
-
Reiniciar el ordenador
-
-
Nota
Los archivos de audio contribuyen al límite de 15 000 archivos.
audio se puede alojar en los archivos del sitio subiéndolos al administrador multimedia o grabándolos directamente con el micrófono del ordenador. Además, el audio de SoundCloud o Mixcloud se puede añadir a partes específicas del sitio mediante el widget de audio. El audio externo solo estará disponible en la ubicación donde se agrega y no estará disponible en el editor
Para obtener más información sobre cómo incorporar audio en un sitio, consulte Widget de audio.
Nota
-
Los archivos de la pestaña de archivos del gestor multimedia contribuyen al límite de 15 000 archivos.
-
No puedes subir archivos a tu carpeta raíz.
La pestaña de archivos del gestor multimedia admite casi cualquier tipo de archivo. Los archivos cargados aquí se pueden vincular mediante el selector de enlaces, pero no se pueden usar directamente en ningún widget (para obtener más información sobre el selector de enlaces, consulte Selector de enlaces). Por ejemplo, una imagen cargada en esta pestaña no estará disponible para su uso con ningún widget de imagen.
Los nombres de los archivos pueden permanecer en caché durante un tiempo. Si un archivo con el mismo nombre se ha eliminado recientemente, es probable que siga en la memoria caché y tendrás que usar un nombre diferente
se haya eliminado recientemente un archivo con el mismo nombre. Los nombres de los archivos pueden permanecer en caché durante un tiempo. Sería necesario cambiar el nombre del archivo
Para cambiar el nombre de un archivo, abra el Gestor multimedia, seleccione el archivo y haga clic Cambie el nombre. Si utilizas una biblioteca o un selector, activa Administrar opción para la biblioteca o el selector.
Es probable que esto se deba a un archivo existente con el mismo nombre o a uno eliminado recientemente. Los nombres de los archivos pueden permanecer en caché durante un tiempo, por lo que cambiar el nombre del archivo puede ser la mejor opción si se produce este problema
Para cambiar el nombre de un archivo, abra el Gestor multimedia, seleccione el archivo y haga clic Cambie el nombre. Si utilizas una biblioteca o un selector, activa Administrar opción para la biblioteca o el selector.
[en] Delete the file from the Media Manager, or from a library or picker with the Manage option turned on. The file is removed from your site's media right away.
[en] If someone already has the file's direct link, they may still be able to open it for a while, because copies of the file can stay cached. There's no set time frame for how long.