Los medios de comunicación juegan un papel crucial en la mejora del 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 manera 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, iconos, clips de audio y archivos: hasta 15.000 imágenes, clips de audio y archivos combinados por sitio. Los archivos adicionales pueden dar lugar a un mensaje de error. Cada archivo no debe tener más de 50 MB.
-
Videos: hasta 100 por sitio. Los archivos adicionales pueden dar lugar a un mensaje de error. Cada archivo no debe tener más de 200 MB. Los archivos más grandes pueden dar lugar a un mensaje de error o a que no se completaron la carga. Si se necesitan videos adicionales, YouTube o Vimeo pueden ser opciones posibles.
-
No se admiten espacios dentro de los nombres de archivo. Se pueden cargar archivos que tengan espacios, aunque podría dar lugar a un comportamiento inesperado con el archivo.
-
Los archivos y sus nombres pueden almacenar en caché durante 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 encontrar el error "El nombre ya existe" al intentar usar 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 tu sitio se cargue lentamente. Si necesitas usar varios iconos SVG en la misma página, te recomendamos que conviertas algunos de ellos en imágenes normales (.png, .jpeg, etc) para evitar problemas de carga o funcionalidad.
-
Los archivos de cualquier tipo no se pueden cargar en 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 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 videos). El tamaño de los medios 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 de la forma de la sección o elemento en el que se empleará, puede parecer que está 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, el editor de imágenes incorporado se puede usar para cambiar la relación de aspecto recortándola. 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 bajo demanda, adaptándolas al dispositivo que se emplea y al tamaño visible en el sitio.
Tenga en cuenta que el tamaño de la imagen cargada nunca se 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 px pero se emplea en un área que solo requiere 1920 px, la imagen se optimizará a 1920 px. Sin embargo, si subes una imagen con un ancho de 100 px, no se optimizará 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 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 al tiempo que conserva 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 Duda solo funciona en imágenes JPG y PNG. Si está cargando un TIFF, GIF u otros formatos de imagen, es posible que Duda 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:
Advertencia
Desactivar la optimización de imágenes podría afectar 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 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 el número 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 vaya a emplear y de cómo quiera 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 mayor 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 a la calidad de la imagen. Si la optimización está desactivada, las imágenes más grandes no se verán afectadas en calidad, pero ralentizarán el sitio debido a su tamaño.
Proporciones y tamaños comunes
Cuándo una imagen abarcará 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ías widget y widget que ofrecen diseños de galería
Estos widgets incluyen lo siguiente:
-
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 superior a 1500 px para la velocidad de 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 imagen uniformes tienen la opción en la configuración de diseño para 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 las imágenes tienen diferentes tamaños) variarán según el diseño, así como el número de columnas establecido en la configuración del 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á en gris 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 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 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 ser recortada.
|
Imagen original |
Imagen en widget con relación de aspecto primordial |
|---|---|
|
La relación de aspecto es de 3:2 |
Ejemplo: la posible relación de aspecto podría ser 3:1 (solo la parte de la imagen que no está cubierta por los cuadros blancos) |
Al usar 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á en función del tamaño de la pantalla que esté visualizando el sitio.
Una técnica para evitar que la imagen se corte es usar 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.
Algunos widget ofrecen una configuración que permite mostrar la imagen completa sin recortarla.
widgetque ofrecen la configuración para mostrar la imagen completa:
-
Imagen (en el Editor 2.0; en el Editor Tradicional, el widget siempre se adherirá a la relación de aspecto de las imágenes)
-
Carrusel de archivos
-
Galería de fotos
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 más grandes pueden dar lugar a un mensaje de error o a que no se completaron 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 tamaño
El rango para el ancho del logotipo cuando se incorpora en el encabezado o pie de página está 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:
-
Cargue solo imágenes tan grandes como estén destinadas a ser empleadas (por ejemplo, si la imagen va a aparecer como 300 px por 300 px en el sitio, 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 dispositivo para crear versiones específicas de la imagen para cada dispositivo.
-
Cambie el tamaño de las dimensiones de la imagen (relación de aspecto) para ajustarlas: 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 archivo de límite 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 ícono SVG a tu sitio también estás agregando líneas de código. Varios SVG complejos pueden agregar miles de líneas de código y provocar que su sitio se cargue lentamente o potencialmente se bloquee. 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 en el administrador de medios o grabándolos directamente con 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 subir hasta 100 videos por sitio. Los archivos adicionales pueden dar lugar a un mensaje de error. Cada archivo no debe tener más de 200 MB. Los archivos más grandes pueden dar lugar a un mensaje de error o a que no se completaron la carga. Si se necesitan videos adicionales, YouTube o Vimeo pueden ser opciones posibles.
Para obtener información detallada sobre dónde y cómo se pueden incorporar videos en el sitio, consulte estos artículos:
-
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
Puede haber varias causas por las que un video no se carga. Estas son algunas técnicas para intentar solucionar problemas:
-
Verifique el tamaño del archivo para cerciorar de que sea inferior a 200 MB.
-
Revisa los videos subidos actualmente para cerciorarte de que haya menos de 100.
-
Intenta subir un video diferente.
-
Si se sube otro video, es probable que esté relacionado con el archivo del video. La creación de un nuevo archivo a partir de la fuente original puede solucionarlo.
-
Si otro video no se carga, puede estar relacionado con algo local de su computadora, por ejemplo, la velocidad de la página o el navegador. Si es local en su computadora, algunas técnicas para probar podrían ser:
-
Borrar el caché del navegador
-
Probar con un navegador diferente
-
Probar una red diferente
-
Resetear el equipo
-
-
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 en el administrador de medios o grabando directamente con 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 de la pestaña de archivos del administrador de medios contribuyen al archivo de límite de 15.000.
-
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 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 archivo pueden permanecer en caché durante un tiempo. Si un archivo con el mismo nombre se eliminó recientemente, es probable que todavía esté almacenado en caché y deberá usar un nombre diferente.
Es posible que un archivo con el mismo nombre se eliminó recientemente. Los nombres de archivo pueden permanecer en caché durante un tiempo. Sería necesario 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 un archivo existente con el mismo nombre o a uno eliminado recientemente. Los nombres de archivo pueden permanecer en caché durante 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.