image - una - ¿Qué alternativas hay para los GIF animados?

programa para hacer gif con fotos

Question

¿Por qué esos molestos GIF siguen dominando cuando se trata de imágenes animadas? Estoy seguro de que hay mejores alternativas hoy en día, pero ¿por qué ninguno de ellos está ganando tracción?

Answer 1

Animación png o APNG ( http://en.wikipedia.org/wiki/APNG ). Se pueden hacer en GIMP con el complemento APNG. Pero los Gif animados son realmente los principales; el flash se hizo cargo, pero eso no es una imagen en sí misma.

Además, otras alternativas de la misma página de wikipedia: el formato de archivo MNG es una alternativa más poderosa que APNG, aunque es un formato más complejo y tiene menos compatibilidad con los navegadores web.

El formato de archivo GIF tiene mejor compatibilidad con aplicaciones y navegadores que APNG, pero está limitado a 256 colores por cuadro y solo admite la transparencia alfa de 1 bit, asignando uno de los colores de la paleta a transparente.

SVG combinado con scripting o SMIL puede animar gráficos vectoriales y puede incorporar gráficos rasterizados. (Ver animación SVG)

Los gráficos dinámicos creados con HTML 5 canvas Object también se pueden animar.

Un método alternativo para animaciones en páginas web es usar imágenes estáticas convencionales y animarlas usando JavaScript, [22] Adobe Flash, Microsoft Silverlight, Java u otras tecnologías basadas en complementos.

Answer 2

Como respondieron Nathan y otros antes, hay muchas formas de animar gráficos.

Personalmente prefiero

(1) crear el gráfico en Illustrator o Inkscape, etc.

(2) guarde el gráfico en formato .SVG

(3) incrustado el código SVG (es decir, todo entre y) en su página web y

(4) use snap.svg (javascript libary) para animar el gráfico svg incorporado. La mayoría de los navegadores modernos son compatibles con SVG

Answer 3

Con jquery, puedo rotar 6 jpgs de una secuencia lenticular hacia adelante y hacia atrás para obtener el mismo resultado de un gif animado; por ejemplo, http://www.vicgi.com . El tamaño total del archivo para la imagen 6 es de solo 233 KB. Si esto hubiera sido un gif animado, habrá 11 fotogramas y el archivo podría haber sido más de 1MB. Sin mencionar que la cantidad de colores está limitada a 256 para un GIF.

HTML

<!-- Reserve a div for showing the images with id=banner -->
<div class="row">
    <img id="banner" src="images/first_image.jpg" class="img-responsive">
</div>

Javascript : agregue este código antes de la etiqueta de fin de cuerpo, suponga que ha vinculado a jquery cdn o descarga.

var images = [
"first_image.jpg",
"second_image.jpg",
"third_image.jpg",
"forth_image.jpg",
"fifth_image.jpg",
"sixth_image.jpg",
"fifth_image.jpg",
"forth_image.jpg",
"third_image.jpg",
"second_image.jpg",
];   // add the images if necessary

numImages = images.length,
index = 1;  // start from the second image because first image is already in the HTML

function cycleImages() {
    image = "images/" + images[index];   // assume all the images are store in the images sub-directory
    $("#banner").attr("src", image);     // set the src attribute of the <img tag to the image to be shown
    index++;                             // advanced to the next image
    if (index == numImages) index = 0;   // recycle to the first image
}

$(function() {                          // start the rotation when document is ready
    setInterval("cycleImages()", 800)
});

Answer 4

Esto fue obviamente hace mucho tiempo, pero los tiempos cambian y .webm parece ser un buen contendiente.

En resumen, es un formato de medios que está destinado a ser libre de regalías. Se usaría con la etiqueta de video HTML5 (vea la respuesta de @KeithShaw) y requeriría un navegador que admita el códec apropiado. Sin embargo, YouTube es uno de los que lo adopta, al igual que varias otras industrias que no mencionaré aquí.

Este es el sitio del proyecto: Proyecto WebM

Answer 5

Me gustaría proponer el uso del video para imágenes animadas. Ahora existe un amplio soporte para la etiqueta de video en HTML5 y soporte casi igual para MPEG4 .

<video autoplay loop src="sample.mp4">

Con los atributos autoplay y loop, es fácil replicar el comportamiento de un GIF animado.

Reconoceré que la transparencia en el video sigue siendo un problema.

Answer 6

Mi sugerencia es: ver qué decide el comité HTML sobre este tema. Hasta entonces, GIF funciona para fotos de baja calidad y la etiqueta de video de HTML5 lo hará pasar por las páginas web, de todos modos. Las cosas nativas (no web) siempre han seguido la web en formatos de medios, de todos modos.

Answer 7

Usé un plugin jquery para animar una serie de PNG. Ver http://blog.shynet.nl/post/2010/08/28/Alternative-to-animated-GIFs-AnimateImages-jQuery-Plugin.aspx

No estoy seguro del rendimiento del complemento con un gran conjunto de imágenes. Solo lo usé para parpadear iconos

Answer 8

WebP es un formato de imagen que emplea compresión con y sin pérdida. Actualmente está desarrollado por Google.

Ventajas de WebP animado en comparación con GIF animado

• WebP admite color RGB de 24 bits con un canal alfa de 8 bits, en comparación con el color de 8 bits de GIF y alfa de 1 bit.

• WebP admite compresión con y sin pérdidas; de hecho, una sola animación puede combinar marcos con pérdida y sin pérdida. GIF solo es compatible con la compresión sin pérdida. Las técnicas de compresión con pérdida de WebP son adecuadas para imágenes animadas creadas a partir de videos del mundo real, una fuente cada vez más popular de imágenes animadas.

• WebP requiere menos bytes que GIF1. Los GIF animados convertidos a WebP con pérdida son un 64% más pequeños, mientras que los WebP sin pérdida son un 19% más pequeños. Esto es especialmente importante en las redes móviles.

• WebP toma menos tiempo para decodificar en presencia de la búsqueda. En Blink, las pestañas de desplazamiento o cambio pueden ocultar y mostrar imágenes, lo que hace que las animaciones se pausen y salten a un punto diferente. El uso excesivo de CPU que da como resultado animaciones que dejan caer cuadros también puede requerir que el decodificador busque avanzar en la animación. En estos escenarios, WebP animada toma 0.57x tanto tiempo total de decodificación2 como GIF, lo que resulta en menos jank durante el desplazamiento y una recuperación más rápida de los picos de utilización de CPU.

Desventajas de WebP animado en comparación con GIF animado

• En ausencia de búsquedas, la decodificación de WebP en línea recta consume más CPU que GIF. Lossy WebP toma 2.2 veces más tiempo de descodificación que GIF, mientras que WebP sin pérdidas consume 1.5 veces más.

• El soporte de WebP no está tan extendido como el soporte de GIF, que es efectivamente universal.

• Agregar soporte WebP a los navegadores aumenta la huella del código y la superficie de ataque. En Blink, se trata de aproximadamente 1500 líneas adicionales de código (incluida la biblioteca de demodulación WebP y el decodificador de imágenes WebP del lado del parpadeo). Tenga en cuenta que este problema podría reducirse en el futuro si WebP y WebM comparten un código de descodificación más común, o si las capacidades de WebP están incluidas en WebM.

https://developers.google.com/speed/webp

Answer 9

El formato MNG es un formato similar a PNG para animaciones, pero no parece haber ganado mucha popularidad. Entonces, es solo una cuestión de adopción, ya que los GIF animados funcionan bien (y no tienen restricciones de patentes), ¿por qué no usarlos? ¿Por qué reparar lo que no está roto?