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!
OK - so before even getting any replies, I went forward with my understanding, and created different size images for the site. Small mobile images, with stack set to always load mobile first, then @2x versions, twice the size, then larger size for tablet and above, with @2x of those as well. After using ImageOptim, sizes are very reasonable and seem to look OK on my devices.
Please have a look at my test site and give me any feedback you may have on the design so far: http://www.charlestoncottage.com/rwsite/
it is password protected at present:
user: Demo
pw: $CharCott
I’ve been through a similar scenario with a site I completed recently using Foundation. One observation is that I don’t really see the point of always loading mobile first, since this would actually slow down loading on tablet or desktop browsers.
To me it makes more sense for Foundation to detect the browser type and then automatically provide the appropriate image. At present your site shows a small image appear briefly before being replaced by a bigger one on a desktop browser. I set my mobile images to appear no wider than 275px on screen.
For general file sizes try this. If you want an image to appear as 400x400 on the screen simply save it as 800x800 at 72dpi. You then define the size on screen as 400x400 inside Foundation and it will look good on regular or retina displays. I tried Image Optim but prefer the results I achieve with Photoshop.
Thanks. I will look at that and see what I get next time I update the files. I am working on completing the page and creating the rest of the pages for the site this week. Will post a notice when I have it all up for people to critique.
I don’t believe there is an answer to this question now that we have umpteen phone and tablet and screen sizes, some retina, some not, some held landscape, some portrait.
One of foundations selling points was its fast loading, but this sadly is counteracted (not its fault!) by having to load huge images “just in case”. Personally I would ignore retina and just do the one large size, and resize it in the phone/tablet cases. Definitely use svg wherever you can, i.e. not photos.
Probably wrong but I don’t get paid enough to do 6 versions of each photo!
I understand what you mean. This is the solution I ended up going with. I have larger, higher res images for those who want them but basically I stick with very small mobile and one larger size for tablet/desktop. Seems to work pretty well and looks pretty good. Thanks for your input!