: Responsive Design that Uses Different Images Sizes (big, medium & small) for Phones, Tablets, and PCs Our CMS creates 3 type of images size every time the content created: big, medium and small.
Our CMS creates 3 type of images size every time the content created: big, medium and small. We don't want to change our admin page that creates that 3 images types. Can anybody find a solution for our problem of creating a responsive front page using responsive design, which can load the different image for different browser sizes?
Mobile phone: small size images
Tablet : medium size images
PC: big size images
I have heard many thing about responsive design, but it doesn't seem to account for the image size, it still loads the big image even in the small device. I found another website that loads different images, but it creates the small images on the fly as the website is loaded, so, I would like to find a different technique.
More posts by @Rambettina238
2 Comments
Sorted by latest first Latest Oldest Best
No bulletproof solutions for this situation.
Try solutions for nginx gist.github.com/phpdude/1451684 without changing backend.
Or you can use hack: save picture in JPEG (like 1000x500) with quality 0 (zero, really)
On hi-res (retina) displays it will looks fine because ppi is high.
On normal displays use <img src="....jpg" height="250"> real height/2 It will looks fine too. Or set size over css.
And because quality is low this image has low size.
This solution for hi-res displays and normal. For mobile and low-res displays will be better use custom design with custom set of images.
Unfortunately there isn't really a good way to serve up different image files based on the browser view size or connection speed. You could resort to user-agent sniffing but that is less than idea.
For more information about potential future solutions I would recommend reading: On Responsive Images.
Also check out this Javascript/.htaccess based solution from Filament Group.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.