Web Performance Boost with Modern Image Formats

Why Image Optimization Matters

                
                The median desktop page loads 1,026 KB of images, 509 KB of JavaScript, 72 KB of CSS, and 31 KB of HTML
                
            

Why Image Optimization Matters

• Improves page load times (Page weight)
• Boosts SEO and conversion rates
• Enhances user experience on e-commerce platforms
• Images are "low hanging fruits"🤮, good luck with the JS framework

Legacy Image Formats

• JPEG, PNG, GIF
• Widely used but inefficient in terms of file size
• Lossy compression, lower-quality images

JPEG

Samplesize: 565Kb, 519Kb optimized (8%)

• no transparency
• ~16 mio colors
• compression 1:10
• jpegoptim

                    
                        jpegoptim --strip-all -p  koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.jpg
                        find ~/htdocs/pub/media/ -iname '*.jpg' -exec jpegoptim --strip-all -p {} \; > ~/jpegoptim.txt
                    
                

PNG

Samplesize: 2Mb, 1,6Mb optimized (20%)

• transparency
• 256 - ~16 mio colors
• deflate compression
• optipng

                    
                        optipng -o7 -preserve  koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.png
                        find ~/htdocs/pub/media/ -iname '*.png' -exec optipng -o7 -preserve {} \; > ~/optipng.txt
                    
                

GIF

Samplesize: 666Kb, 666Kb optimized (0%)

• transparency
• 256 - ~16 mio colors
• LZW compression (PNG is 5-25% better)
• gifsicle

                    
                         gifsicle --batch --optimize=3 koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.gif
                    
                

Modern Image Formats

• WebP, AVIF, JPEG XL
• Better compression rates, reduced file sizes
• Superior visual quality with smaller file sizes

WebP

Samplesize: 425Kb, 66Kb optimized (85%)

• cwebp

                    
                        cwebp -q 50 original/koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.jpg -o optimized/koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.webp
                    
                

AVIF

Samplesize: 791Kb, 87Kb optimized (~85%)

• magick

                    
                         magick original/koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.jpg -quality 50 optimized/koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.avif
                    
                

JPEG XL

Samplesize: 443Kb, 133Kb optimized (~70%)

• cjxl

                    
                        cjxl original/koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.jpg
                        optimized/koeln-bei-sonnenuntergang-august-2019-6a678d56-1fc1-4941-a18b-04b69558eff4.jxl -d 2 --lossless_jpeg=0
                    
                

Optimizing Without Conversion

Tools for Developers

Optimize legacy formats with cronjobs as shown above

Optimizing Without Conversion

Tools for Users

Your "normal" picture Tool

Web-Tools

Backend-Jobs in Shops

- or ask your friendly Developer

Case Studies: craftmanship doin' the easy task

Just cron the shit out of the CLI

see above, just optimize existing things

Case Studies: modules for PHP-driven Online Shops

How easy you can implement image optimization

• Magento 2: multiple free and paid modules
• Sylius: symfony based image optimizer module
• Shopware 6: subscription module (or symfony.based module)

Case Studies: Services for Online Shops

Image Manipulation and Caching-Services

• Magento2: smoxy (less work, more comporession)
• Magento2: cloudflare image optimization(more work, less comporession)