Archivo de la etiqueta: png

Diseño Gráfico, Diseño Web

Imagen vectorial y raster

rastervectorA menudo habremos oído hablar en el mundo del diseño gráfico de imágenes vectoriales e imágenes rasterizadas, a menudo vinculadas a programas profesionales de diseño como Adobe Illustrator o Adobe Photoshop (aunque bien es cierto que ambos tienen la capacidad de tratar ambos tipos de imagen, son específicos para cada una) así como a formatos concretos de archivos.

Vamos a aprender a diferenciar las características principales de cada uno, así como sus ventajas y los formatos de archivo que soporta cada formato:

Imagen Vectorial

vectorLas imágenes vectoriales están definidas por pura matemática, no por píxeles. Están compuestas por ecuaciones que definen una curva, una recta o una mezcla de ambas (no tenemos por qué ver los parámetros, podemos actuar desde un entorno gráfico visual) de las que podemos alterar su color, forma, etc…, por lo que si hacemos zoom en una imagen vectorial nunca pierde resolución, ideal para dibujos planos o logotipos.

Ventajas: Los archivos pesan menos, la resolución siempre es buena independientemente del tamaño y es muy fácil pasarlos a raster.

Inconvenientes: No soportan la posibilidad de tratar fotografías.

Programas: Adobe Illustrator, Adobe Flash, Corel Draw, Macromedia Freehand

Formatos de archivo: PDF, SVG, EPS, AI, DXF, CDR

Imagen Raster

rasterUna imagen raster consiste básicamente en un mapa de bits, donde cada píxel (cuadradito que compone la matriz de la imagen) tiene un color definido, como pueden ser por ejemplo las fotorafías, que al ampliarlas podemos visualizar su «pixelado». Como hemos dicho, las mejores imágenes raster son las fotografías, las cuales podremos editar o añadir filtros y efectos con los programas correspondientes.

Ventajas: Soporta con gran calidad las fotografías y resulta muy fácil tratarlas y darles efectos.

Inconvenientes: La resolución depende del tamaño del archivo o de la capacidad de la imagen, por lo que pesan mucho si son muy detalladas, además es muy difícil pasarlas a vectorial.

Programas: Adobe Photoshop, GIMP, Corel PhotoPaint

Formatos de archivo: JPG, PNG, GIF, BMP, TIF, PSD, CPT

Diseño Web

.jpg, .png o .gif, ¿qué formato elegir para mi web?

jpggifpngConsiderando la velocidad de carga como un factor esencial en una página web, ninguno de los elementos contenidos en la misma (no sólo imágenes, también los .html, .css, .js, etc.) debería pesar más de 25Kb, lo que nos obliga a comprimir al máximo cada elemento para hacerlo más óptimo.

Nuestra web no sólo mejorará en la velocidad de carga, sino también en la experiencia de usuario y en el SEO. Entonces, ¿qué formato es más conveniente para cada aplicación?

.JPG

Tiene la información de color que queramos darle con la calidad, nos dejará un «ruido» por el «defecto jpg» (omite información de color, para reduciendo calidad, reducir peso). Es conveniente tan sólo para fotografías a las que queramos reducir peso.

.GIF o .PNG-8

Comprime con colores indexados, por lo que si tenemos una imagen con pocos colores, o tintas planas. Permite una transparencia muy sencilla. Es conveniente para pequeños elementos que requieran un área transparente o para imágenes con pocos colores y sólidos.

.PNG-24

El peso aumenta, pero permite transparencias más complejas que su hermano pequeño.Es conveniente para logotipos, vectores rasterizados, tintas planas con degradados o imagenes con distintos grados de transparencia.

Recuerda:

Cuando estemos en Photoshop o Illustrator, por ejemplo, no debemos olvidar que no hay que dar a «guardar cómo», sino a «guardar para web y dispositivos«, que nos permitirá una mayor compresión (omitiendo por ejemplo los metadatos) y podremos ver cuántos nos pesará el archivo final, lo que nos permitirá comparar entre los distintos formatos. Para web nunca utilices .bmp o .tif