Image size advise please

L.S.

I am building a website in RW/Stacks/Foundry, temporarily parked at www.zozobanana.com. I need to solve the issue of many of my website pages loading very slowly. I am taking steps as advised in this blog…

The first step is to ‘size appropriately’ and that is where I could use some advice from the experts here:

In Foundry you can choose different image sizes for mobile, tablet, and desktop.

  1. What would be the ideal image sizes for each of these screen sizes?

  2. What about banner image sizes for each of those screens?

  3. How do you take into account retina screens, given - again - that I can only choose between mobile, tablet, and desktop?

Thank you very much,

Jim

I think first off, and there are no right answers, only suggestions to ideal image sizes. It depends a lot on the layout of the pages.

How much space are you allowing each image to be displayed in?

If you place an image inside a multi-column stack that has a maximum width then you need to determine how many pixels of screen width the image is allowed For each breakpoint.

The smaller screen sizes might have a wider width than the other breakpoints since the columns may stack.

So there’s no real rules for optimal image sizes that can be applied to every image.

Also, consider how many images you have on a page. Ten 300kb pictures on a page is much slower than one 1.5mb image.

Again there’s no set answer. Banners go edge to edge, so each of the smaller breakpoints you can figure out the maximum display area allowed. But the largest size(desktop) can be as wide as the users screen.

Most websites have a maximum width for the main content area(nonbanner). Currently, the significant frameworks like Bootstrap and Foundry cap the width at around 1200px. Content is centered on screens wider than that. Users, of course, can have the browser set as wide as their monitor allows, but they get ”whitespace” on each side of the main content area.

So it’s a balancing act, if you set the banners to a huge width, folks that have their browsers set to a larger width get a clearer picture but everyone else gets a slower page load and no benefit.

You also need to consider the importance of the image. Is it a ”main” subject or just a background.

Thank you very much Doug.

The best thing you can do in my experience is to adjust the DPI for your images. 72 dpi was the standard before retina screens, now 96 dpi is more appropriate. In either case it will greatly reduce file size for the screen. The human eye can’t discern a 600 dpi file on the screen.

That sounds like a great plan. Thanks!

Oh, just checking and excuse my total amateur question but… see the Photoshop screenshot please:

Where it says 300 now, is that where I would input 96 to change the dpi to the approbate level or is this something else?

The DPI settings refer to print. Retina displays won’t affect the dpi setting. To have a higher Res image on a website you need to load a separate (4x larger) image.

Anything above 72dpi won’t make the image any sharper.

This article explains it. Have a look at the sample images and even on retina display you won’t see any differences. Look at the 3 kitty pictures,

2 Likes

Keith,

Sorry to blow your bubble, but you’ve got some mess in your information.

72 ppi (not dpi – see Doug’s comment) is still the standard – at least on Macs. The apparent higher resolution on Retina screens is a result of the fact that it packs double the amount of pixels horizontally and double vertically. Hence its 4x increase in resolution. Whereas 96 ppi is native in Windows OS.

Thank you Rob.

Please help me out here: So this is where I would set the PPI, right…?..

Since the pixel count is fixed for any device, image resolution will not impact how a photo looks on that device. You can export an image at 72 PPI, 96 PPI, or even 5,000 PPI, but for a given device, you will not see any difference in how the picture looks. It is the picture size – the physical number of pixels along the length and width – that changes how the image looks on a particular display screen, not the image resolution.

Jimmy, if you still need (or want) to use Photoshop for prepping your images for web, I suggest you use the ‘Save for Web…’ command (Cmd+Opt+Shift S). In there, change the dimensions of the image to the largest size that can fill out your web page (in case of banner image, you should probably double that). Set the Color Depth to 8 bits per channel and sRGB Color Space; image format: JPG; quality: 30-50% (that really depends on your personal preferences); no sharpening (sharpening increases the file-weight); no embedding of Color Profile (it doesn’t hurt much, but most browsers do not take advantage of color profiles).

Remember that increasing sharpness, contrast, clarity, brightness, saturation in Photoshop also ever-so-slightly increases the file-weight (and vice-versa). Using Noise Reduction also reduces file-weight. Some people even blur an image very slightly to further reduce its file-weight.

Once you got your maximum dimension JPG out of Photoshop, you can use something like ‘ImageOptim’ for further reduction of file-weight and ‘Retrobatch’ to generate additional smaller sized images.

P.S. For retina, double the image’s hight and width, not ppi count).

Thank you. However, and therewith immediately giving away that I do not fully understand all this yet, then what do you recommend for website images in terms of PPI?

I saved all of my images at 300 PPI. Now, in order to lower the file sizes - and thus increase the web site loading speed - should I rework that to 72 or 96 PPI? What do you recommend?

72 ppi for web. 300 dpi is for print.

The reason for using 72 ppi on the web is that it results in much smaller file size than 300 dpi, while visual quality remains as good as it gets.

It makes no difference what so ever
Turn off resampling and export/upload the file at 72ppi do the same at 5ppi and look, it will not matter. It’s all about the dimensions NOT the ppi.

1 Like

It makes no difference as to quality, file size/weight, or both?

BTW, if anyone wonders

  • ‘dpi’ stands for ‘dots per inch’ – and it refers to the raster size of a printing plate;
  • ‘ppi’ stands for ‘pixels per inch’ – and it refers to a computer screen.
1 Like

It makes no difference to quality.

Think of it like this, your screen has a fixed resolution (number of pixels x and y) which equates to a FIXED ppi. No matter what the ppi of a digital image is the screens display can’t change.

it’s the size of the image that matters (the dimensions) set that relative to the size of the container the image is in on the page and, if accommodating retina screens make one twice that size for the retina image.
(Do not resample the image)

Do what I said above and you will see. 5ppi or 5,000ppi will make no difference at all in the quality displayed on your screen.

1 Like

Thank you so very much. Learning a lot!

Thank you! Very helpful.

Yes, but the OP is asking about cutting the size of the file. One way to do that is to decrease the resolution of the file. In the case of a file meant for the web this is a sure way without significantly degrading the size or pixilating the image which I believe is what the OP is after. YMMV.