optimize your images
TRANSCRIPT
![Page 1: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/1.jpg)
Image Optimization
![Page 2: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/2.jpg)
Agenda● Overview● Image optimization technologies● Image formats● Our Approach● CDNs ● Caching headers● Best practices/Summary
![Page 3: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/3.jpg)
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
![Page 4: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/4.jpg)
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)
![Page 5: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/5.jpg)
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
![Page 6: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/6.jpg)
Our Approach(Part 1)
Stark
Hulk
Storage Service
cron
S3
Configuration
Kraken.IO
![Page 7: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/7.jpg)
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
![Page 8: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/8.jpg)
Why multiple domains?
![Page 9: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/9.jpg)
Popular CDNs
● Akamai (Facebook uses this)
● Cloudflare
● Imgix
● Cloudimage
● Amazon cloudfront (We use this)
![Page 10: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/10.jpg)
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"
![Page 11: Optimize your images](https://reader036.vdocument.in/reader036/viewer/2022083115/58a51ee11a28ab143f8b56c9/html5/thumbnails/11.jpg)
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