I have been trying to understand what would be the best size images to use in my new design using Foundation. It is a simple site for our historic vacation rental, so will have text, images, a calendar, a form for submitting reservation requests, an activites page, etc. I think I get that:
- The images should not be too large - slows down loading; especially on mobile devices
- They should be optimized eg. with ImageOptim
- They need to be good quality for larger screens and retina displays
- Warehousing is good
This is where I get a little shaky. My site will have photos, that will be JPG format. Other images will be PNG (icons, etc). I am going to stay with the default 1000 pixel max width (unless I hear that I should not).
SO, do I need to create multiple copies of the same image at different sizes for mobile/tablet/desktop (I see the Foundation image stack has this option) or will the stack do appropriate resizing? But then I see that small devices with retina displays actually need more detailed images (ie. 4X the pixels).
The pictures from which I will create the files for the site are about 10 megapixel JPG’s at 500 X 500 PPI,
For example, for my first image that will span most of the width at full screen, I created a 1200 X 800 file at 150 PPI, shaving close to 80% of the file size.
Time to shut up and see what people have to say - thanks in advance!