Cinco elementos del procesamiento perfecto de imágenes en diseño web
Autor：Eve Cole
Fecha de actualización：2009-06-20 16:51:39
1. Formato: se prefiere el formato PNG para imágenes con formas simples generadas por computadoras (como logotipos e íconos), mientras que las fotografías con colores intensos deben ser JPEG. Si hay pocos colores y ningún degradado, se debe utilizar el formato GIF.
GIF es el formato de imagen web más utilizado. GIF admite hasta 256 colores y funciona con casi todas las imágenes excepto las fotografías. También tiene la capacidad de generar animaciones simples e imágenes transparentes.
El formato PNG es relativamente nuevo y también es un formato recomendado por el W3C. PNG-8 puede contener hasta 256 colores, comparable a GIF; PNG-24 admite el modo RGB, que puede expresar cualquier color con mayor calidad; PNG-32 agrega un canal alfa basado en PNG-24, que se puede configurar como transparente.
JPEG puede guardar alrededor de 16,7 millones de colores y se utiliza a menudo para guardar fotografías. Pero aparte de eso, JPEG casi nunca se utiliza. Si la imagen tiene menos de 256 colores o contiene grandes áreas de colores sólidos, JPEG no funcionará bien; el tamaño del archivo puede duplicarse para obtener una imagen de alta calidad.
Al elegir un formato de imagen, debes considerar exhaustivamente su ámbito de uso, como el color, la transparencia, la animación, etc., como se detalla a continuación. Se pueden comparar varios parámetros a través del asistente de exportación de Photoshop o Fireworks. El criterio de selección es que el tamaño del archivo sea lo más pequeño posible manteniendo una calidad de imagen aceptable.
2. Las imágenes de creación de color deben utilizar el modo RGB, no el modo CMYK para imprimir. No se preocupe por los colores seguros del navegador, ya que casi nadie usa ya monitores de 8 bits. La selección del color debe hacer referencia a estándares unificados, como los sistemas de identidad visual (VI). La cantidad y el efecto de los colores son factores importantes a la hora de determinar el formato de la imagen. Por ejemplo, los degradados de color suelen producir una gran cantidad de colores. Si se guardan como GIF, se producirá distorsión y el tamaño del archivo también aumentará significativamente. debería considerar el uso de formato PNG-24, PNG-32 o JPEG.
3. Tamaño Las imágenes producidas utilizando herramientas de creación de vectores suelen ser adecuadas para guardarlas en formato PNG, y su tamaño debe determinarse en la herramienta de dibujo vectorial. Una vez que se convierte en un mapa de bits, no se puede escalar fácilmente (especialmente, no se debe ampliar). ). Vale la pena señalar que los archivos PNG creados en Fireworks contienen información editable, como capas, y las líneas, formas y texto que contienen son todos gráficos vectoriales. Al aplicar una imagen de este tipo a una página web, primero se debe realizar una operación de salida para comprimir el tamaño del archivo, y la imagen PNG de salida también se convertirá en un mapa de bits porque se pierde información editable. Por lo tanto, el ajuste del tamaño de la imagen debe completarse antes de la operación de salida. El mapa de bits no está escalado para garantizar que los contornos y degradados de la imagen sean lo suficientemente claros.
Para mapas de bits y fotografías existentes, debe usar Photoshop y otro software para ajustar el tamaño antes de insertarlos en la página web en lugar de usar los atributos de ancho y alto en lenguaje HTML para cambiar el tamaño de la imagen. El uso directo del lenguaje HTML para controlar el tamaño de la imagen puede causar una distorsión grave de la imagen.
Generalmente, las imágenes colocadas en páginas web deben controlarse a un tamaño relativamente pequeño. Si se mezcla con texto, el ancho debe ser de alrededor de 300 px. Incluso si aparece solo, el ancho debe ser inferior a 600 px. En cuanto a la altura, lo adecuado es no superar una pantalla.
4. Tanto GIF como PNG transparentes admiten la transparencia, pero de diferentes maneras. GIF simplemente establece uno o varios colores para que sean completamente transparentes, sin considerar la transparencia de los colores degradados adyacentes. Esto significa que si el color de fondo cambia significativamente (o contiene varios colores contrastantes), la transición a la parte transparente no será suave y habrá una línea divisoria obvia. Si desea crear un GIF transparente, es necesario configurar el color de fondo del lienzo para que sea igual (o cercano) al color de fondo del efecto de destino. PNG no tiene este problema y también se puede configurar para que sea translúcido.
Sin embargo, IE6 no puede mostrar archivos PNG transparentes correctamente de forma predeterminada y es necesario tomar las medidas adecuadas.
5. Las animaciones en páginas web animadas suelen incluir Flash y GIF animados. Flash tiene funciones potentes, efectos ricos, alta calidad de imagen y un potente software de creación. Es la forma preferida de animación web en la mayoría de los casos. La desventaja del GIF animado es que sólo puede utilizar no más de 256 colores y es difícil crear animaciones con efectos complejos. Sin embargo, su ventaja es que el archivo es pequeño y se puede reproducir en cualquier navegador antiguo o moderno sin necesidad de un complemento. -en apoyo.
