Nachlese zum Meetup #101 – Grafikformate

Im Februar hat Marco einen Vortrag zum Thema Grafikformate gehalten. Es wurden Eigenschaften, Vor- und Nachteile der Formate erläutert und zahlreiche Optimierungsmöglichkeiten empfohlen.

1989 GIF

Paul Bonser – The Tiniest GIF Ever
Kornel Lesiński – Gifski: Highest-quality GIF encoder
TechCrunch – Gasp: Twitter GIFs aren’t actually GIFs
web.dev – Replace animated GIFs with video for faster page loads

1992 JPEG

Björn Buxbaum-Conradi – Warum ist das JPEG-Format so weit verbreitet?
DOCMA. – JPEG-Version 9 ermöglicht erstmals eine verlustfreie Komprimierung

Jpegcrop, Better JPEG, u.a. Tools beherrschen die „JPEG lossless transformation“, eine Vielzahl von Operationen (Drehen, Spiegeln, Beschneiden, Invertieren, …) ohne Neuberechnung und Qualitätsverlust.

Mit Photoshop 6.0 konnten User variable Qualitätsstufen für Textebenen oder Alpha-Kanäle definieren („Weighted optimization“). Dies ermöglichte es, weniger wichtige Bildbereiche stärker zu komprimieren. Seit Version CS4 fehlt dieses Feature wieder, der WebService Compress Or Die unterstützt es weiterhin.

golem.de – Google verkleinert JPEG-Bilder um ein Drittel
Mit Guetzli sind Jpeg-Dateien den Angaben zufolge im Schnitt zwischen 20 und 30 Prozent kleiner als die, die mit dem herkömmlichen Encoder Libjpeg erstellt werden. In einigen Fällen seien bis zu 35 Prozent kleinere Dateien möglich. An Guetzli arbeitet Googles europäisches Forschungsteam mit Sitz in Zürich. Die Gruppe ist auch für die Zlib-Alternative „Zopfli“ und deren Nachfolger „Brotli“ verantwortlich.

1996 PNG

Kornel Lesiński – Whenever you can use GIF don’t. Use PNG instead.
TinyPNG im WordPress Plugin repository
pngquant Programm zum verlustbehafteten Komprimieren bei voller Alpha-Transparenz
ImageOptim macOS GUI für pngquant u.a. Bibliotheken zur Komprimierung von anim GIF, JPEG und SVG
Color Quantizer PNG-Optimierung für Fortgeschrittene, verzichtet seit 0.7 auf PngOut zugunsten von Zopfli

2004 APNG

Browser   Browser Can I use APNG
Photoshop Photoshop keine Unterstützung*
WordPress  WordPress Unveränderte APNGs in Originalgröße bleiben animiert. Für neu generierte Größen wird ImageMagick 7.0.10-31 benötigt, andernfalls wird ein statisches PNG ohne Animation erzeugt.

*Workaround: Einzelbilder exportieren und mit APNG Assembler zusammenfügen: Web ‧ Win ‧ Mac ‧ Ubuntu

gif2apng – converts animations from GIF to APNG format
IONOS Digital Guide – Grundlagen und Tutorial: APNG erstellen
TinyPNG.com – Apple adopted the APNG format for animated stickers in iMessage

2001 SVG

Browser   Browser Can I use SVG ‧ SVG animation
Photoshop Photoshop Import als Smart Object oder gerastert, Export seit August 2021 eingestellt*
WordPress  WordPress offenes Ticket seit Februar 2013

*Adobe’s Bildbearbeitung ist vorrangig auf Pixelgrafiken ausgerichtet. Für Vektorgrafiken empfiehlt sich stattdessen der Einsatz des Open-Source-Editors Inkscape

Safe SVG – WordPress Plugin für den Upload und die Bereinigung auf Basis der SVG Sanitizer Bibliothek
SVG use – reduziert Dateigrößen, indem sich wiederholende Elemente und Gruppen kopiert werden
SVGOMG! – Web GUI für SVGO zum Optimieren von SVG-Vektorgrafikdateien
W3Schools – Try-it Yourself Examples

2015 Lottie

kulturbanause.de- Lottie-Animationen
wordpress.org – Lottie block für Gutenberg

2010 WebP

Browser   Browser Can I use WebP
Photoshop Photoshop seit Version 23.2
WordPress  WordPress seit Version 5.8

heise tipps+tricks – Was ist das WebP-Format?

Squoosh – an image compression web app that reduces image sizes through numerous formats. Squoosh does not send your image to a server. All image compression processes locally.

Curtail – an awesome Image Compressor Tool for Linux, supporting PNG, JPEG and WebP files. It support both lossless and lossy compression modes and makes use of the open source libraries OptiPNG, pngquant, and Jpegoptim.

2018 AVIF

Browser   Browser Can I use AVIF
Photoshop Photoshop nur via Plugin
WordPress  WordPress nur via Plugin

2021 JPEG XL

Browser   Browser Can I use JPEG XL
Photoshop Photoshop AVIF and JPEG XL are new formats and therefore, support is limited
WordPress  WordPress derzeit nur via Cloudinary Plugin

golem.de – Brunsli macht JPEGs 22 Prozent kleiner
In den vergangenen Jahren hat Google verschiedene Codierungstechniken vorgestellt, dazu gehören die generischen Kompressionstechniken Zopfli und Brotli. Hinzu kommen die Metrik für Bilder, Butteraugli, der darauf basierende JPEG-Encoder Guetzli sowie der experimentelle JPEG-Decoder Knusperli. Nun folgt also Brunsli für JPEG XL. Damit wollen Google-Entwickler JPEG-Dateien verlustfrei um bis zu 22 Prozent verkleinern können. Das Format ist Teil von JPEG XL und bereits für den Webeinsatz verfügbar.

Jon Sneyers – Overall, for the same visual quality, JPEG XL is ~17% smaller than AVIF, which is ~17% smaller than WebP, which is ~17% smaller than JPEG.

golem.de - JPEG XL ist das überlegene Bildformat. Aber Chrome und Firefox brechen die Implementierung ab

heise.de – Firefox unterstützt JPEG XL nicht mehr

cloudinary.com – Vergleichstabelle: Bildformat-Features

Bonus

Old School Color Cycling with HTML5
Living Worlds in HTML 5 (Extra Features) 
 

Demo: Website Video mit Transparenz
CodePen: Transparent video for the web