Does Blocs 3 do this automatically for each Breakpoint?
Has anyone used this or anything like it?
Is there any software that can take an image and generate a set of images?
Responsive Image Breakpoints Generator v2.0
Social Media image generator
2 Likes
I use sproutsocial regularly, but merely as a means of preparing images quickly for Facebook Open Graph and Twitter Card. It’s just that bit faster and easier than doing things manually in a photo editor. The images are then uploaded to a folder on the server via FTP and I rely on code in the header to pull up those images as required.
Foundation automatically loads different image versions depending on the chosen device. In a nutshell you have to choose a mobile image, then larger sizes are optional and Foundation then relies on Interchange to serve the correct version. I’ve read it is possible to implement Interchange within Bootstrap, however it is not standard or automatic.
To answer your initial question, Blocs doesn’t do this automatically. There are various apps out there that can resize images to specific sizes, however it is the automatic selection and usage within Blocs that is the bigger challenge. In some instances I make use of custom classes to apply different sized background images, dependent on breakpoint, which is easy and effective in Blocs.
1 Like
Thank you @Flashman for replying 
Your insight was helpful and interesting. From what I can tell sproutsocial is a paid service, am I correct?
I have not had time yet, but I do plan on looking at Foundation.
I find it interesting that Blocs does not automatically serve a smaller size image file. Does that mean if I have image, optimized and reduced to say, 300kb, that when a user goes to my website on their mobile device the speed is slower because I don’t have a 32kb image?
If that’s the case it sounds like we should have 4 image file each one sized for it’s own breakpoint.
I like to hear from @Norm, although he is already working like a one arm paper hanger. @Eldar, @Jakerlund, @Whittfield, @Bill
Blocs already let you have a different image for 3 breakpoints. You just have to resize the images for each breakpoint. Yes, it’s more work but it is possible. In the first version of Blocs this was not possible. Norm added the ability along the way from users request.
I know some web designers optimize their images an don’t use three images in all areas. An optimized image in today internet normally loads pretty fast. There are exceptions, but I rarely use three images.
Casey
1 Like
Thanks Casey. 
@KBConcepts I don’t know about other services provided by sproutsocial, but I am able to use that part for free. Just upload an image, choose your options and download the images ready for Twitter Card etc.
You cannot use Foundation generally inside Blocs. It’s s totally different platform. With interchange you still have to choose images manually during the design stages, however it will only download the correct image on the website. Somebody here found a way to make interchange work within Bootstrap Bootstrap data interchange? - Stack Overflow
I’ve used Foundation quite a bit in the past as a viable alternative to Bootstrap, however this was through Rapidweaver and it was painfully slow to work with. This was the key reason I started with Blocs.
@casey1823 I think these are not so much dependent on breakpoints as screen resolution.
This is some good information, even apart from Foundation.
Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.
jQuery responsive design toolkit HTML5 ▰ Mobile-first optimized
Hi @KBConcepts ,
If you really want to get into adaptive images, then you should look into image srcset property. It’s fairly well supported on all modern browsers now. Here’s a simple example that only uses srcset when you’re switching between device resolutions: Image srcset attribute example
You can get more device-specific by using sizes property, here’s a simple example: Responsive images with srcset and sizes attributes vs picture element – Learnedia
It’s all possible, you just need to learn how & when to apply each size 
Bill
BricsDesign
Thanks, @Bill for your reply.
Looking at this these it reminds me how much I need to learn.
Once you get the code how do I implement it into Blocs?
And if you update your Blocs file later, do you have to insert the same code or does it become part of Blocs?
Well, I just did a bit of experimenting - Norm may say this is all wrong, but this is what I did. Put whatever structure you want and then place a div and inside the div put a code widget and some code similar to this:
This will show lanterns on retina device & red leaves on std. resolution device.
I think the classes will be necessary, not sure if you need all of those or not, but that’s what a standard image generates, so a good point to start from 
1 Like