Optimizing Rich Content for Web.
Hi Everyone, Suraj Here back again with an article on optimizing Rich contents for Web Applications.
Data is Currency !Well Said by someone . Lets Talk about some features of a good web App in terms of Data Consumption and Performance. A web app consists of various contents like Images, Videos,Text, Animations and many more and what if these contents are super heavy and not well optimized for balanced Performance on various Devices.In this article we are going to talk about media optimization techniques that you can use for Super performing Web Apps.
1.Pick The Right media Format.
For Artwork,Clipart, Emoji, Logo use SVG or PNG format.
For Photos use JPEG format.
For Animation use GIF format.
Their are other format exists but they are not supported by all devices like WebP, APNG, JP2, JPX.
2. Remove EXIF data from your media content.
EXIF stands for "Exchangeable Image file format" which contains all information about image like location,Camera Model and many more properties , remove this before publishing your media content on web.
For Removing Exif Data. their are various tools available or you can use any online tool like http://exifremove.com/
3.Resize the image.
Resizing does not means making a smaller image we need to thing about the performance on different devices with different screen resolutions. always make 3 versions with 3 size of any media content. it should be in order of 1X, 2X, 3X .for example take an image with 300px then make other two versions with 600px & 900px. You can use any tool available or use online tool like http://www.picresize.com/
4.Compress the Image.
After resizing and removing EXIF data the next thing is to compress the image to reduce the memory space and bandwidth consumption. for compressing the image you can use online tools like https://tinypng.com/ for compressing JPG or PNG file.
5. Always use "srcset" attribute in images to give multiple images as a source(1x, 2x, 3x) and the target device will automatically pick the best image according to screen size. for reference use the below code snippet.
These are some of the basic Optimization technique that you can use for making your user Happier. I hope you liked this article. for any help feel free to contact me.
1.Pick The Right media Format.
For Artwork,Clipart, Emoji, Logo use SVG or PNG format.
For Photos use JPEG format.
For Animation use GIF format.
Their are other format exists but they are not supported by all devices like WebP, APNG, JP2, JPX.
2. Remove EXIF data from your media content.
EXIF stands for "Exchangeable Image file format" which contains all information about image like location,Camera Model and many more properties , remove this before publishing your media content on web.
For Removing Exif Data. their are various tools available or you can use any online tool like http://exifremove.com/
3.Resize the image.
Resizing does not means making a smaller image we need to thing about the performance on different devices with different screen resolutions. always make 3 versions with 3 size of any media content. it should be in order of 1X, 2X, 3X .for example take an image with 300px then make other two versions with 600px & 900px. You can use any tool available or use online tool like http://www.picresize.com/
4.Compress the Image.
After resizing and removing EXIF data the next thing is to compress the image to reduce the memory space and bandwidth consumption. for compressing the image you can use online tools like https://tinypng.com/ for compressing JPG or PNG file.
5. Always use "srcset" attribute in images to give multiple images as a source(1x, 2x, 3x) and the target device will automatically pick the best image according to screen size. for reference use the below code snippet.
These are some of the basic Optimization technique that you can use for making your user Happier. I hope you liked this article. for any help feel free to contact me.
Comments
Post a Comment