Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Doug Sillars, profile picture
Uploaded byDoug Sillars
PPTX, PDF362 views

Imagesandvideo stockholm fastandbeautiful

This document discusses 4 simple optimizations that can be made to images on websites to improve performance: 1) Reducing image quality, 2) Using optimized file formats like JPEG, WebP and SVG, 3) Resizing images to actual display size, and 4) Implementing lazy loading so images outside the viewport are not downloaded. It provides examples and data on how each technique can significantly reduce data usage and improve load times.

Technology◦
Download to read offline
Delivering Fast and Beautiful Images Doug Sillars @DougSillars Stockholm Tretton37 March 19, 2019
Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars Freelance Developer Relations Performance Audits: Web/Native Workshops: Performance/Images/Video http://bit.ly/HighPerformanceAndroidApps
0.5 0.6 0.7 0.8 0.9 Standing in Line Standing on the edge of a virtual cliff Experiencing Mobile Delays Solving a Math Problem https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf Stress
Large Downloads Induce Delays in Rendering 3s: 53% of Users Abandon Mobile Sites 500ms: 26% Frustration 8% Engagement 100ms: 1% Revenue Walmart & Amazon (Desktop 2001) 4% Mobile Users Throw Their Phones https://www.doubleclickbygoogle.com/articles/mobile-speed-matters http://bit.ly/mobileWebStress http://www.globaldots.com/how-website-speed-affects-conversion-rates/ https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html
Images make up 50% of Web Content HTTPArchive mobile websites 15/02/18
7.9 MB
3.5 MB
4 Simple Image Optimizations
4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
4 Simple Image Optimizations Httparchive.org Webpagetest.org
4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
Image Quality magick -quality 85 riga.jpg riga85.jpg http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg Lighthouse: Recommends 85% quality on all images https://developers.google.com/speed/docs/insights/OptimizeImages
100% 3.6 MB http://res.cloudinary.com/dougsillars/image/upload/v1529005982/IMG_20180614_184507_ssuk1i.jpg
85% 1.87 MB q_85 http://res.cloudinary.com/dougsillars/image/upload/q_85/v1529005982/IMG_20180614_184507_ssuk1i.jpg
Image Quality Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
Image Quality Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
50% 914 KB q_50 http://res.cloudinary.com/dougsillars/image/upload/q_50/v1529005982/IMG_20180614_184507_ssuk1i.jpg
20% 513 KB q_20 http://res.cloudinary.com/dougsillars/image/upload/q_20/v1529005982/IMG_20180614_184507_ssuk1i.jpg
Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
Automate Quality vs. File Size • Butteraugli • SSIM: Structural SIMilarity https://github.com/technopagan/cjpeg-dssim cjpeg-dssim jpegoptim riga.jpg http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
SSIM 1.46 MB http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
Results: • Test Load on Motorola G4:
4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
Image Formats – Average Size HTTPArchive mobile websites 15/02/18
Image Formats – Average Size HTTPArchive mobile websites 15/02/18
Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
Scalable Vector Graphics (SVG) Images drawn as shapes infinitely scalable XML - Can be added inline to HTML document https://gist.github.com/hail2u/2884613?short_path=66a60ff
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
Scalable Vector Graphics (SVG) <style > .svgorange { filter: invert(.5) sepia(1) saturate(5) hue-rotate(5deg); } </style> <img class="svgorange" src ="map- marker-circle.svg"> https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6
Scalable Vector Graphics (SVG)
Image Formats – Average Size HTTPArchive mobile websites 15/02/18
File Format: WebP https://caniuse.com/#feat=webp
SSIM + WebP 986 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_
File Format: Web <picture> <source width = "100%" type="image/webp" srcset=”riga.webp"> <img width = "100%" src=”riga_cjpeg_dssim.jpg" alt=”Riga, Latvia"> </picture>
Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
Image Sizing -
Image Sizing
Image Sizing -
Image Sizing 624 832 -
Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
Image Sizing https://twitter.com/paulcalvano/status/928751141843808256
Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
Responsive Breakpoint Generation https://github.com/cloudinary/responsive_breakpoints_generator http://www.responsivebreakpoints.com/
Responsive Images
Responsive Images
Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
Lazy Load https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
Lazy Load https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
Preview Images
Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
Lazy Loading: Experiments
Lazy Loading: Chrome Experiments
Lazy Loading: Chrome Experiments
Animated GIFs Original MP4 1.4 MB
Animated GIFs
Animated GIFs Animated GIF 3.8 MB 270% larger
Animated GIFs “The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.” -GIF89a Specification https://www.w3.org/Graphics/GIF/spec-gif89a.txt
Animated GIFs
Animated GIFs MP4: 256 colors 247KB 93% smaller
Animated GIFs: Social Media
Animated GIFs: Social Media #FAKENEWS
Animated GIFs: Social Media
Animated GIFs: as Video! Video Tags: <video loop autoplay muted playsinline controls = "false” src="goats.mp4”/> Img tags are fast! <picture> <source type="video/mp4" srcset=”goats.mp4"> <source type="image/webp" srcset=”goats.webp"> <img src=”goats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
Animated GIFs
Video: Don’t Download More on Mobile Desktop Mobile
Video: Don’t Download More on Mobile Desktop Mobile @media only screen and (min-width:1024px) Don’t Download Video That Is Not Displayed
Video Preload = “auto” Only use with high probability video views!
Video Preload • preload = “metadata” • Only downloads first x% of the video
Background Video
Video Background Video (as Downloaded): 5.3 MB Video 5 MB Audio 250 KB 5% of file Best Practice: To save bandwidth, remove the audio stream from videos that are played silently.
Video Background: Mobile Best Practice: If Viewport will not support Video… Don’t Download it
Background Video
Video Background
Video Background 33.6 MB 27s 2560 x 1226 10 MBPS
Video Background Best Practice: Resize Video to reasonable size. 33.6 MB 27s 2560 x 1226 10 MBPS
Video Background Best Practice: Resize Video to reasonable size. PROTIP: Renaming the file is not enough…
Video Resizing • 1920x1080: 8.1 MB • 1280x720: 4.3 MB • 1080x608: 3.3 MB • 720x405: 1.76 MB http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4
Video Background: Mobile
Video Is Not Cheap
Video Is Not Cheap
Video Is Not Cheap