What do people use for Responsive images?

Get Help and Help Others
1

I’m struggling with responsive images

I’d like an Image wrapper that takes width and/or height - calculating from their embedded size the missing one (or forcing to the given size of both HxW are given)

Thanks!

2

Have you looked into the srcset attribute that’s available on <img> tags now? Responsive images - Learn web development | MDN You give the URLs to several images, and the browser widths that should trigger using the different images, and then the browser does everything! If you’re on mobile you get an optimized image, if you’re on desktop you get an optimized image, and if you resize a browser from narrow to wide it’ll load new sizes in the background and replace on the fly. There’s also a native lazy loading attribute now: Lazy loading - Web Performance | MDN

If you use a host like Filestack or Cloudinary they’ll resize your stored images for you based on parameters in the URL, so you just provide several URLs in the srcset and they take care of the rest. Game changer!

3

I really like the services and components from the likes of:

They each have ways of generating the srcset as see: React library for imgix | react-imgix | imgix Documentation

Also, they can automatically compress and format (ie, auto optimize/convert) for the device rendering.

I’ve used Imgix a bunch in the past and been happy, though Imagekit is easier to upload new images to.