PISTAS Y TRUCOS DISEÑO DE UNA PÁGINA WEB

Optimización del color
Las imágenes que van a publicarse en Internet requieren un tratamiento completamente distinto al de aquellas que van a imprimirse. Cuando optimizamos cualquier imagen para la Web, no es necesario detenernos en su tamaño.

Consigue el tamaño correcto
Tamaño de imagen

»

Cuando tomamos fotos para una posterior impresión, hay que tener en cuenta los megapíxeles. Un punto que no es importante en imágenes que van a publicarse en Internet. La mayoría de las pantallas no son más grandes de 1.024 píxeles, así no tiene sentido crear páginas web más anchas. Muchos sites incluso todavía presentan un ancho de visualización de 800 píxeles. De este modo, las imágenes para incluir en una página web no deberían ser más grandes de 700 o 750 píxeles. Aunque estas dimensiones no se aplican en el caso de sitios como Flickr o aquellos dedicados a la fotografía profesional donde se publican imágenes de mayores dimensiones. Si utilizamos una cámara de 3 megapíxeles o más, es imprescindible reducir las imágenes o en su defecto cortarlas. En Photoshop Elements, configuramos el tamaño de imagen a través de Archivo/Guardar para Web o Imagen/Cambiar tamaño/Tamaño de imagen. En Paint Shop Pro utilizamos Imagen/Cambiar tamaño. En cualquier caso, seleccionamos el ancho para que el editor configure la correspondiente altura.

Photoshop Elements nos permite seleccionar un tamaño de archivo. El software comprimirá la imagen para que se acople al tamaño.

Selección del tamaño de archivo
Adobe Photoshop/Photoshop Elements
Adobe Photoshop y Photoshop Elements nos permiten seleccionar un tamaño específico de archivo. El editor de imágenes comprime la fotografía de modo que se acople al tamaño. En la caja de diálogo Guardar para Web pinchamos sobre la flecha negra (Menú de previsualización) y elegimos el tipo de descarga (por módem, ADSL, cable, etc.). Bajo la previsualización del resultado nos muestra el tamaño del archivo.

»

Las imágenes en una página web suelen ser de 700 o 750 píxeles. Las redimensionamos o cortamos con un editor de imágenes.
22 PUBLICA TU WEB PISTAS Y TRUCOS

Mientras que JPEG es ideal para imágenes, GIF es mucho mejor para gráficos lineales y texto.

Carga de imágenes progresiva
JPEG progresivo

»

¿JPEG, GIF o PNG?
Formatos de imagen

»

Algunos exploradores visualizan imágenes sólo una vez que se han cargado completamente. La espera puede hacerse eterna, cuando se trata de imágenes de gran tamaño. La solución está en guardar nuestras imágenes como archivos JPEG progresivos. Así, se visualizará una vista borrosa de la imagen que nos dará una idea del contenido de la imagen. A continuación, la imagen se irá haciendo cada vez más clara mostrando poco a poco cada uno de los detalles. Normalmente, los archivos en JPEG progresivo son muy similares a los propios JPEG. En Paint Shop Pro utilizamos Archivo/Exportar/Optimizador JPEG y seleccionamos la opción Progresiva de la pestaña Formato. En Adobe Photoshop Elements utilizamos Archivo/Guardar como, seleccionamos el formato JPEG y activamos Progresivo en la caja de diálogo Opciones de JPEG.

Los formatos de archivo para publicación web suelen ser: JPEG, PNG y GIF. El formato JPEG soporta una profundidad de imagen de 24 bits y una compresión definida por el usuario medida en ratios de alta compresión. JPEG utiliza compresión con pérdida, es decir, se pierden detalles dependiendo del ratio de compresión elegido. GIF es un formato sin pérdida de calidad. Su principal desventaja es que soporta solamente 8 bits gráficos, lo que significa que no se pueden almacenar más de 256 colores en uno de estos archivos. Además, GIF no es el formato más aconsejable para fotografías, sino que suele destinarse a diagramas, logotipos y texto. Otros dos campos donde se aplica este formato son en la animación y transparencias. En una imagen GIF podemos definir un color como transparente. De este modo, destacará el color del fondo o la imagen de fondo. PNG es otro formato bitmap, aunque no todos los exploradores son compatibles con las características que PNG ofrece. Así antes de publicar una imagen en PNG, deberíamos comprobar el resultado en varios exploradores (tanto para Windows como para Linux y Mac). PNG ofrece un número de características que le convierten en uno de los principales contendientes. Utiliza una profundidad de color de 24 bits, por lo que resulta ideal para fotografías; utiliza compresión sin pérdida y el tamaño de archivo es mayor que en el caso de JPEG. Comparado con GIF y PNG ofrece un rango mucho más amplio de opciones para transparencias y una compresión más alta.

Guardamos las imágenes más grandes como archivos JPEG progresivo para presentar una vista rápida a los visitantes más impacientes.

Optimiza para la Web
JPEG

»

La manipulación de imágenes para la Web implica un compromiso entre calidad y tamaño de archivo. Cuanto más grande sea el archivo de la imagen, más tardará en cargarse. Por otro lado, la reducción del tamaño de archivo nos obliga a utilizar una alta compresión que da como resultado la pérdida de detalles así como la aparición de artefactos en la imagen. Los editores de imágenes más potentes como Adobe Photoshop, Photoshop Elements o Corel Paint Shop Pro facilitan la optimización de imágenes para la Web. Ofrecen una ventana de previsualización que muestra la imagen original y otra con los cambios. También nos informan sobre el tamaño de archivo resultante y los tiempos de descarga. En Adobe Photoshop Elements, vamos a Archivo/Guardar para Web. La caja de diálogo que aparece puede redimensionarse, por lo que veremos el original y la imagen optimizada tan grande como queramos. La caja de diálogo, que abrimos a través de Archivo/Exportar/Optimizador JPEG en Paint Shop Pro, ofrece una previsualización más pequeña pero sí incluye un útil asistente.

Utilizamos la previsualización en Photoshop Elements para averiguar la calidad y tamaño óptimo para nuestras fotografías.
PISTAS Y TRUCOS PUBLICA TU WEB 23

PISTAS Y TRUCOS DISEÑO DE UNA PÁGINA WEB

Reduce el tamaño de archivo
JPEG

»

Las imágenes JPEG pueden comprimirse mejor. Para ello utilizamos el comando Máscara de enfoque del editor de imágenes. Con ello conseguiremos bordes más nítidos y evitaremos áreas granuladas. En Photoshop Elements, encontramos este comando en Filtro/Enfocar/Máscara de enfoque. Las opciones Ajustar/Nitidez nos llevan a él en Paint Shop Pro. También, utilizamos el comando para enfocar más (en Photoshop Filtro/Otros o Ajuste/Nitidez/Enfocar en el caso de Paint Shop Pro). Otra acción que recomendamos llevar a cabo es la eliminación del ruido. En Photoshop Elements, utilizamos Filtro/Ruido/Reducir ruido.
Aplicamos el filtro Máscara de enfoque a nuestra imagen antes de guardarla como JPEG. Esto nos ayudará con la compresión de la imagen.

Para mejorar la lectura, reducir el tamaño de fuente es esencial.

Invierte colores: blanco en negro

Todos los formatos de imagen
Cuando invertimos colores, por ejemplo al situar texto blanco sobre un fondo oscuro, nos aseguramos de que el texto sea completamente legible. Texto en blanco sobre fondo oscuro es un contraste mucho más alto que en el caso opuesto, por lo que la letra tendrá que ser más ancha, más brillante y más pequeña requiriendo además más espacio entre líneas.

»

Después de reducir el ruido, la imagen JPEG puede comprimirse de forma más efectiva.

El valor hexadecimal
Colores de fondo

»

Cuando necesitamos averiguar qué valor hexadecimal tiene el color que hemos elegido para el fondo, vamos a www.drweb.de/ressourcen/farbwa ehler.html. Seleccionamos nuestro color de fondo (el sitio está en alemán, pero los nombres de colores en inglés). En la parte superior de la página, visualizamos el valor hexadecimal.

Reducimos el número de colores en un logo en GIF al número que actualmente es utilizado; con ello reducimos el tamaño de archivo considerablemente.

