Editor 6 - Imágenes: Trabajar con una imagen

P. He importado algunas imágenes PNG de gran tamaño y ahora mi sitio parece muy lento ¿Por qué?
R. Los archivios PNG no son el formato apropiado para imágenes de gran tamaño. PNG es mejor usarlo para imágenes pequeñas donde necesitas transparencia. Deberías intentar usar JPEGs si es posible. Para una imágen 800 x 600 la diferencia entre un JPEG puede ser un 90% más pequeño que un PNG sin apenas pérdida visual de calidad.

P. ¿Por qué mi archivo PNG no funciona correctamente?
R. Comprueba que PNG es un formato de imágen RGB. Tu editor soporta archivos PNG de 24 bit y 32 bit. No soporta archivos PNG de 8 bit. Para obtener los mejores resultados te recommendamos usar la opcion de Photoshop "Guardar para web y dispositivos" para crear tus archivos.

P. ¿Qué tamaño deben tener mis imágenes?
R. Las imágenes deben ser inferiores a 1200 píxeles. Para el mejor resultado usa siempre imágenes de 72 dip y modifícala al tamaño correcto en Photoshop o en cualquier otro editor antes de importarla. Si importas una imágen demasiado grande en Basekit y luego la reajustas más pequeña, la imágen sigue conservando su tamaño real completo y hará que tu página sea lenta.

P. ¿Puedo usar GIFs?
R. El editor soporta GIFs pero no recomendamos el uso de este formato, A no ser que necesites animación, usa si es posible JPEG en su lugar. Si realmente necesitas usar GIFs, evita reajustarlos dentro Basekit.

P. ¿Hay algún límite en el número de imágenes que puedo importar?
R. No hay límite. Puedes importar tantas imágenes como te permita tu capacidad de almacenamiento. Las cuentas DEMO tienen 10Mb de capacidad, y las cuentas de pago cuentan con 1Gb o más.

P. ¿Cuántas imágenes puedo importar al mismo tiempo?
R. Puedes importar hasta 5 imágenes de una sola vez

P. ¿Puedo situar una imágen por encima de otra?
R. Puedes usar el widget Fondo para hacer eso.

Selecciona la pestaña MEDIA (1) y después haz clic en Añadir (2).

Los archivos a importar pueden ser JPEG o PNG. Generalmente lo mejor es usar JPEG para fotografías y PNG para gráficos.

Nota 1: Si el botón de Añadir no está visible, esto puede indicar que necesitas re-instalar Adobe Flash Player. Finaliza tu sesión en BaseKit, ve a http://get.adobe.com/flashplayer/ y sigue las instrucciones de instalación.

Nota 2: IE6 no acepta la transparencia en los PNG. Si se requieres compatibilidad con IE6 no uses transparencias en tus imágenes PNG.

Haz clic dentro de la imagen y arrastrala para mover la imagen (1). No hagas clic en los bordes o los manipuladores de la imagen (2).

La imagen no se moverá si el panel de configuración está abierto. Usa el botón de cerrado (3) para cerrar el panel.

Haz clic y arrastra en cualquiera de los bordes de la imagen para cambiar su tamaño.

La imagen no cambiará de tamaño si el panel de configuración inferior se encuentra abierto. Usa el botón de cerrado para cerrar el panel.

Use el widget Diseño de Columnas para colocar imágenes o widgets uno al lado del otro. También puedes simplemente arrastrar una imágen al lado de la otra y aparecerá una nueva columna.

NOTA: Solo puedes colocar hasta 6 elementos en una misma fila

Para borrar una imagen de una página, haz clic en el botón de borrar (1). Para remover la imagen del sitio, también deberás borrarla de la pestaña de Imágenes.

Haz clic en el botón Restablecer (1) para reajustar la imagen a su tamaño original.

1. Usa Etiqueta Alt par dar una descripción alternativa a tu imagen. Esta será mostrada en aquellos navegadores que no puedan mostrar la imagen (p.e. dispositivos móviles).
2. El título de la etiqueta sirve para darle un título a la imagen.
3. Pulsa en restablecer para recuperar el tamaño original de la imagen.
4. Pulsa en el candado para poder hacer cambios en el ancho y altura de la imagen. Si bloqueas esta función puedes cambiar la altura y el ancho al mismo tiempo.
5. Arrastrando una imagen hasta rollover harás que esta imagen aparezca al pasar el curso sobre tu imagen original.
6. Arrastrando una imagen hasta lightbox. Esto hará que al pulsar sobre tu imagen ésta se abrirá en una nueva ventana.
Nota: esto solo puede comprobarse en vista previa. No funciona en el editor.
7. Para añadir un enlace a la imagen pulsa en Añadir
8. Para eliminar un enlace pulsa en Borrar
9. La opción nofollow puedes usarla para marcar las imagenes que no quieres que los motores de búsqueda muestren en sus resultados.
10. La opción carga sincronizada es usada en su mayoría en webs que tienen muchas imagenes y en lugar de cargarlas todas al mismo tiempo, las vemos cargarse cuando intentamos verlas bajando en la página.

Pulsa en Añadir (1) en el panel de ajustes.

Si el enlace es de una página del mismo sitio, usa Link el menú interno (1). Para enlazar a una página externa , pega la URL en la casilla Link externo (2). Si quieres que el enlace habra una nueva ventana, usa el menú Link objetivo (3).

Para este ejemplo hemos cargado tres imagenes:

Lemon_320x240 - Esta será la imagen que añadiré a mi página. Aconsejamos a nuestro usuarios reducir el tamaño de la imagen al tamaño que desean tenerla en su sitio, sino tardarán demasido en cargarse.

Lemon2_320x240 - Esta es la misma imagen anterior con el mismo tamaño pero cambiando color. Usaré esta imagen para el rollover.

Lemon_800x600 - Es la misma imagen que la primera en color, pero aumentada. Usaré esta imagen para el lightbox.

Empieza arrastrando la imagen original a tu página (1) y pulsa en el icono ajustes (2).

Arrastra la imagen pequeña en sepia al primer cuadro para crear rollover. Luego, cuando vayas al modo Vista Previa o a tu sitio publicado y pases el cursor sobre tu imagen, verás la imagen en sepia.

Arrastra la imagen grande al segundo cuadro para crear lightbox. Luego, cuando vayas al modo Vista Previa o a tu sitio publicado y pulses sobre la imagen se abrirá una nueva ventana con la imagen grande.

Este es un ejemplo de lightbox. Tendrás que ir al mdo vista previa para reproducir estas opciones.