Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Juan Pablo Balarini

April 30, 2023

Other Decks in Technology


  1. Rails Conf 2023 JP Balarini CTO @ eagerworks @jpbalarini Faster

    websites: integrating next-gen images in your Rails apps
  2. Current Options JPEG (1992) -> .jpeg/.jpg PNG (1996) -> .png

    JPEG 2000 (2000) -> .jp2 Current standards have ~30 years!
  3. Next-gen Options WebP (2010) → .webp source: caniuse.com >30% size

    reduction AVIF (2019)→ .avif JPEG XL (2020) → .jxl
  4. 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)
  5. 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.”
  6. 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
  7. 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
  8. 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
  9. 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)
  10. 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
  11. 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?
  12. Option 03 • Have some script that converts to WebP

    ◦ Same digest as original asset • Handle redirection in Nginx (or similar) ◦ Rewrite rule • Development?
  13. 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
  14. 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
  15. • 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