Welche Alternativen für animierte GIFs gibt es?

WebP ist ein Bildformat Einsatz sowohl verlustbehaftete als auch verlustfreie Komprimierung.
Es wird derzeit von Google entwickelt.

Vorteile animierte WebP im Vergleich zu animierten GIF -

• WebP unterstützt 24-bit-RGB-Farbe mit 8-bit alpha-Kanal, im Vergleich zum GIF-Format ist die 8-bit-Farben und 1-bit-alpha.

• WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung, in der Tat, eine einzelne animation kombinieren können verlustbehaftete und verlustfreie frames. GIF unterstützt nur eine verlustfreie Komprimierung. WebP ist die verlustbehaftete Kompression Techniken sind gut geeignet, um animierte Bilder erstellt aus realen videos, eine zunehmend beliebte Quelle für animierte Bilder.

• WebP braucht weniger bytes als GIF1. Animierte GIFs umgewandelt verlustbehaftete WebPs sind 64% kleiner, während die verlustfreie WebPs sind 19% kleiner. Dies ist besonders wichtig für mobile Netzwerke.

• WebP nimmt weniger Zeit zu entschlüsseln, in der Gegenwart zu suchen. In Blinken, scrollen oder Wechsel von Tab ausblenden und anzeigen von Bildern, was in den Animationen angehalten wurde und dann übersprungen vorwärts zu einem anderen Punkt. Übermäßige CPU-Auslastung führt, dass die Animationen mit Drop-frames kann auch verlangen, den decoder zu suchen nach vorne in der animation. In diesen Szenarien, animierte WebP nimmt 0,57 x so viel insgesamt decodieren Zeit2 als GIF, was in weniger jank beim scrollen und schnellere Erholung von der CPU-Auslastung spikes.

Nachteile animierte WebP im Vergleich zu animierten GIF -

• In der Abwesenheit von sucht, straight-line-Dekodierung von WebP ist CPU-intensiver als GIF. Verlustbehaftetes WebP nimmt, 2.2 x so viel decodieren, die Zeit als GIF -, während verlustfreies WebP dauert 1.5 x so viel.

• WebP-Unterstützung ist nicht annähernd so verbreitet wie GIF-Unterstützung, das ist tatsächlich universal.

• Hinzufügen WebP-Unterstützung, Browser erhöht die code-footprint und die Angriffsfläche. In Blinkt dieser ist rund 1500 zusätzlichen Zeilen code (einschließlich der WebP demux Bibliothek und Blink-Seite WebP image decoder). Beachten Sie, dass dieses problem reduziert werden könnte in der Zukunft, wenn WebP und WebM teilen mehr gemeinsame-Decodierung-code, oder wenn WebP Funktionen sind zusammengefasst in WebM.

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

InformationsquelleAutor der Antwort Vladimir

Ich verwendet ein jquery-plugin zum animieren eine Reihe von PNGs. Sehen http://blog.shynet.nl/post/2010/08/28/Alternative-to-animated-GIFs-AnimateImages-jQuery-Plugin.aspx

Ich bin nicht sicher, der Leistung des plugins mit großen Menge von Bildern. Ich habe es nur verwendet, um flimmern Symbole

InformationsquelleAutor der Antwort aporat

Mit jquery, ich bin in der Lage zu drehen 6 jpgs von einer lenticular-Sequenz hin und her, um erreichen die gleiche Ergebnis einer animierten gif-Datei; zum Beispiel, http://www.vicgi.com. Die Gesamt-Dateigröße für das 6 Bild ist nur 233KB. Das war ein animiertes gif wird es 11 frames und kann die Datei über 1MB. Nicht zu vergessen die Anzahl der Farben auf 256 beschränkt, die für ein 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:
Fügen Sie diesen code vor dem Ende des body-Tags, nehme an, Sie haben verknüpft, um jquery-cdn oder herunterladen.

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)
});

InformationsquelleAutor der Antwort Lenticular Printing

Dies war offensichtlich schon vor langer Zeit, aber die Zeiten ändern sich und .webm scheint ein guter Anwärter.

Kurz gesagt, es ist ein Medien-format, die bedeutete, zu sein, frei von Lizenzgebühren. Es würde genutzt werden mit der video-tag in HTML5 (siehe die Antwort von @KeithShaw) und würde einen browser, der entsprechende codec. Aber YouTube ist eines der Adoptierenden, sowie eine Reihe von anderen Branchen, die ich hier nicht nennen.

Dies ist die Projekt-Website: WebM-Projekt

InformationsquelleAutor der Antwort JasonWilczak