Image Optimization

Agenda● Overview● Image optimization technologies● Image formats● Our Approach● CDNs ● Caching headers● Best practices/Summary

Overview

● Image optimization techniques ensure that we reduce the page size/load time without compromising on the visual quality

● The web is built on a resolution of 72 pixels per inch whereas in high resolution devices like Iphones one needs more pixels

optimization tools & techniques

● Lossy vs lossless compression

● Progressive images

● Have various sizes of same image and load only what is necessary

● Tools

○ Jpegtran

○ ImageOptim

○ Kraken.Io (Using right now)

Image formats

● Need animation go for GIF● Need to preserve fine details go for PNG

● Most of other uses go for JPEG● WebP delivers a 30% filesize decrease over a

comparable JPEG image but supported only in new browsers

Our Approach(Part 1)

Stark

Hulk

Storage Service

cron

S3

Configuration

Kraken.IO

Content delivery network helps you do the following

● Distribute content with low latency and high data transfer rates

by serving requests using a network of edge locations around the

world.

● Apply cache settings

● Map multiple CNames(domains/sub domains) to same content

● Re-route requests based on request headers

● Some of them even resize images on the fly

Why multiple domains?

Popular CDNs

● Akamai (Facebook uses this)

● Cloudflare

● Imgix

● Cloudimage

● Amazon cloudfront (We use this)

Caching headers

● Cache images forever

○ Cache-Control:public, max-age=31536000

○ Expires: Mon, 25 Jun 2022 21:31:12 GMT

● Incase you have to refresh image

○ Last-Modified: Mon, 03 Jan 2016 17:45:57 GMT

○ If-Modified-Since: Mon, 03 Jan 2016 17:45:57 GMT

○ ETag: "15f0fff99ed5aae4edffdd6496d7131f"

○ If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"

Summary● Use CSS3 elements instead of images if possible

● JPEG is widely used image format. Webp gives same quality

with 30% reduction in size(has support in limited browsers)

● Use cache headers & cache images forever

● Use scaled images

● Use multiple sub domains for serving image requests