So for a while now at my company we’ve been working with responsive using Bootstrap
Something that we’ve always struggled with is getting the right image dimensions designed so that they are suitable for all breakpoints/devices (i.e. the images are clear and don’t have a big impact on site performance).
We’ve tried using high-resolution PSDs (300 dpi, obviously more akin to print than web) to get the right image size as a starting point (though this has performance issues - see my point about the third-party application used to resize) and have now dropped down to 72dpi for all designs again but this only suits some of the breakpoints (mobile images are blurry, especially on Retina displays).
We use a third-party application to resize our images - so we start with the highest resolution and then change the width defined within the URL to pull through a suitable image for that size (e.g. /images/1200/myimage.jpg can become /images/768/myimage.jpg). This application is a bit hit and miss when it comes to performance though as all images are generated by effectively “screenshotting” and resizing the image accordingly to create the variation, so starting with a high resolution image and requesting a lower resolution version can sometimes mean the filesize is higher, weirdly. The application will also happily “oversize” images (e.g. if I supplied the original at 1200px, I could request a 1500px version and it would generate it, but it would be low quality).
So, I guess what I’m looking for is some advice on how to develop for responsive images, but also how the design team can design for all breakpoints and supply the images for us to use in a PSD. Note that we will still be continuing to use the third party application for images but don’t necessarily have to use the resizing service.