recentpopularlog in

abberdab : optimization   5

Performant Web Animations and Interactions: Achieving 60 FPS - Milliseconds Matter
Silky smooth interactions are critical for providing a natural-feeling application. The devil is in the details, and ill-performant web animations feel awkward, “janky”, and, above all, slow. Developers often invest quite a bit of time to reduce first page loads by even a few milliseconds, but forget to consider the impact of the interactions that follow.
css  animation  performance  optimization 
august 2017 by abberdab
CodePen - JPNG.svg (Transparent PNG with JPEG Compression)
Combine the transparency of a PNG with the compression of a JPEG. Based on the idea from Using SVG to Shrink Your PNGs, but adapted to use data URIs instead of external images. Include on your page as inline SVG, using an <img src="image.svg"/> tag, or as a background-image.

This technique is tested & working in all modern browsers, IE9+ and Safari 9+. Run the image test yourself to see if it works in required browsers. Inline seems to be the best option for compatibility, in which case you should use external assets so that they can be cached.
image  png  svg  alpha  transparency  optimization  compression 
august 2017 by abberdab

Copy this bookmark:

to read