How to optimize images and get load your site faster in browser.
If you encountered an issue with your app, I mean “slow loading in browser”. Then I suggest you to start with optimize images that are used in your application. Some times it happens that we forget to optimize our images before send product in production. But optimization is important part of development flow.
I’d like to start with png images.
In many cases we use png images like logo or some icons that aren’t large. But if you have large png images and these images are not loaded to your site dynamically then I suggest you to open that site: https://tinypng.com/ here you can upload your image and just wait for optimization. “TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size”.
If you have large jpg images like backgrounds you can optimize them here: http://jpeg-optimizer.com/ just upload your image and select quality that you want to use and size of image if you want to resize it, that’s it. JPEG-Optimizer is a free online tool for resizing and compressing your digital photos and images for displaying on the web in forums or blogs, or for sending by email. Completely Free.
One more thing that I want to say is that you can get optimized image after delete metadata from the image. Open this site: https://www.verexif.com/en/ upload your image and remove metadata that was added when the image was taken.
General things to get images optimized.
If you load images in your site dynamically from the server then you can setup an image proxy like this: https://imgproxy.net/ imgproxy is a fast and secure standalone server for resizing and converting remote images. The main principles of imgproxy are simplicity, speed, and security.
Another solution is to use CDN’s like: https://www.imgix.com/ imgix solves the context problem by making all of your images responsive and enabling on-the-fly manipulation, while improving delivery speed, imgix transforms, optimizes, and intelligently caches your entire image library for fast websites and apps using simple and robust URL parameters.
Thank you for reading, good bye 👋 .