From idea to integration: image optimization at RailsConf 2023 & picture_tag helper

RailsConf 2023 provided me with the perfect platform to share my insights and experiences on optimizing website performance and enhancing SEO through the implementation of next-gen images. In this blog post, I will recount my journey, from identifying the need for image optimization to my RailsConf talk, creating a gem that automates image conversion, and introducing a picture_tag helper to Rails.

 

The first steps: optimizing website loading time for enhanced SEO performance

From my first talk at Ruby Meetup Montevideo to the picture_tag helper, there was a winding path of small but important steps. But it all originated from a need that arose on our own website. Our website has a lot of animations and motion graphics, which affect loading time, one of the most important aspects of technical SEO. In other words, decreasing loading time is one of the first thing to tackle to improve a website's SEO performance. Recognizing that image weight plays a significant role in loading time, we sought a solution to reduce image size while maintaining image quality. WebP images come in; a highly recommended format due to its ability to offer superior image quality without compromising file size.

Although Rails provides the image_tag helper, we found it inadequate for our needs as we frequently encountered scenarios where multiple images needed to be loaded and adapt to different devices, and it is not suitable for handling different files for different sizes (art direction). Considering that some browsers still do not support WebP format, we needed to incorporated fallback options to ensure compatibility. By providing an alternate image format as a fallback, we catered to users accessing our website through browsers that did not support WebP.

We required an efficient method to automate the conversion of JPG images to WebP format during the upload process, as well as a helper that could create a picture tag with multiple sources (i.e., WebP and PNG/JPEG). 

My focus was to add improvements in two main aspects: 

1. Automating image format conversion: To streamline the conversion process, we developed an automated mechanism that converted uploaded JPG/PNG images to WebP format, ensuring all images on our website were stored in the optimized format.This is specifically useful for art direction. 
2. Creation of a helper for picture tags: Since Rails lacked built-in support for the picture tag, we developed a gem that not only facilitated image format conversion but also provided a helper to generate picture tags with multiple sources. This allowed us to effortlessly include responsive images on our site.

 

So how can picture_tag helper benefit rails developers? First, it is perfect for responsive image generation: the picture tag empowers developers to create responsive images that dynamically adjust their size based on the browser's dimensions, pixel denstity or orientation. And in the other hand, it supports multiple image loading options: the picture tag helper enables developers to load multiple images and gracefully fallback to alternative formats if a particular image format is not supported. You can prioritize the latest, smallest format and progressively try others if necessary.

 

From Idea to Stage: My experience as a Speaker at RailsConf 2023

Motivated by the success of our implementation, and after sharing it at a talk in Ruby Meetup in Montevideo, I took the opportunity to submit a proposal to present at RailsConf. The content was slightly redefined to adapt it to such a technical conf, the feedback and suggestions received during the application process was incredibly enriching. You can have a look at the presentation here. 

At RailsConf, I received encouraging feedback from attendees, some even urging me to make a pull request to Rails itself. Inspired by this positive response, I integrated the picture tag helper into Rails, and it was successfully merged. I was really impressed by Rails' codebase; despite its extensive size, it’s so well-designed and modular, that it was relatively straightforward to introduce my changes.

 

Future plans for picture_tag helper

RailsConf provided an incredible platform for me to share my journey of optimizing web performance and SEO through the implementation of next-gen images. By automating image format conversion and introducing the picture tag helper, we successfully improved our website's loading speed and overall user experience. You can learn more about how to use picture_tag helper on your website in this blog post.

While the gem continues to provide image format automation, now that the picture tag helper is part of Rails, my future plans involve refining the gem's focus to purely automate the image conversion process. This will allow Rails developers to benefit from the gem's functionality without redundant features. 

I am excited about the future prospects of the gem and the opportunities it presents for Rails. To dive into other interesting topics in Rails, you’re invited to visit our blog!