00:00:22
Hello everyone, better known as JP. This is my first time at RailsConf, and my first time speaking. Thank you for being here. I'm the CTO and co-founder at Eager Works, a Ruby on Rails-based development shop based in Uruguay. Today, I'm going to be presenting on faster websites through the integration of next-gen images in your Rails apps, and I'll explain what this fancy title means.
00:00:36
A little bit of background behind this talk: it comes from our work trying to improve the performance of our website. Our website serves as our presentation card, so we want it to be smoother and faster. One thing we noticed is that since our website is quite image-heavy and has a lot of animations, improving our images could translate into at least one second of faster loading times. Therefore, we wanted to improve this aspect, and I will show you the problems I faced during this process and the solution I developed, which is a new gem that streamlines this process.
00:01:45
Let's talk a little bit about web images. We all know what a web image is—formats like JPEG and PNG—but these standards have been around for over 30 years. JPEG, for example, originated in 1992. As you can imagine, in these 30 years, better alternatives should have emerged.
00:02:02
Indeed, new algorithms and compression methods have been developed. The first new image format to arise was WebP, created by Google a few years ago. It's open-source and royalty-free, meaning you can use it on your website today. According to data from 'Can I use', WebP is supported on all major browsers except Internet Explorer, but it does work on Microsoft Edge.
00:02:29
Another format that has emerged is AVIF, developed by a consortium that includes Google, Apple, Microsoft, and Netflix. This format is relatively new. Additionally, there's JPEG XL, which was created just two to three years ago but has limited browser support currently.
00:02:43
Before I continue, I would like to ask how many of you have used any of these formats on your production websites or are currently using them? Please raise your hands. Okay, just a couple. With these image formats, you can expect at least a 30% improvement in the file sizes of your images. In fact, I've observed improvements of up to 90% in certain cases, which we will explore later.
00:03:44
So what motivates the use of these next-gen image formats? The main motivation is to decrease image file sizes, which brings several important benefits. The first benefit is faster loading times. If you reduce the image size, everything loads more quickly.
00:03:59
This directly affects user conversion rates and how users perceive your website. In our case, we want it to be fast and smooth because we are a web agency, and we want people to believe we can deliver results quickly.
00:04:29
I will share some extracts from studies to illustrate this point. A couple of years ago, important data suggested that the highest conversion rates for e-commerce occur on websites that load in under two seconds. If your website takes more than two seconds to load, you're likely losing money. Additionally, for each extra second your site takes to load, you lose about 5% of your conversion rate.
00:05:26
Similarly, statistics from Telefonica, a leading mobile provider in Latin America and Spain, revealed that after they improved their mobile website's loading performance by 70%, they saw a 31% increase in click-through rates. Likewise, BMW experienced a 4-times increase in click-through rates following their site revamp.
00:06:02
Another vital aspect is SEO, or search engine optimization. For those unfamiliar, SEO helps optimize your website to rank higher on search engines like Google. One of the factors Google considers for ranking is loading times. According to Google's blog from a few years ago, loading times are a ranking signal for both desktop and mobile, making it essential for your website to load quickly.
00:06:30
Cost is another significant factor. You need to store images somewhere and pay for the bandwidth to transfer them. Let's consider Instagram as a case study. According to data, about 50,000 images are uploaded to Instagram every minute. If we assume each image is roughly 2 megabytes, that means Instagram needs to store approximately 144 terabytes of data per day just for the images that users upload. This is a conservative estimate because companies often don't just store one version of an image, but multiple versions for various resolutions.
00:07:11
Furthermore, during usage, users generate get requests to the server to transfer these images, resulting in huge data transfer. When I browsed Instagram for a few minutes, I found I could view about 50 images per minute. With 500 million active users, this translates to around 1.5 million terabytes of network transfer per day, which is a staggering amount.
00:08:00
The calculations suggest that Instagram would require around 40 to 70 million dollars per day just to store and transfer images. A decrease of 30 to 50% in image sizes could lead to substantial savings—potentially millions of dollars per day in operational costs.
00:08:36
Continuing in the same line of thought, let's review some concrete examples. If you look at Instagram, they are still using JPEGs on their website. Despite their enormous image upload needs, imagine how much they could save by switching to WebP or AVIF. Similarly, Elon Musk, when he took over Twitter, instructed his team to cut infrastructure costs by a million to three million dollars per day. They're still using old image formats like JPEG, which raises the question of how much they could save by switching to newer formats.
00:09:48
Using tools like Google Lighthouse, we can see that by switching to an exchange format (either WebP or AVIF), a website could save around one second of loading time. This reduction means that every user could load their feed significantly faster with these changes.
00:10:19
As we look at specific examples, there are several images that illustrate potential savings. For instance, one image was initially 450 kilobytes, and by switching to WebP, savings of around 421 kilobytes were possible—almost 90% of the image size could be saved. While these are just a couple of chosen examples, what would happen if we were to apply this to the entire internet?
00:10:54
When Google first introduced the WebP format, they analyzed one million images that represented a segment of the internet and found that on average, WebP provided a 40% reduction in size compared to JPEGs. This number could be even higher today, considering advancements in compression algorithms.
00:11:10
Although various image formats are available, my focus will be on WebP due to its broader browser support. In our Rails project, I was determined to implement it. There are a few ways we can go about it. The simplest way is to use the standard image tag, where you can directly specify the WebP source and it should work seamlessly.
00:12:37
However, the image tag supports resolution switching, allowing browsers to choose which format to use based on their capabilities. In HTML5, a picture tag was introduced, which not only supports resolution switching but also allows for image fallbacks. If a browser doesn’t support a certain format, it will try the next one in line, ensuring a smoother experience for users.
00:13:18
Now, how do we integrate all of this in a Rails application? Initially, I was disappointed to discover that Rails doesn’t natively support WebP or picture tags. It lacks built-in methods for automatic image conversion, which means you have to specify the full HTML yourself. Additionally, Rails lacks optimizations for serving WebP images.
00:13:48
During my search for existing third-party solutions, I found several gems that make questionable assumptions based on the unique needs of the person implementing them. These gems often lack sufficient documentation and support, which adds to the challenge of integrating new image formats.
00:14:30
The challenges I faced were varied; it's rare to find a single solution for this problem that suits everyone. Depending on the specific needs of a project, it may be better to maintain both WebP and older formats in tandem. Using Active Storage introduces additional complexity due to its dynamic nature.
00:15:18
In summary, my approach was to focus on two main aspects: converting image formats properly, whether static or dynamic, and ensuring I could display images using the picture tag effectively.
00:15:40
Ultimately, I implemented a Rails solution that handles converting static assets into WebP format during the asset pre-compile process. For dynamic assets, I created helper methods that integrate with both Active Storage and CarrierWave, allowing for easy image conversions to WebP.
00:16:11
I wrote a picture tag helper that gives developers the flexibility to specify multiple sources and formats. You can pass an image source, options for optimizations, or leverage automatic inference that generates WebP versions of images seamlessly.
00:17:44
I wanted to demonstrate how effective these changes can be. After implementing the new image handling processes, the website's loading time decreased by one second, and we saw significant reductions in image sizes, leading to improved SEO scores.
00:18:20
To conclude, I encourage everyone to explore using next-gen image formats in their Rails projects. Please check out the repository for the gem I've created.
00:18:32
We are committed to maintaining it since it's already in use on our own website. Future updates will involve adding more supported image formats to the gem and improving configurations to enhance user experience.
00:19:15
I’d like to conclude this session by highlighting that sometimes, Rails can trail behind newer technologies until major users adopt them. If we all work together, we can contribute to making Rails a better framework for everyone. I invite you to consider developing your own gems as well.
00:20:20
Thank you!