El valor de los errores
Hoy, 1 de marzo, me he levantado descubriendo que millones de videoconsolas de Sony habían dejado de funcionar correctamente en todo el planeta. El error, parece ser, es debido a un problema de hardware con las fechas en años bisiestos. Pero no es la naturaleza tecnológica de este error de lo que quería hablar, sino de lo que le cuesta este error a una imagen de marca.
Es evidente que Sony pagará un alto precio como marca tras esta pequeña debacle. Millones de personas se han visto afectadas por este error garrafal y no han tardado más que unos minutos en organizar protestas utilizando medios sociales en Internet como Facebook o Twitter. Para la imagen de marca de Sony será un duro palo, y más teniendo en cuenta que durante mucho tiempo sus usuarios se quejaron del alto precio de la máquina que ahora ha decidido dejar de funcionar.
Pero el caso de Sony no ha sido el único de los últimos años. No hace falta recordar que Microsoft ha tenido que lidiar no sólo con las famosas tres luces rojas de la Xbox 360, sino que además tuvo que hacer frente a una situación similar a la de Sony cuando todos los Zune dejaron de funcionar al producirse el cambio de año. Por supuesto, Microsoft atajó estos problemas de diferentes modos (ya fuera recogiendo consolas y devolviéndolas reparadas, o aconsejando cambiar la fecha del reloj), pero fue un duro golpe para su imagen, una imagen ya de por sí bastante criticada.
Claro está que no solamente las marcas dedicadas a la tecnología pagan caros sus errores, para comprobarlo no tenemos más que echar un vistazo atrás y ver como, por ejemplo, un teleoperador de Tele2 facilitaba claves para acceder a datos confidenciales de sus clientes. También podemos considerar errores las decisiones que afectan de un modo negativo a tus clientes, como es el caso de Iberia el cobro de la segunda maleta. Este tipo de decisiones hacen que los potenciales clientes se posicionen contra la empresa y opten por hacer mala publicidad de la misma o, simplemente, decidan utilizar otra con servicios más baratos.
Cada uno de estos errores conlleva un coste más allá del económico, y ese coste es un valor difícil de calcular. Hablamos, sin ninguna duda, de un coste social, de una degradación de la imagen de marca por parte de los usuarios de la misma.
¿Cuánto cuestan estos errores? ¿Cuánto tiempo duran sus efectos en el tiempo?
Todo lo que necesitas saber sobre la compresión de imágenes
La utilización apropiada de la compresión de imágenes puede conllevar una gran diferencia en la apariencia y tamaño de los archivos gráficos de tu sitio web. Pero la compresión es un tema comúnmente malentendido, en parte porque hay una falta de entendimiento sobre para qué son buenas las diferentes clases de compresión. Si no entiendes qué tipo de compresión debes usar para cada tipo de imagen, probablemente acabarás sufriendo uno de estos dos resultados: o las imágenes no lucirán tan bien como podrían, o los archivos de las mismas serán más grandes de lo necesario.
A continuación verás todo lo que necesitas saber sobre la compresión de imágenes en relación al diseño web. Hemos cubierto las diferencias entre compresión con y sin pérdida, los varios tipos de archivo y las técnicas que utilizan, y las directrices para saber qué tipo de formato de archivo encaja mejor con los diferentes clases de imagen.
1. Compresión con pérdida contra sin pérdida
Mucha gente cree que deberían utilizar solamente un formato de imágenes que no tenga pérdida de calidad. Mientras la compresión sin pérdida es superior para muchas clases de imagen, no es necesario para otras muchas. Básicamente, la compresión de imagen sin pérdida significa que toda la información del archivo original se mantiene. La compresión con pérdida, por otro lado, elimina parte de la información del original y guarda la imagen con un tamaño de archivo reducido. Depende de ti, como diseñador, decidir cuánta información se puede desechar para ajustar el ratio de compresión de la imagen.
Compresión sin pérdida
Hay unos pocos métodos para la compresión sin pérdida. Existen formatos de codificación como el RLE, utilizado por los archivos BMP, que toma patrones de datos (elementos de los datos consecutivos con los mismos valores) y los almacena en un único valor de información con un contador. Es lo que mejor funciona con archivos gráficos simples, donde hay largos patrones de elementos de información idénticos.
La deflación es otro método de compresión sin pérdida utilizado por las imágenes PNG. Utiliza una combinación del algoritmo LZ77 y la codificación Huffman. Además de ser utilizado por las imágenes PNG, es también utilizado para la compresión ZIP y gzip.
La compresión Lempel-Ziv-Welch (LZW) es un algoritmo de compresión sin pérdida que realiza un análisis de la información. Se utiliza en los formatos GIF y TIFF (en algunos de ellos).
Compresión con pérdida
Hay un gran número de métodos de compresión con pérdida, algunos de ellos se pueden combinar con métodos de compresión sin pérdida para crear archivos de tamaño aún menor. Un método es reduciendo el espacio de color de la imagen a los colores más comunes que hay en la misma. Es utilizado habitualmente en archivos GIF y, en ocasiones, en imágenes PNG, para obtener archivos de menor tamaño. Cuando se utiliza con los tipos de imagen apropiados, y combinado con suavizado, pueden conseguirse imágenes cercanas a la original.
La codificación por transformación es el tipo de codificación utilizada por las imágenes JPEG. En imágenes, este tipo de compresión hace una media de los colores de la imagen en pequeños bloques utilizando transformación discreta de coseno (DCT) para crear una nueva que utiliza menos colores que la original.
Submuestreo de color es otro tipo de compresión con pérdida que tiene en cuenta que el ojo humano percibe cambios en el brillo más agudamente que los cambios de color, y se aprovecha de ello desechando o uniendo información cromática (color) mientras mantiene la información de brillo. Es utilizada comúnmente en la codificación de vídeo y en imágenes JPEG.
2. Diferentes tipos de archivos
Debido a la índole de este artículo, solamente nos vamos a centrar en tres tipos de archivo, que son los más comunes en diseño web: GIF, JPEG y PNG. Recuerda que existen otros tipos de archivo que utilizan compresiones (TIFF, PCX, TGA, etc.), y que no es difícil que te los encuentres en toda clase de trabajos digitales.
GIF
GIF significa Graphics Interchange Format, y es un formato de imagen de mapa de bits presentado en 1987 por CompuServe. Es capaz de mostrar hasta 8 bits de color por píxel, lo que significa que las imágenes puede contener hasta 256 colores del rango RGB. Una de las mayores ventajas del formato GIF es que permite imágenes animadas, algo que no pueden hacer el resto de los formatos mencionados a continuación.
JPEG
JPEG (Joint Photographic Experts Group) es un formato de imagen que usa compresión con pérdida creando archivos más pequeños. Una de las grande ventajas de JPEG es que permite a los diseñadores un ajuste preciso de la cantidad de compresión que se desea utilizar. El resultado es una mejor calidad de imagen cuando se usa correctamente, todo ello con una tamaño de imagen razonablemente pequeño. Debido a que JPEG utiliza compresión con pérdida, las imágenes guardadas en este formato tienen a tener “ruido”, donde se pueden ver píxeles extraños o halos alrededor de ciertas partes de la imagen. Suelen estar en áreas de la imagen donde hay un fuerte contraste entre colores. Generalmente, a mayor contraste en la imagen, mayor calidad necesita al ser guardada para obtener un aspecto decente en la misma.
PNG
PNG (Portable Network Graphics) es otro formato de mapa de bits que se aprovecha de la compresión sin pérdida y fue creado para reemplazar al formato GIF. El formato PNG no fue visualizado correctamente en Internet Explorer durante mucho tiempo, haciendo que se utilizara menos que los formatos GIF y JPEG, aunque funciona correctamente en el resto de navegadores (Firefox, Opera, Safari, etc.). Los archivos PNG pueden almacenar paletas indexadas de color (tanto de 24 bits RGB como de 32 bits RGBA), escala de grises, y espacios de color RGBA y RGB. Una de las grandes ventajas de los archivos PNG es que pueden almacenar un canal alfa que les permite tener transparencias.
3. Eligiendo un formato de imagen
Cada tipo de formato de archivo especficado anteriormente es apropiado para diferentes clases de imágenes. Elegir el formato apropiado resultará en una mejor calidad de imagen y un tamaño menor en los archivos. Elegir el formato incorrecto significará que las imágenes no estarán en su mejor calidad y que serán mayores de lo necesario.
Para gráficos simples como logotipo o dibujos de líneas, el formato GIF suele ser lo que mejor funciona. Debido a la limitación de colores del formato GIF, los gráficos con degradados o suaves cambios de color suelen salir mal dibujados. Aunque se puede disimular en gran medida utilizando el suavizado, suele ser mejor utilizar otro formato de archivo.
Para fotografías o imágenes con degradados donde el GIF es inapropiado, el formato JPEG puede ser el que mejor encaje. JPEG funciona genial con fotografías con cambios suaves de color y sin un contraste fuerte. En áreas de fuerte contraste, es más que probable que aparezcan manchas o ruido (halos alrededor del área). Ajustando el grado de compresión de tus JPEG antes de guardarlos generalmente redundará en una mayor calidad de imagen manteniendo un archivo de tamaño pequeño.
Para imágenes con alto contraste, especialmente fotografías, o ilustraciones con muchos degradados y contraste, el formato PNG suele ser el mejor. También es buena opción para imágenes con trasparencias, especialmente aquellas que necesitan una transparencia parcial. Los archivos PNG suelen ser mayores que los JPEG, aunque depende del tipo exacto de imagen. Los archivos PNG también son sin pérdida, lo que significa que toda la calidad de la imagen original permanecerá intacta.
Aquí un resumen de qué formato funciona mejor con cada clase de imagen:
GIF
- Si es necesaria animación.
- Gráficos simples y sin degradados.
JPEG
- Fotos, especialmente sin alto contraste.
- Pantallazos, especialmente de películas, juegos, o contenido similar.
PNG
- Dibujos de líneas simples, ilustraciones.
- Fotos con alto contraste.
- Transparencia, especialmente con canal alfa.
- Pantallazos de aplicaciones o diagramas detallados.
Y aquí un resumen de qué formatos evitar para cada clase de imagen:
GIF
- Imágenes con degradados.
- Fotografías.
JPEG
- Imágenes con alto contraste.
- Imágenes detalladas, especialmente diagramas.
- Gráficos sencillos (los tamaños de archivo son mayores).
PNG
- Fotos con poco contraste (los tamaños de archivo son mayores).
4. Compresión de imagen en diseño para impresión
Aunque el grueso de este artículo se ha centrado en la compresión de imagen en el diseño web, merece la pena mencionar el efecto que la compresión puede tener en el diseño para impresión. En la mayoría de los casos, la compresión de imagen con pérdida debe evitarse en el diseño para impresión. Los gráficos para impresión deben evitar el ruido y los halos mucho más que los gráficos para web. Mientras que un JPEG guardado a calidad media puede verse genial en un monitor, cuando se imprima, incluso en una impresora de chorro de tinta, la perdida de calidad será notable (así como el ruido).
Para diseño de impresión es preferible el uso de formatos sin pérdida de calidad. TIFF (Tagged Image File Format) es generalmente el formato de archivo preferido si es necesaria la compresión, pues da varias opciones de compresión sin pérdida (incluido el mencionado anteriormente LZW). De nuevo, dependiendo de la imagen y de dónde será impresa, es generalmente mejor utilizar un tipo de archivo sin compresión. Habla siempre con tu impresor para saber qué prefiere.
Sobre el artículo
Este artículo es un traducción libre del artículo Everything You Need to Know About Image Compression escrito por Cameron Chapman en Noupe. Para más información visita el artículo original y sus fuentes (inglés).
50 iconos de redes sociales y servicios en la red
En IconDock, sitio web especializado en el desarrollo y distribución de iconos de todo tipo, han publicado una lista de 50 iconos de redes sociales en varios tamaños, con formatos EPS, PNG y GIF, que podemos usar gratuitamente en nuestras webs poniendo siempre un enlace a su sitio web.
El paquete incluye iconos de Delicious, Flickr, Twitter, Retweet Button, Facebook, MySpace, StumbleUpon, Digg, Slash Dot, Mixx, Skype, Technorati, Reddit, FriendFeed, YouTube, LinkedIn, Newsvine, SlideShare, Google, Google Talk, Yahoo, Yahoo Buzz, Netvibes, AOL, Microsoft, MSN, Apple, MobileMe, App Store, Amazon, Last.fm, Mister Wong, Qik, Vimeo, Viddler, Virb, Tumblr, WordPress, Blogger, Posterous, Behance Network, Design Float, Deviant Art, Design Bump, Friendster, Bebo, Squidoo, Share This, RSS y correo electrónicol.
Vía:
WWWhatsnew – 50 iconos de redes sociales
Cartel Carnavales 2010 de Bilbao: el desastre
Un año más el concurso de carteles de Carnavales de Bilbao nos muestra el camino de la desesperación en diseño gráfico y conceptos visuales. El nivel de los carteles finalistas era lamentable, aunque había alguno que podría salvarse de la quema en caso de extrema necesidad. No ha sido el caso del cartel ganador, esa cosa que ilustra esta misma entrada en esta humilde bitácora.
El cartel, toda una obra llena de cariño, pasión y dedicación, nos enseña todo lo que no debemos hacer en un buen diseño excepto si somos un chaval de doce años que solamente sabe utilizar el Paint que viene de serie en Windows juntos con las tipografías clásicas.
Y a vosotros, ¿qué os parece?
Enlaces:
Carteles finalistas del Concurso Carnavales 2010 de Bilbao
En busca de un FreeHand libre
La Wikipedia nos enseña que “FreeHand es un programa informático de creación de imágenes mediante la técnica de gráficos vectoriales. Gracias a ella, el tamaño de las imágenes resultantes es escalable sin pérdida de calidad, lo que tiene aplicaciones en casi todos los ámbitos del diseño gráfico: identidad corporativa, páginas web (incluyendo animaciones Flash), rótulos publicitarios, etc”.
FreeHand ha sido, y en algunos ámbitos aún lo es, uno de los programas de ilustración vectorial más utilizados. La cantidad de imprentas que todavía reciben ilustraciones creadas con este famoso programa siguen siendo legión y un gran número de usuarios prefiere su método de trabajo al de Adobe Illustrator. Cuando Adobe adquirió Macromedia, FreeHand quedó olvidado por Adobe para potenciar sus herramientas y dejando descontentos a un buen puñado de profesionales que preferían seguir utilizando FreeHand para sus proyectos.
Así, de esas ganas de seguir viendo evolucionar FreeHand, nació la iniciativa Free FreeHand Organization, una sencilla organización creada por usuarios de FreeHand que buscan la liberación del mismo para poder seguir desarrollándolo y aumentando sus capacidades. Es cierto que la interfaz de FreeHand puede parecer obsoleta, pero no es menos cierto que algunas de sus características lo hacen superior en algunos puntos a otros programas de la competencia. Tampoco hemos de olvidar que sin ninguna aplicación es capaz de abrir los ficheros de FreeHand, millones de proyectos no podrán ser abiertos en todo el mundo nunca más, por eso es importante que FreeHand siga funcionando en los sistemas operativos modernos.
Si quieres unirte a la causa, no tienes más que apuntarte. ¿Tú echas de menos FreeHand y su metodología?
Enlaces:
Free FreeHand Organization
