Minimized Files and Images
Honey I shrink the files
Minimized Files
Build process when an app is ready for production using Webpack to minimize HTML, CSS and JS files. Because machine does not care about indentation or white-spaces, so we eliminates these to get more optimized files.
Minimized Images
Know the difference between JPG, PNG, GIF and SVG and their specific usage.
Rules of thumbs:
If you want transparency: use a PNG
If you want animations where colour is not issue: use a GIF
If you want colourful images: use a JPG
If you want a simple icons, logos and illustrations: use a SVG. Can be expanded beyond its original size and still look sharp
Reduce PNG with TinyPNG website
Reduce JPG with JPEG-optimizer
Try to choose simple illustrations over highly detailed photographs where applicable
Always lower JPG image quality (30-60%) before saving the files
Resize image based on size it will be displayed
Display different sized images for different background. (i.e. media queries CSS, but downsides is you need to save different files in different sizes for different devices)
Use CDN like imigx. Uploading all the images into an optimized external server.
Remove image metadata (good for security as well to remove unnecessary info about the photo - like device to take the picture and the location of the image)
Last updated