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
PhotoshopPhotoshop keine Unterstützung*
WordPressWordPress 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
PhotoshopPhotoshop Import als Smart Object oder gerastert, Export seit August 2021 eingestellt*
WordPressWordPress 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
PhotoshopPhotoshop seit Version 23.2
WordPressWordPress seit Version 5.8heise 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
PhotoshopPhotoshop nur via Plugin
WordPressWordPress nur via Plugin
🥳 Update März 2024: WordPress unterstützt das Format AVIF seit Version 6.5,
Photoshop-Nutzer sind derzeit noch auf ein Windows-Plugin angewiesen
- 2021 JPEG XL
- Browser
Browser Can I use JPEG XL
PhotoshopPhotoshop AVIF and JPEG XL are new formats and therefore, support is limited
WordPressWordPress 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