Image Optimization

Minimize Images

• If you want transparency: use PNG
• If you want animations: use GIF
• If you want colorful images: use JPG
◇ Always lower JPG image quality (30 - 60%) when you save it
• If you want simple icons, logos, and illustrations, use SVG

• Reduce PNG online with TinyPNG (http)
• Reduce JPG online with JPEG-optimizer (https, can do jpg as well)

• Try to choose simple illustrations over highly detailed photographs
Resize image based on size it will be displayed
• Display different sized images for different screen sizes
◇ Save image as different files for different screen
◇ By using CSS media queries

/* style.css */
>= 900px, show large-background.jpg
> 500 px and <900x: yellow background
<= 500px, show large-background.jpg

body {

@media screen and (min-width900px) {
body {
backgroundurl('./large-background.jpg') no-repeat center center fixed;
background-size: cover;

@media screen and (max-width500px) {
body {
backgroundurl('./large-background.jpg') no-repeat center center fixed;
background-size: cover;

• Use CDNs like imigx
◇ imgix transforms, optimizes (auto reduce), and intelligently caches your entire image library for fast websites and apps using simple and robust URL parameters
◇ You can include the URI provided from imigx in your codes to display images
• Remove image metadata
◇ View and remove EXIF online: