Web optimizations Back to the basics - Razvan Rosu
-
Upload
razvan-rosu -
Category
Internet
-
view
104 -
download
0
Transcript of Web optimizations Back to the basics - Razvan Rosu
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
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...
● Polyfill unsupported HTML5 tag: <picture>
https://github.com/scottjehl/picturefillAttention: it has some minor glitches
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)