Optimise Images For Web | Contrast Swap - TheMindSpeaks
CSS filters are great as they allow you to get photoshop like effect in the browser and they can also be used for indication hover state, hiding password and improving image load time as well. I know it sounds a little awkward but it is possible using a technique call Contrast Swap.
Which works by reducing the contrast of an image which decreases its file size and then restoring contrast of the image inside the browser using CSS to make it look good again in the browser. Simple isn’t?
How we are going to do it.
It is simple we will use a software like Adobe Photoshop or Apple Photos or any other piece of software to reduce the contrast of the original image and then saving it and using CSS filters on the image to restore its quality back to normal using CSS.
How that we know everything let’s go get going.
For this tutorial, we will need
An image
A photo editing software
And all sort of stuff web developers need
CSS filters are released under CSS’s Filter Effect Module which is currently at level 1 is still in working draft phase. And it is supported by all major browsers except internet explorer.
------------- Good Read Stuff
CSS Filters Info MDN - https://developer.mozilla.org/en-US/d...
CSS Filters in action - https://www.sitepoint.com/css-filter-...
Advanced Filters - https://iamvdo.me/en/blog/advanced-cs...
---------------------------------------------- TheMindSpeaks's Social
Facebook Page - / themindspeakss
Twitter - / themindspeakss
Google ++ - https://plus.google.com/+Themindspeakss
---------------------------------------------- MY SOCIAL LINKS
Twitter - / sidtheangel
Instagram - / sidtheangell