Images are a major part of any modern website, and with the explosion in video comes greater bandwidth use, which is not only costly for your IT budget, but for your user experience as well. It has been proven time and again that the longer your site takes to load, the smaller the number of visitors who will return. Every second that passes reduces your website's overall conversion and ultimately revenues, so it makes perfect sense to want to optimize your image and video delivery as much as possible. Join Cloudinary’s Solutions Engineer, Josh Slivken, as he examines the common mistakes that are being made in image and video implementation, and what you can do to avoid them in this workshop webinar.

1. Top 10 Things To Do When
Handling Images and Video
Josh Slivken
Solutions Engineer

2. “The Best Top 10 List”
- Josh Slivken, Cloudinary

3. https://cloudinary.com/blog/top_10_mistakes_in_handling_website_videos_and_how_to_solve_them
https://cloudinary.com/blog/top_10_mistakes_in_handling_website_images_and_how_to_solve_them

4. “The Best Top 10 List Of September 2019”
- Josh Slivken, Cloudinary

5. Agenda:
• Revisit previous concepts
• Give an update
• Introduce a few new ideas
• Questions

6. Images
Wasteful browser-side resizing Unnecessarily high quality JPEGs
Incorrect image file types
Delivering non-optimized images
Forgetting to strip image meta-data
Delivering images straight from your servers
Delivering static icons one by one
Using images when CSS3 can be used
Incorrect image cache settings
Using a single image size across all delivery mediums
Videos
Using the wrong video resolution
Using the wrong video codec
Using too high a video bitrate
Not using adaptive bitrate streaming
Not using modern video codecs
Not presenting multiple codec options
Using the wrong bitrate for the content
Not muting autoplaying videos
Using a heavy video player
Using a GIF instead of a video

7. Common Theme: Performance
Smaller File Sizes Faster Download Quicker Visibility
Better User
Experience
Lowered Fidelity
Dumpy-Looking
Media
Worse User
Experience
Retain Fidelity Improved Media
Better User
Experience

8. #1: Use Correct Image Dimensions

9. #2: Use Correct Image Dimensions
Width: 200px Width: 600px Width: 1800px
File Size: 11kb File Size: 54kb File Size: 296kb

10. #1: Use Correct Image Dimensions
• Use srcset and sizes where practical
• Integrate with responsive breakpoints API for even more efficient results

11. #2: Use Correct Video Dimensions

12. #2: Use Correct Video Dimensions
Width: 200px Width: 600px Width: 1800px
File Size: 69kb File Size: 425kb File Size: 2.9mb

13. #2: Use Correct Video Dimensions
• For background videos,
thumbnail previews, etc:
appropriately scale
• For videos in a player:
create multiple sizes to support
the desired use cases

14. #3: Use efficient Image Formats
#4: Use efficient Video Formats/Codecs

15. #3: Use Efficient Image Formats
Format: TIFF Format: JPEG Format: WebP
File Size: 8.57mb File Size: 910kb File Size: 658kb

17. #3: Use Efficient Image Formats
Format: PSD Format: PNG Format: WebP
File Size: 3.4mb File Size: 11kb File Size: 3kb

23. #3 and #4: Inefficient Image/Video Formats/Codecs
• First, no matter the uploaded format (JPG, TIFF, RAW, PSD, EPS, MP4, MOV, GIF, ETC),
create a derivation in a friendly viewing format for the web
• Second, utilize media queries to support advanced formats/codecs
• Third, ignore the first and second point and use auto-format on images and video

24. #5: Use Ideal Quality Settings

25. #5: Use Ideal Quality Settings
Quality: 25 Quality: Auto:Good Quality: 95
File Size: 19kb File Size: 54kb File Size: 115kb

26. #5: Use Ideal Quality Settings
Quality:40 Auto-Quality:Good Auto-Quality:Best
File Size: 47kb File Size: 133kb File Size: 209kb
Quality:80
File Size: 178kb

27. #6: Crop Correctly

28. #6: Crop Correctly
Center Crop
3:2 Aspect Ratio 1:1 Aspect Ratio

29. #6: Crop Correctly
Auto-Gravity Object-Aware Cropping

30. #6: Crop Correctly
Gravity: Auto Gravity: Bicycle

31. #6: Crop Correctly
Content-Aware Heatmap
Original Video
Auto-Gravity Crop Mask Portrait Crop

32. #7: Embrace Wide-Gamut Media

33. #7: Embrace Wide-Gamut Media

34. #7: Embrace Wide-Gamut Media
Capture: All across the board
Processing: sRGB
Browsers: sRGB
Screens/Devices: sRGB
Status Quo the last 20 years
Capture: p3
Processing: sRGB / P3
Browsers: sRGB / P3
Screens/Devices: P3
Starting with the iPhone7

35. #7: Embrace Wide-Gamut Media
GB – Firefox – MacbookPro

36. #7: Embrace Wide-Gamut Media
oPhoto – Firefox - MacbookPro

37. #7: Embrace Wide-Gamut Media
• Encourage/prepare for the use of media with expanded color support
• For media with an expanded color set…
• Make a decision in the browser with media queries
• Process server-side so you’re not relying on the browser

38. #8: Avoid Generation Loss

40. #8: Avoid Generation Loss
• Keep high-resolution/high-quality originals
• Derive directly from those originals to the final, delivered asset
• Work with creative teams to upload RAW, PSD, TIFF, etc files as close to content
creation as possible

41. #9: Keep Context in Mind

42. #9: Keep Context in Mind
• Background color?
• Adaptive bitrate streaming?
• Cache settings?
• Video placement and audio track?
• Meta-data removal (or not)?
Transparent Background Solid Color Background from Website
File Size: 187kb File Size: 90kb

43. #10: Periodically Regenerate Derived Assets

44. #10: Periodically Regenerate Derived Assets
• R&D doesn’t stop - take advantage of all the latest and greatest