Ideal sizes for images for mobile, tablet and desktop

Classic General
1

Hi
I’m new to Rapid Weaver and wondered if anyone could suggest the ideal size and resolution of images for mobile, tablet and desktop please. This is as used in the Foundation image stack.
I actually need to put a full page image into a site to be responsive on each of these devices but my query is of a general nature and not just for that issue.
I usually use png format. Is this advisable?
Many thanks in advance.
Gordon

2

Hi Gordon,
quickly some general informations which will (hopefully) help you to start:

  • all images should be 72 dpi in RGB format (both jpg and png files).
  • use the jpg format for photos and the png format only for logos and line art graphics.
  • if you’re not using a special tool for compressing the images (I can highly recommend JPEGmini) choose a jpg-quality of about 75 to 85 %. The pictures shouldn’t be larger in size than about 250 to 300 KB in the end.
  • the pixel measurement should ideally be exactly the maximum size how the image appears on the site (if in doubt, make the image a bit larger, never(!) smaller). The pixel measurement is always individual regarding the width of the website and/or the way you are placing it there (maybe only in 1 column, or even stretching across the whole content width).
  • if you want the image to open enlarged in a lightbox, choose a bigger size (for example a width of 900 pixel).
  • you can use 1 image for all devices if you want, no problems with that (and to be true that’s the way I’m mostly doing it). In Foundation you have the choice for having different pictures for different devices. This can help with the loading times of the page, but you don’t HAVE to use this. For a quick start you can simply use the slot for mobile only.

Hope this helps a bit.
Best, Matthias

1 Like
3

For mobile I generally make the images no wider than 275 pixels. As already mentioned Foundation allows you to select different sizes for mobile tablet and desktop, but I tend to find that tablet sizes can also be used for desktop and there is no need to add the image again for desktop.

For logos PNG is not a bad suggestion but if possible SVG is better. They weigh less and there is no drop in quality at bigger sizes. For photographic images stick with Jpeg.

If you want to use retina resolution Jpegs you need to double the file dimensions but due to the wonders of pixel density you can actually save them with heavy compression and they’ll still look good, despite the small file sizes.

2 Likes
4

Many thanks for your response. I did reply to the e-mail but the reply bounced back to me.
Will try your suggestions when I return from holiday in two weeks.

You help very much appreciated.
Gordon

5

Hi Mathias
As I said to Ashleykaryl who also replied I did respond to the e-mail but it bounced back to me.
I will give some effort to you suggestions when I return from holiday in two weeks.

Looking forward to publishing my first RW site.

Thank you and kindest regards
Gordon

1 Like
7

You can select a max width for each screen size can’t you? Or, in that instance, have the columns break to 2x2 on mobile?

I can’t remember my Foundation settings off the top of my head. Good consideration nonetheless, but I think there are workarounds.

9

Sincere thanks to all for your support.
Setting off from Yorkshire this pm for a couple of weeks in Bonnie Scotland.
Will catch up on return.

All the best
Gordon

10

Hello all.
Back home and back to the job in hand.
Putting all your comments together I decided to base my calculations on the maximum site width which seems fairly logical. Immediate problems all resolved and feel comfortable working with this now.
My thanks to all
Kindest regards
Gordon.

13

Your website is not built with RapidWeaver. You’re a spammer.