Responsive Image Breakpoint Generator

Turn one image into the ideal set of per-device images

get it
#5 Product of the DayJanuary 27, 2016

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
220298
Nadav SofermanMaker@nadavsoferman · Co-founder, Cloudinary
You can find the free open source web tool here: http://www.responsivebreakpoints... Some background about the responsive breakpoints generator tool: Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It's time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly. Responsive web design requires developers to determine the image dimensions that best fit their website. This breakpoints generator tool helps developers automatically find the optimal image sizes needed for the best viewing experience in web and mobile apps on a variety of screen sizes. Common responsive image solutions tend to generate images based on a fixed set of image width values, disregarding the actual saving in file size bytes. To solve this problem, our breakpoint generator tool uses Cloudinary's advanced algorithms to easily generate best matching breakpoints for each uploaded image. The algorithmic concept is to find image width values that offer a significant reduction in file size. Images are analyzed to find the best breakpoints on an image by image basis, rather than creating all possible image resolutions, and enables developers to easily create 'picture' and 'img' HTML5 elements based on the calculated breakpoints.
39604
Diego Iglesias@diego_iglesias · CPO/Product Manager
I was struggling with my team about responsive image issues when I receive the Cloudinary email presenting this tool. Pretty amazing right? 😄 We'll use it for sure. Nice work @nadavsoferman
115623
Enrique Benitez@bntzio · 🦄 Full-Stack Developer and Maker
Amazing! I'm always struggling with responsive images in my projects, I'll definitely use this tool, it saves so much time when doing web projects :)
413134
Ruchi Goel@dnagoel
Great one for designers
248780
Scott Jacques@scottjacques
This is very cool. Not to turn the tool into a photo editor BUT might you allow/build in some very basic editing? As an example, see the link to a screenshot of your system with a photo I uploaded (original & then the 16:9 version). What would be amazing is if I had the ability to drag the photo (in the 16:9 preview area) in order shift the position of the photo before the "crop" is applied to all photos so that the head (my head) does not get chopped off? * That dead image below is a link to dropbox for viewing the screenshot. Not sure if it will show up (the inline URL). Here is alt URL to same image (https://goo.gl/Vwxatm)