Picture_tag helper simplifies using the HTML <picture> tag for responsive images in Rails applications.
We wanted to use the HTML <picture> tag in our website for responsive images, specifically for art direction, but we found that Rails did not have built-in support. This led us to create a gem to fulfill this need and share the concept in a RailsConf talk. Many attendees encouraged us to incorporate this feature into Rails, creating this pull request.
Have a look at This week in Rails Newsletter.
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 density, or orientation.
Supports multiple image loading options
It enables developers to load multiple images and gracefully fallback to alternative formats if a particular image format is not supported.
This RailConf talk explores the latest and most effective options for web images that significantly reduce website size without compromising quality. We presented how using next-gen images can significantly impact website loading times, user conversion, and SEO. Also, a new gem that streamlines the process of using WebP images with Ruby on Rails was introduced.
Check out the complete presentation here (Youtube video coming soon).
Here are some of the projects we’ve built or contributed to.
Next Gen Images
This gem brings next-gen image formats to Ruby on Rails. We developed next_gen_images not only to facilitate image format conversion but also to provide a helper to generate picture tags with multiple sources. While the gem continues providing image format automation, now that the picture tag helper is part of Rails, the gem's focus is purely to automate the image conversion process.
This is where you’ll find the source code for all the projects, tutorials, and examples of our blog. Each of our technical blog posts is accompanied by a practical coding example. Our posts cover a wide range of tech topics in various technologies such as Ruby on Rails, Node.js, Next.js, React, among others.
What you'll find:
