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, Unsplash y la búsqueda incorporada de Bing. También puedes arrastrar y soltar cualquier archivo de imagen en el espacio de trabajo para crear el widget de imagen.
¡Ojo! Se admiten imágenes en formatos JPG, GIF, PNG, SVG y BMP. Cada archivo puede tener 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.
Editición básica
Haz clic en la imagen para acceder a los controles del widget en el lado derecho de la pantalla. Puedes agregar borde (Border), modificar el radio (Radius) y cambiar la opacidad (Opacity), o usar los controles de tamaño de recorte (Crop) y tamaño real (1:1) / tamaño medio (1:2), así como la rotación estándar (Rotation), para tareas de edición simples.
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.
Atributo Alt
El texto alternativo describe lo que se muestra en la imagen, aumentando la accesibilidad de tu proyecto para los visitantes que, por una variedad de razones, no pueden ver las imágenes o necesitan de un software de lectura de pantalla (screen readers)—a la vez que puede compensar una conexión a internet lenta, ya que el texto se mostraría en caso de que no se cargue la imagen. También, es una buena práctica para SEO: los rastreadores de búsqueda indexan los textos alternativos, dando la oportunidad de agregar palabras clave a las imágenes.
Para editar el atributo alt de una imagen, haz clic en el control Semantics dentro de la configuración de tu widget e ingresa el texto en la ventana emergente. El atributo aparecerá en el código fuente de tu proyecto.
¡Ojo! Esta función está disponible en los planes Creator, Professional y Custom.
Claves para utilizar las etiquetas alt efectivamente
- Ser preciso. Recuerda que los textos alternativos existen principalmente para los visitantes que no pueden ver las imágenes reales: tu descripción debe reflejar con precisión lo que se muestra en la imagen.
- Ser breve. Las especificaciones HTML no limitan la longitud de las etiquetas alt. Sin embargo, es mejor restringirse a 125 caracteres: muchos lectores de pantalla populares dividen el texto exactamente en esa cantidad. En Readymag, las etiquetas alt están limitadas a 100 caracteres.
- Evitar palabras como "foto", "imagen", etc. Tanto los lectores de pantalla como los rastreadores de motores de búsqueda reconocen una imagen mediante una etiqueta alternativa que se refiere a ella. Es innecesario agregar su propia designación.
- No intentes sobre cargar con palabras clave. Las etiquetas Alt son extremadamente útiles para SEO, pero recomendamos mantener una experiencia de usuario agradable como prioridad.
Efecto Lightbox
Si Lightbox está habilitado, la imagen se expandirá en la totalidad de la pantalla al hacer clic en ella. Puedes establecer el color del fondo y ajustar la transparencia para una mejor experiencia del usuario.
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 image
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.
Sugerencia: carga imágenes de alta resolución.
Siempre recomendamos cargar versiones de alta resolución de todas las imágenes, de al menos dos veces el tamaño previsto del widget. Puedes reducirlo rápidamente colocando el cursor sobre el icono 1:1 y seleccionando 1:2 en el control Tamaño real / Tamaño medio (Actual size/Half size). Haz clic en 1:1 para volver al tamaño original.