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…
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.
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.
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,
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.
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?
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.
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.
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.
