Para crear una nueva imagen en la página, haz clic en '+' (W) en la barra de widgets y selecciona 'Picture'. Puedes cargar un archivo de imagen, pegar una URL directa o agregar imágenes desde Flickr y Unsplash. También puedes arrastrar y soltar cualquier archivo de imagen en el espacio de trabajo para crear el widget de imagen.
Se admiten imágenes en formatos JPG, GIF, PNG, SVG y BMP de hasta 6 MB de tamaño.
Recomendamos a los usuarios que optimicen sus imágenes antes de subirlas para maximizar el tiempo de carga del proyecto. Continúa hasta el final de este artículo para obtener más información sobre cómo adaptar tus imágenes para las pantallas Retina.
Edición básica
Haz clic en la imagen para acceder a los controles del widget que se muestran al lado derecho. Puedes agregar un borde, establecer el radio, cambiar la opacidad o usar el control de recorte, así como la rotación estándar para tareas de edición simples.
La opción ‘Radius’ tiene dos modos:
- Automatic —todas las esquinas de una imagen se redondean simultáneamente
- Independent — puedes establecer un radio diferente para cada esquina de su imagen
Los radios no se sincronizan entre los diseños por lo que puedes seleccionar diferentes configuraciones para el mismo widget en el escritorio, tablet y la versión móvil de tu proyecto.
Después de agregar una imagen, su escala igualará las dimensiones del widget. Para modificar el tamaño de la imagen, simplemente arrastra los lados y bordes del contenedor. Si necesitas ajustarla al tamaño original, emplea el control de recorte (Crop) y desliza el valor al porcentaje 100%
Para estirar tu imagen a lo largo de la pantalla, selecciona ancho completo (Full-Width) o altura completa (Full-height) ubicadas en 'Position' dentro de los controles del widget.
Carga progresiva de las imágenes
Si el contenido de tu proyecto es elevado, puedes usar marcadores de posición de baja calidad para las imágenes. Para activar esta opción, abre la configuración del proyecto, ubica la pestaña Viewer y activa la opción ‘Progressive images’. Como resultado, marcadores de posición difuminados se mostrarán en lugar de las imágenes mientras se carga el proyecto.
Texto alternativo para imágenes
Para agregar un texto alternativo a tus imágenes, haz clic en el control ‘Alt text’ en la configuración del widget, e ingresa el texto en la ventana emergente ‘Semantics’. El atributo aparecerá en el código fuente de tu proyecto. Obtén más información sobre las etiquetas alternativas aquí.
Efecto Lightbox
Si la opción Lightbox está habilitada, la imagen se expandirá a pantalla completa al hacer clic en ella. Puedes obtener más información sobre esta función aquí.
Reemplazo de imagen
Hay tres formas de reemplazar una imagen:
1. Con un clic en el icono de imagen en el control de widget de la imagen y escogiendo un archivo.
2. Arrastrando y soltando una nueva imagen directamente al icono de imagen en el control de widget de la imagen.
3. Arrastrando y soltando una nueva imagen sobre la anterior.
Optimización de imagen
Cuando se carga una imagen, el editor la comprime automáticamente al tamaño real del widget y conserva una versión de mayor resolución para las pantallas tipo Retina. De esta manera, el proyecto publicado se carga más rápido para la mayoría de los visitantes, mientras que cualquier persona con pantalla Retina o pantalla similar con alta densidad de PPI ve una imagen más grande dentro del mismo widget de imagen.