Obtén el primer frame de un GIF animado con ImageMagick

ImageMagick ha sido el estándar de la industria para la manipulación de imágenes desde hace muchísimo tiempo. Particularmente, yo no recuerdo otro... Demonios, recuerdo cuando utilizaba extensiones de ImageMagick cuando estaba estudiando PHP, y de eso os puedo asegurar que ya ha pasado mucho tiempo. De todas maneras, me he dado cuenta que recientemente muchos sitios albergan GIFs animados, los cuales se muestran al principio como una imagen estática y para que se vea el movimiento del propio GIF, o hay que pasar por encima con el ratón o simplemente hay que hacer clic. La estrategia tiene sentido debido a que los GIFs animados requieren muchos recursos de la máquina para ser reproducidos y su descarga es lenta y costosa. Necesitaba saber cómo llevar a cabo esto, y me acordé de la librería de imágenes que me ha acompañado tantos y tantos años. Me pregunté, ¿no hay alguna manera de implementar lo que he visto en otras webs con ImageMagick? Pues sí señores, sí la hay.

Para ello debemos ejecutar una sencilla línea de comando, siempre y cuando tengas instalado ImageMagick. La línea de comando a ejecutar es esta:

/opt/ImageMagick/bin/convert 'animado.gif[0]' frame.gif

Este comando coge el primer frame del gif animado y genera una nueva imagen con ello. Al principio se me hizo raro el uso del [0] pero me comprobé que ImageMagick lo reconociese como la posición del frame. Al indicarle la posición 0, estamos queriendo decir que queremos extraer la primera imagen, con la que comienza el GIF, para transformarla en otra nueva distinta. Con esta nueva imagen, podemos llamar a una función que ponga en marcha el GIF, simplemente llamando al original, cuando se hace clic, por ejemplo, sobre la imagen estática.

Me encanta que existan herramientas como ImageMagick, son un pilar básico dentro de su funcionalidad y hacen que nuestras vidas como programadores sean mucho más sencillas. Utilizando la estrategia de la "doble imagen" aumentarás también la velocidad de tu sitio, disminuyendo la carga de imágenes.

Dependiendo de la ruta hacia la instalación, tendrás que ajustar cuando se tire de ImageMagick.

Y este ha sido el artículo en el que trataba explicaros como combinar audio y video con ffmpeg, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP