Web optimizations:Back to the basics

Răzvan Roşu

Media content

Images have been introduced into the web since the early ‘90s with the <img> tag.

Video and audio files started being used under the <object> tag and switched to <video> tag and <audio> tag with html5.

Flash content has been used at some point (‘member 2advanced?).

File sizes

Media content STILL occupies large proportions of web applications.

Developers have always been facing this issue.

Solutions: ● optimizations: compression algorithms (lossy and lossless),

improved formats (svgs), gzipping● techniques: loading specific content for targeted devices,

lazy loading● hacks: sprites, icon fonts

Case study: Google Pixel landingpage

Short analysis:(19 oct 2016)

36.3 MB75 requests

14 PNGs2 JPGs6 GIFs1 video16 SVGs

What can we do...● Lossy compression on PNGs and JPGs● Improved Format conversion:

○ PNGs and JPGs to WEBM○ Video conversion to WEBM

● SVG stripping + spriting*-compressed.jpg,

*.jpg, *.png *-compressed.png *.webp

*.mp4 *.webm

*.svg sprite.svg

What can we do...● Add HTML5 tags for fallback formats:

<picture> and <video>

What can we do...

● Polyfill unsupported HTML5 tag: <picture>

https://github.com/scottjehl/picturefillAttention: it has some minor glitches

Results:

36.6 MB 7.1 MB 75 requests 31.2MB

59 requests

Honorable mentions:1. Image attribute SRCSET

a. Not supported on IE11b. Can be polyfilled with Picturefill (same from above)

2. Image format BPG (Better Portable Graphics)a. Can be used with a decoderb. Can autoplay on mobile phones (not necessarily a good thing imo)

Honorable mentions:3. Improved compression format: Brotli

Thank you!