Destacados

Más
Lunes, 13 de enero, 2014

Cómo crear GIF animados sin morir en el intento

8 +10K

GIF animados: Un repaso al formato, programas para crear GIF animados, capturar regiones de pantalla o incluso optimizarlos y reducir su tamaño.

Probablemente, Compuserve nunca imaginó que su antiguo formato GIF iba a resurgir de las cenizas y volver a ponerse de moda en Internet y redes sociales más de 25 años después de su creación.

Y es que, actualmente, el formato GIF tiene varias desventajas respecto a otros: cantidad de colores limitada, tamaño en disco mayor al de otros formatos de imagen, etc. Sin embargo, hay una simple característica que ha hecho que siga siendo único: puede mostrar imágenes animadas.

Eso, y por supuesto el hecho de estar tan extendido. Prácticamente cualquier programa reconoce este formato, a pesar de existir formatos alternativos más recientes y eficientes que también soportan animaciones, pero que por razones «políticas» no tuvieron tanta suerte en su extensión, como APNG o MNG.

Más info | La guía definitiva para reducir el tamaño de las imágenes

1. Introducción a los GIF animados

Los GIF animados fueron muy populares en la Internet de la época de los 90, con sus arrobas girando y carteles de «sitio web en construcción». Por aquel entonces, el formato GIF se vió envuelto en un problema de patentes, debido a que su implementación más común utilizaba el algoritmo LZW, que analizaba cadenas de texto para reducir el tamaño del archivo evitando las que se repetían más frecuentemente, algoritmo que suele ser utilizado muy a menudo en diferentes formatos de compresión.

Una vez caducada la patente, GIF quedó en tierra de nadie pero tampoco habían muchas razones para seguir utilizando un formato que se iba quedando obsoleto, por lo que fue perdiendo fuerza hasta los tiempos actuales, que se ha vuelto a popularizar, principalmente gracias a redes como Tumblr o Google+.

Un pequeño ejemplo de GIF animado sería el siguiente:

Un ejemplo de GIF animado con 16 una imagen que utiliza 16 colores: Leisure Suit Larry

Básicamente, un GIF animado está compuesto por varias imágenes (frames o fotogramas) con una duración establecida para cada uno. Además, también está la opción de que la animación se repita un número de veces determinado, ninguna o indefinidamente.

Otro detalle interesante de los GIF animados es que es posible definir un color como color transparente (en la imagen, ejemplificado en verde). Esto se aprovecha bastante bien en las animaciones, puesto que una forma de reducir el tamaño de la imagen es añadir en cada fotograma sólo las partes que cambian respecto a su fotograma anterior. De esta forma, toda esa información omitida reduce considerablemente el tamaño final del archivo.

Diferentes frames o fotogramas de un GIF animado: Varía el personaje, el cartel o el coche...

Obviamente, esta característica también es la culpable de que muchos visores de imágenes o aplicaciones (incorrectamente diseñados) no sean capaces de mostrar la animación del GIF de forma correcta, mostrando en su lugar líneas o cambios extraños.

Te preguntarás ¿Y cómo puedo crear un GIF animado?. Existen muchas y muy variadas aplicaciones para ello, sin embargo voy a basarme en una, que desde mi punto de vista es la más interesante, y luego ofreceré algunas alternativas:

2. Cómo crear un GIF animado con GIFCam

GifCam es una pequeña aplicación portable (no necesita instalación) que podemos utilizar a modo de «cámara de video». Todo lo que entre dentro de la región de su ventana, será capturado y guardado a GIF. Por supuesto, la ventana es redimensionable y podemos darle el tamaño que queramos, lo que lo hace muy práctico:

GIFCam captura al más puro estilo de otros programas para crear screencasts.

