Faster and cheaper websites: integrating next-gen images in your Rails apps

Did you know loading images accounts for nearly 50% of your website’s total load time? Also, every additional second of load time results in a 5% decrease in conversion rates, which directly impacts your business. What if I told you there’s a simple way to decrease loading time?

This talk will explore the latest and most effective options for web images that significantly reduce website size without compromising quality. We’ll discuss how using next-gen images can significantly impact website loading times, user conversion, and SEO.

We’ll also go through the different challenges that I faced while integrating next-gen images into a Rails project and how I solved them. A new gem will be presented that streamlines the process of using WebP images with Ruby on Rails.

Transcript

1. Rails Conf 2023 JP Balarini CTO @ eagerworks @jpbalarini Faster websites: integrating next-gen images in your Rails apps
2. Background
3. Web Images
4. Current Options JPEG (1992) -> .jpeg/.jpg PNG (1996) -> .png JPEG 2000 (2000) -> .jp2 Current standards have ~30 years!
5. Next-gen Options WebP (2010) → .webp source: caniuse.com >30% size reduction AVIF (2019)→ .avif JPEG XL (2020) → .jxl
6. Motivation behind next-gen images
7. Telefónica improved load times for its mobile site by 70% — from six seconds to only two seconds in 3G connections. These improvements helped the company increase click-through rate by 31%. The highest ecommerce conversion rates occur on pages with load times between 0-2 seconds. (Portent, 2019) Loading time → User conversion Website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0-5). (Portent, 2019) BMW mobile site revamp: people clicking from BMW.com to a BMW sales site went from 8% to 30% (~ 4X higher)
8. SEO | Search Engine Optimization From Google’s Blog: “Users want to find answers to their questions quickly and data shows that people really care about how quickly their pages load. The Search team announced speed would be a ranking signal for desktop searches in 2010 and as of this month (July 2018), page speed will be a ranking factor for mobile searches too.”
9. Usage: Assume 50 images/minute/user Uploads: 50k uploaded images per minute (assume 2MB / image) Storage: 0.002GB * 50000 = 100 GB / min Motivation behind image size: Instagram case study -> 144,000 GB/day ~ 144 TB/day 29 minutes average/user * 500,000,000 DAU = 14,500,000,000 minutes of usage per day 14,500,000,000 minutes/day * 50 images/minute = 725,000,000.000 images served per day -> ~500,000,000 images / min Transfer (CDN ->user): 500,000,000 images/min * 0.002 GB = 1,000,000 GB/min ~ 1,440,000 TB/day
11. Real examples
16. Google’s case study: 1 million images
17. WebP
18. How to display a WebP image: enter picture tag Image tag: <img> - resolution switching -> srcset Picture tag: <picture> (brother of <video> and <audio>) - resolution switching -> srcset - art direction -> media
22. WebP + Rails
23. WebP + Rails No native support for: • Pre processing: JPEG/PNG -> WebP • Displaying WepP: there’s no picture_tag helper • Serving WebP images No good 3rd-party options: • assume a lot of things (specific reality of who implemented it) • solve part of the problem (conversion, display, serving) • don’t even work • no stars / community (unmaintained) • bad documentation
24. WebP + Rails
25. Multiple problems to solve • Converting images to WebP • Handle both static and dynamic assets ◦ /app/assets/images ◦ Carrierwave, ActiveStorage, etc • Correctly handling the picture tag: view helper • Serving WebP: Nginx redirection? • Asset digests • Handling dierent files for dierent sizes (art direction) • Working in development -> what about images that are not yet converted? • WebP images not still in the asset path (sprockets-manifest file)
26. Option 01 Use something that already exists: hps://github.com/kavu/sprockets-webp → Doesn’t work. Only compiles assets hps://github.com/0xjmp/rails-webp Bug with assets digest. Only compiles assets
27. Option 02 Let’s manually maintain WebP images alongside PNGs/JPEGs • really hard to maintain • what about dynamic assets? • helper to display them alongside PNGs/JPEGs?
28. Option 03 • Have some script that converts to WebP ◦ Same digest as original asset • Handle redirection in Nginx (or similar) ◦ Rewrite rule • Development?
29. Option 04 WebP assets • Static assets ◦ add them somehow to assets/images ◦ precompile them to public/assets • Dynamic assets have to be handled separately Picture tag • Specify everything if needed (picture tag aributes, source, etc) • Automatically take JPEG/PNGs and inference WebP images files paths • Take into account both static/dynamic assets
30. Let’s build this!
31. Selected approach WebP assets • Convert existing static JPEG/PNG images to WebP with ◦ .enhance() the assets:precompile task • Dynamic assets are converted separately ◦ helper to generate WebP versions Picture tag • Add a picture_tag helper for 3 use cases: ◦ full control -> pass a block ◦ Array ◦ automatic inference -> add_webp option
32. WebP Assets
34. Carrierwave ActiveStorage
35. Picture tag helper
39. Internals
43. github.com/eagerworks/next_gen_images Next steps: - support other image formats - user-configurable Test it out!
44. • hps://developer.chrome.com/blog/search-ads-speed/ • hps://blog.hubspot.com/marketing/page-load-time-conversion-rates • hps://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-site-speed-im portance/ • hps://developers.google.com/speed/webp/docs/c_study • hps://developers.google.com/speed/webp/docs/webp_study • hps://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b • hps://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsiv e_images • hps://www.reuters.com/technology/musk-orders-twier-cut-infrastructure-costs-by-1-bln-s ources-2022-11-03/ • hps://stackoverflow.com/questions/71587757/rails-6-1-4-ruby-3-0-1-activestorage-and-webp -image-format Reference
45. Thanks! JP Balarini CTO @ eagerworks @jpbalarini next_gen_images