Shrink an elephant into a fly

• 20 pictures, 1.1 MB
• Made it 385 KB
• Took 1 minute

• Content
• Interface

Formats

GIF is a genre,
not a format anymore.

Video

            <video autoplay loop muted>
                <source type="video/webm" src="bolt.webm">
                <source type="video/mp4" src="bolt.mp4">
            </video>
        

            $ ffmpeg -i bolt.gif -movflags faststart -pix_fmt yuv420p -crf 0 bolt.mp4
        

CSS graphics

                .burger {
                    position: relative;
                    width: 12px;
                    height: 10px;
                }
            

                .burger__line {
                    position: absolute;
                    left: 0;
                    width: 12px;
                    height: 2px;
                    background-color: #4b86c2;
                }
            

CSS graphics, better

                .burger {
                    width: 12px; height: 10px;
                    background-image: repeating-linear-gradient(
                        #4b86c2, #4b86c2 2px,
                        #fff 2px, #fff 4px
                    );
                }
            

Manual SVG

            <svg width="120" viewBox="0 0 12 10" fill="#4b86c2">
                <rect width="12" height="2" x="0" y="0"/>
                <rect width="12" height="2" x="0" y="4"/>
                <rect width="12" height="2" x="0" y="8"/>
            </svg>
        

CSS Paint API

            div {
                --burger-color: #4b86c2;
                background-image: url('burger.png');
                background-image: paint(burger);
            }
        

            CSS.paintWorklet.addModule('burger.js');
        

CSS Paint API

            class Shape {
                static get inputProperties() {
                    return ['--burger-color'];
                }
                paint(context, geometry, properties) { … }
            }
            registerPaint('burger', Shape);
        

CSS Paint API

            const color = properties.get(
                '--burger-color'
            );
            context.fillStyle = color;
            context.fillRect(0, 0, 120, 20);
            context.fillRect(0, 40, 120, 20);
            context.fillRect(0, 80, 120, 20);
        

CSS Paint API

            div:hover {
                --burger-color: #32b332;
            }
        

Export

1. Export wherever you want
2. Compress with tools

Content

            <img src="cat.jpg" alt="Red cat">
        

Interface

            button {
                background-image: url(icon.png);
            }
        

Content?

            div.picture {
                background-image: url(picture.png);
                background-size: cover;
            }
        

Content!

            img, video {
                object-fit: cover;
                object-position: 25% 0;
            }
        

Good interface
is like a progress bar.

Base64

            button {
                background-image: url('data:image/png;base64,iVBORw0K
        EUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV
        AAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA
        MAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE
        ABBkAAAgyAAAQJABLJBGFFAIAgAwAAQQYAAIIMAAAEGQA…');
            }
        

URL encoding

            button {
                background-image: url('data:image/svg+xml,%3Csvg xmlns
        ='http://www.w3.org/2000/svg' viewBox='0 0 12 10'
        fill='%234b86c2'%3E%3Crect width='12' height='2'
        x='0' y='0'/%3E%3Crect width='12' height='2' x='0'
        y='4'/%3E%3Crect width='12' height='2' x='0' y…');
            }
        

1. External resources could be cached
2. Critical resources needs to stay lightweight

Links