Reduce el número de colores
GIF

»

Seleccionamos un color y conseguiremos el valor hexagonal.
24 PUBLICA TU WEB PISTAS Y TRUCOS

Cuando guardamos logotipos, botones u otros elementos gráficos es recomendable no aplicar la configuración por defecto de nuestro editor. En este ejemplo, un logo bicolor se guardó como GIF con 256 colores dando como resultado un archivo de 57,95 Kbytes. Reduciendo el número de colores en Photoshop Elements, obtendríamos un tamaño de archivo de tan sólo 12,7 Kbytes. De este modo, se convierte en una imagen más idónea para su publicación Web. Observamos que el número de colores que podemos seleccionar en Photoshop Elements se encuentra entre 2 y 256 colores.

Botones e iconos
Galerías de botones

»

Cualquier diseñador web incluye botones para facilitar la navegación. Si nuestra aplicación cuenta con una galería de botones pero no concuerda con nuestros gustos, podemos conseguirlos de forma gratuita en Internet. Descargamos una colección de botones en http://ndesignstudio.com/resources/pixel_icons.htm. Estos iconos (14 x 14 píxeles con fondo transparente) están diseñados para utilizarse como botones principales. Sweetie (http://swee tie.sublink.ca) cuenta con más de 150 iconos en formato GIF y PNG. Más de 3.700 botones Sweetie cuenta con más de 100 iconos disponibles especiales para blogs o para bajo la licencia de Creative Commons. incluir información de contacto, entre otros, pueden descargarse de http://gtmcknight.com/buttons. Esta página web cubre distintas categorías como humor, geografía o política. FamFamFam cuenta con varias colecciones de iconos que podemos conseguir tecleando la dirección www.fam famfam.com/lab/icons en nuestro FamFamFam cuenta con 144 iconos GIF realmente navegador.
pequeños.

TrayColor es una pequeña herramienta muy útil que graba los valores RGB de cualquier color en nuestra pantalla.

Elige el color
TrayColor

»

A menudo no conocemos el nombre específico del color que vamos a utilizar. Si ese fuera el caso, sólo tenemos que abrir el color en nuestra pantalla, en la aplicación de Windows, en el editor de imágenes o en la página web. Con la herramienta gratuita TrayColor (www.usability-now.com/tools) será todo mucho más fácil. Nos descargamos y descomprimimos el archivo y ejecutamos Traycolor.exe. Simplemente seleccionamos la pipeta y pinchamos sobre el color de nuestra pantalla. TrayColor muestra el valor del color y RGB (tanto en hexadecimal, HTML o en estilo decimal).

Fotografías y plantillas gratuitas>
Galerías de imágenes
Para mejorar la apariencia de nuestra página web, es posible agregar imágenes o plantillas de fondo. Si no disponemos de ninguna, podemos localizarlas en cualquiera de las colecciones gratuitas que alberga Internet. Freerange Stock (www.freerangestock.com) cuenta con una amplia colección de imágenes y texturas en alta resolución (la mayoría de ellas gratuitas). Sólo tenemos que registrarnos en esta página web para conseguir acceso inmediato a las imágenes. Navegamos a través de las listas Newest Photos y Most Popular Photos o introducimos un término de búsqueda en la caja correspondiente. Cuando pinchamos en una de las imágenes, visualizamos una lista con registros relacionados. Para conseguir una imagen, simplemente pinchamos en el botón Download bajo su descripción y lo guardamos como un archivo JPEG. Otro excelente recurso es Stockvault (www.stockvault.net/gallery). Incluye una pequeña pero excelente colección de fotografías profesionales, texturas y fondos. Podemos introducir tanto una palabra clave como navegar a través de la lista de categorías. Cuando seleccionamos una imagen, Stockvault visualiza las palabras clave a través de las cuales podemos encontrar las imágenes relacionadas. Es posible encontrar elegantes plantillas en www.squidfin gers.com/patterns.

Squidfingers.com cuenta con una estupenda colección de plantillas gratuitas que podemos utilizar en páginas web.

Freerange Stock ofrece imágenes profesionales en alta resolución.

PISTAS Y TRUCOS PUBLICA TU WEB 25