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
   

   View Slide

2. Background
   

   View Slide

3. Web Images
   

   View Slide

4. Current Options
   JPEG (1992) -> .jpeg/.jpg
   PNG (1996) -> .png
   JPEG 2000 (2000) -> .jp2
   Current standards have ~30 years!
   

   View Slide

5. Next-gen Options
   WebP (2010) → .webp
   source: caniuse.com
   >30% size reduction
   AVIF (2019)→ .avif JPEG XL (2020) → .jxl
   

   View Slide

6. Motivation behind
   next-gen images
   

   View Slide

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)
   

   View Slide

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.”
   

   View Slide

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
   

   View Slide

10. View Slide

11. Real examples
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. Google’s case study: 1 million images
    

    View Slide

17. WebP
    

    View Slide

18. How to display a WebP image: enter picture tag
    Image tag:
    - resolution switching -> srcset
    Picture tag: (brother of and )
    - resolution switching -> srcset
    - art direction -> media
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. WebP + Rails
    

    View Slide

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
    

    View Slide

24. WebP + Rails
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

28. Option 03
    ● Have some script that converts to WebP
    ○ Same digest as original asset
    ● Handle redirection in Nginx (or similar)
    ○ Rewrite rule
    ● Development?
    

    View Slide

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
    

    View Slide

30. Let’s build this!
    

    View Slide

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
    

    View Slide

32. WebP Assets
    

    View Slide

33. View Slide

34. Carrierwave ActiveStorage
    

    View Slide

35. Picture tag helper
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. Internals
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. github.com/eagerworks/next_gen_images
    Next steps:
    - support other image formats
    - user-configurable
    Test it out!
    

    View Slide

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
    

    View Slide

45. Thanks!
    JP Balarini
    CTO @ eagerworks
    @jpbalarini next_gen_images
    

    View Slide