I have an image catalog page that I built in Foundation using the Foundation Image Stack. The images were saved to size – 230px wide by 150px high at 300 dpi. Saved out as maximum quality jpegs not saved for web. When I view the images in Safari on the desktop or iPhone they’re not as sharp as viewing in Photoshop. Am I missing a setting?
Well, first the web does not see in anything higher than 72 dpi so saving it as 300 is not worth it. Try unchecking always load mobile first
2 Likes
As Robert said, saving JPEGs at more than 72ppi is just slowing down the page load and wastes space on the server. 300ppi should be considered for print only.
If you want your images to be compatible with Retina and similar screens, make sure that the dimensions (not resolution) of your images are twice as big as they should appear on screen. Then, limit their dimensions to 50% within stack’s settings. That way, devices with or without Retina screen will pick the right size and display images correctly.
2 Likes
I’ll try that! Thank you Robert and Rob D. Rob D how do you limit the dimensions to 50%? The “Define Max-Width” check box?
I think different stacks define it differently. But in this case (looking at your screenshot), when you check the Define Max-Width, you’ll get more options and you’ll be able to restrict the size to 50%.
1 Like