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 {
background-color: yellow;
}

@media screen and (min-width: 900px) {
body {
background: url('./large-background.jpg') no-repeat center center fixed;
background-size: cover;
}
}

@media screen and (max-width: 500px) {
body {
background: url('./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: http://www.verexif.com/en/

Index