El control del programa es muy sencillo. A parte de redimensionar la ventana, tenemos cuatro botones, con los que podemos especificar ciertos parámetros o acciones:

  • Rec/Stop: Comienza o detiene la grabación. Si pulsamos en la flecha derecha nos aparecerá un menú donde podemos:
    • New/Open: Empieza una nueva grabación o abre un GIF ya existente.
    • 33/16/10 FPS: Velocidad a la que grabará la animación (Frames Por Segundo). Cuanto más alto, más suave la animación y más tamaño ocupará.
    • Full Screen: Captura la pantalla completa.
    • Capture Cursor: Permite o impide que aparezca el cursor del ratón.
  • Frame: Este botón permite aumentar la duración (FPS) de cada fotograma.
  • Edit: Abre el editor de fotogramas (ver más abajo).
  • Save: Guarda el GIF animado capturado ajustando el número de colores.
    • Quantize: Guarda el GIF aplicando una cuantización (la aconsejada).
    • Nearest: Reduce los colores del GIF al más cercano de la paleta.
    • 256/20 colores: Reduce los colores del GIF a 256 ó 20 colores.
    • GrayScale/Monochrome: Convierte a escala de grises o blanco y negro.
    • Preview: Previsualiza el GIF resultante (y su tamaño en la barra de título).
    • Export to AVI: Guarda en video la imagen (sin comprimir).

Internamente, durante una grabación, si existen varios fotogramas idénticos, GIFCam se encarga de eliminar los repetidos, manteniendo sólo uno y variando su duración, optimizando al máximo el tamaño del GIF.

Editor de frames (fotogramas)

Además, GifCam incluye un simple pero excelente editor de fotogramas. Con él, puedes eliminar frames (o series de frames), variar la duración de ciertos fotogramas, añadir texto, redimensionar la imagen, conseguir efecto Yo-yo (ida y vuelta) o incluso marcar zonas con el ratón como transparentes, algo muy útil para crear cinemagraphs.

Consejo: Puedes variar la duración de un frame, haciendo clic en delay y moviendo el ratón.

[...]

Queda el 51% del artículo
Leer artículo completo

EOF (End of file)
Viernes, 26 de julio, 2013

Pareidolia: ¡Estoy viendo cosas! (Parte II)

9 +30K

La pareidolia es un fenómeno psicológico muy común en el que reconocemos formas o rostros inexistentes. ¿Quieres ver algunas? En esta segunda parte tienes otras 50.

Muy probablemente, alguna vez jugaste a buscar figuras en las nubes, o quizás comentaste con alguien lo mucho que se parecía una montaña a un rostro conocido desde la posición en la que estabas.

La pareidolia (que en griego significa «figura o imagen adjunta») es un fenómeno psicológico muy común en el que, ante una aparente imagen o situación, reconocemos formas o rostros que en realidad no existen.

Según Jeff Hawkins, ingeniero informático fundador de Palm (ahora HP webOS) y del instituto de Neurociencia de Redwood, esto ocurre debido a una propiedad del cerebro que, para ahorrar tiempo, realiza tareas de predicción en base a formas conocidas en la memoria existente.

Información | Marco de Memoria-Predicción
TED Talks | Cómo la ciencia del cerebro cambiará la computación.

Si aún no sabes a lo que me refiero cuando hablo de Pareidolia, después de la primera parte, aquí tenemos una segunda recopilación de las 50 mejores imágenes de pareidolia que he encontrado en Internet, la mayoría representando rostros.

Mamá Berenjena

¿Has pensado en lo que estás haciendo, Dave?

Angry Mop (Fregonas cabreadas)

[...]

Queda el 78% del artículo
Leer artículo completo

EOF (End of file)
Martes, 23 de abril, 2013

25 malinterpretaciones involuntarias (II)

9 +10K

25 alimentos, golosinas o productos relacionados con llamativas malinterpretaciones involuntarias (¿o no?) dignas de observar.

Todo el mundo conoce los dobles sentidos, los juegos de palabras e incluso los calambures. Algunos, son hasta avanzados expertos en el «sofisticado» arte de la malinterpretación. Pero... ¿Y las malinterpretaciones involuntarias?

En esta segunda parte, damos un repaso a 15 alimentos, golosinas o productos relacionados que poseen una desafortunada malinterpretación involuntaria (¿o voluntaria?) que es digna de observar.

Disclaimer: No soy el autor de dichas fotografías. La mayoría de las capturas están extraídas de sitios/redes como Imgur, Reddit o Twitter y fueron subidos por diferentes usuarios, mencionados al final de cada fotografía.

1. ¡Sorber hasta el infinito! ¡Y más allá!

No hay nada mejor que utilizar a Buzz Lightyear como vaso, con una pose de autosuficiencia y con una pajita estratégicamente colocada. Y si crees que no se puede mejorar, espera a ver a Bella, de La Bella y la Bestia, en un modelo similar.

URL | yuckypants, en Imgur.

2. Choco huevos

No hay nada de malo en vender unos choco huevos al estilo de los clásicos Kinder Sorpresa. Ahora, el dibujo del personaje y el nombre del producto en conjunto...

URL | Antonio, en Microsiervos.

3. Experta en bananas congeladas

No sé si el que puso el título en el letrero es un genio o un tipo con muy mala leche. Lo que está claro es que se trata de una profesión con futuro.

URL | Dizzydubby, en Imgur.

[...]

Queda el 74% del artículo
Leer artículo completo

EOF (End of file)
Lunes, 21 de enero, 2013

La guía definitiva para optimizar imágenes

22 +30K

Optimizar imágenes JPG/GIF/PNG y consejos técnicos sobre cómo reducir el tamaño de nuestra web o blog para que cargue más rápido.

Si acostumbramos a escribir en un blog o crear sitios web, obviamente, utilizaremos imágenes para decorar o complementar nuestros textos de una forma gráfica y atractiva. Las imágenes son un recurso necesario e imprescindible para conseguir mantener la atención del público y evitar aburrirlos.

Sin embargo, no siempre las utilizamos correctamente, bien por desconocimiento, por descuido (y falta de tiempo) o por no tener la base de conocimiento necesaria para utilizarlas correctamente.

En este artículo veremos una guía para optimizar imágenes en nuestro sitio web, de una forma efectiva, con un buen equilibrio entre calidad de imagen y tamaño de imagen.

Imágenes pesadas = sitio web lento

Una página web contiene varias imágenes. Desde los pequeños iconos que incorpora hasta las grandes imágenes que ilustran las entradas o artículos. Para el usuario, cargar cada imagen es un pequeño retardo en la carga del sitio web.

Esto es algo bastante importante. Una web lenta es sinónimo de pérdida de usuarios (abandonan o buscan otras webs, cansados por la lentitud de carga), pero además ahora sabemos que Google le da importancia a la velocidad de carga de una web, por lo que será algo que influye a la hora de posicionarse en Google.

La suma de todas las imágenes utilizadas en un sitio puede ser considerable.

Cada página de nuestra web, contiene varias imágenes en diferentes formatos (y muchas veces, poco apropiados) que habrá que descargar al acceder a ella. Es por esta razón, que lo ideal sería disminuir lo máximo posible el tamaño de cada una de ellas, para que ocupen menos y se descarguen antes, incluso en usuarios con conexiones lentas.

En el artículo Optimizar el rendimiento web, hago un repaso más detallado y técnico de los aspectos que pueden retrasar la carga de una web: número de peticiones, tipo de servidores, sistemas de caché, descargas paralelas, sistema lazy load, etc...

La decisión: ¿JPG, PNG o GIF?

La primera pregunta que nos podemos plantear es: ¿Qué formato de imagen debo utilizar? Existen multitud de formatos de imagen, algunos nuevos, otros más desconocidos (como por ejemplo: WEBP, JPEG2000, JPEG-XR...). Lo más importante es conocer la diferencia entre los formatos con pérdidas y los formatos sin pérdidas. Puedes saber más en la siguiente guía de formatos de imágenes.

Nosotros nos basaremos en los tres más utilizados: JPG, PNG y GIF. A grandes rasgos, el método más sencillo para saber que formato utilizar, es el siguiente:

  • Formato JPG: Fotografías. Muchas texturas. Detalles complejos. No nos importa perder parte de calidad de la imagen original.
    Ejemplo: Una bonita fotografía de Mordor y el ojo de Sauron.

  • Formato PNG: Capturas de pantalla. Dibujos. Bocetos. Imágenes en las que hay amplias zonas «lisas» con el mismo color.
    Ejemplo: Ilustración del artículo shooters de los 90, con dibujos y zonas de color uniforme.

  • Formato GIF: Similar a PNG, pero actualmente utilizado sólo para imágenes animadas.
    Ejemplo: Una imagen animada de Larry Leisure Suit leyendo el periódico.

[...]

Queda el 73% del artículo
Leer artículo completo

EOF (End of file)

1 2 3