How to get images really sharp when optimized

I am creating a site for an artist.
I have optimized the images. But in doing so it makes them not quite sharp.
HERE Password: Ink

Its a deal breaker thaat I get them sharp, the originals are sharp and v high res … not sure where im going wrong

It isn’t that you need to get the images sharp, you need to start with sharp images, resize them to a size no larger than the size they will be displayed on a web page, and then carefully optimise them in one operation. For example, if your images are going to be displayed at a width of 800px, then resize the width to 800px and no larger.

Use the free Google Squoosh App which will resize and optimise in one go.

There is no one size of optimisation fits all images, but as a general guide, set the jpg optimisation level to 75 - 85 and then examine the result by dragging the Squoosh slider over the image. Do this after you resize in Squoosh and make sure you select actual size after the resize.

To answer this another way, you can make images less sharp by over optimising them or by making them smaller than they need to be say 500px, when then will be displayed at 800px on the web page.

I wrote 3 blog articles about image optimisation if you need more information.

4 Likes

Hi, if we do need Retina resolutions for an image which is shown at 800 pixels, do we need to have them in 1600 pix? Or how do get around this?

That’s up to you. Normal resolution images look perfectly sharp to me on retina displays, iphones and iPads and the penalty of going to larger 2x images is IMHO, not worth it. 2x images then to be 4x bigger in Kb download size, so the overhead is very significant.

2 Likes

The images have a lot of fine detail in them, so resizing too small is always going to be an issue.

Perhaps you need two pages, one gallery-stack for small screens where the smaller image size is not an issue and another gallery-stack for desktop or tablet with much larger thumbnails and lightbox images.

With fine-art I think the goal should be image quality, over page-speed.

Using a Lazy-Load option for the thumbnails would allow for higher quality and larger thumbnails that will be loaded up as the screen scrolls.

1 Like

Back when Tyrannosaurus was snacking on Triceratops Adobe produced a book called, I think, ‘Interaction by Design’. In it they had a diagram about images which has stayed in my mind all these years after. In the diagram there were three elements: ‘quality’, ‘size’ and ‘speed’ — the point was, you could have any two. And all these years later, it’s still true. You can have small hi-res images that load quickly. Or big low-res images that load quickly. Or big hi-res images which take so long to load your readers might as well go away and make a cup of coffee while they wait. Nobody has invented to a solution to this conundrum yet: it’s the Fermat’s Last Theorem of web design. A while back I described how it’s possible to create a large low-res image with a hi-res highlight, which is the best compromise I’ve come across. But there are plenty of situations where it won’t cut it.

1 Like

I think with high-speed internet (via cable or wi-if) then I think it’s now possible to have all three.

Stacks provides the option to turn on/off elements based on phone/tablet/desktop, perhaps an option to measure the internet connection speed might be a useful function.

This way, images could be delivered based on internet performance rather than screen size.

I do the whole process in photoshop. Crop to the maximum size it will be displayed on the site. Then sharpen to taste, maybe a little extra because it will be compressed. Then I compress using the legacy “save for web” export. Photoshop’s Save For Web probably is not as efficient as some modern compressors like Squoosh, but it is decent.

I think for those who genuinely want to deliver lots of large retina images, then perhaps consider offering a gallery solution with a choice of what size to view. Of course the other big issue with art and photography sites is that if you provide large high resolution images you should really protect those image with some way to stop people downloading them and printing them. All of that would be a lot of effort.

1 Like

If you don’t go 2x for 4K+ screens, then yes, the images will be noticeably not crisp. I always go 2x. Export from whatever at JPEG 100% quality, then use the free ImageOptim app to compress to a manageable file size.

1 Like

The issue there is that exporting at “100% quality” and saving a jpg, degrades the image. 100% does not mean the quality is the same as wehn loaded. The 100% refers to no additional compression being applied, but the save does degrade th eimage. Jpg is a lossy image formats, meaning that every time a jpg image is saved, it loses quality, i.e. sharpness. As a demonstration of how each load % save degrades the original image, start with a sharp image and see what the loaded and saved image looks like after being just loaded and saved 10 times. I,e, Open the image and Export at “100%”, load the same image again and export again - repeat 10 times.

If you are really interested in quality then you should use an app/online tool like Squoosh that resizes and optimises in just 1 load and save operation. I.e. the image is only degraded once during 1 load and save instead or being degraded twice.

Well of course JPEG is lossy. However, I challenge you to do a blind A/B test, source vs a 100% JPEG. You won’t be able to discern a difference on a website or 40" canvas print. Apps like ImageOptim don’t compress from lossless, you have to start with JPEG or PNG in the first place, so you may as well start at 100%. PNG-24 is not lossy anyway, and I’d extend my challenge to 90% JPEG too.

btw, I’m not talking about doing it 10 times, who’d do that?!

Do you have a link to that please?

If it really is a deal breaker then undoubtedly the best solution would be to use an image CDN service.
They will deliver the optimum image for the device in use, will do all the conversions from one high res upload by you and have worldwide servers for fast downloads wherever you are.
There are a few to choose from but it will cost a monthly subscription.

2 Likes

Not to hand, but the idea is pretty simple. In an image editing program make a pair of duplicate images. Export the first as a full size background image that is no more than 100kb (which likely means the lowest resolution/ lossiest compression you can get away with). Export it (e.g. as a jpeg, to keep the file size down). Keep the second image at high resolution, making a selection around the part of the image that draws the eye. This should not be more than about 10% of the total image (making a circular or oval selection is best). Delete everything else to a transparent background. Make the selection a radial gradient, fading it to transparency around all the edges. Export it (e.g. as a png, to preserve transparency). Both images will be at different resolutions, but the physical size should be the same. In RW use a layer stack, or Source Grid (with two Grid items on top of each other) and put the first image on the bottom layer and the second above it. This sandwich will now give you a low-res image with a hi-res highlight. The overall effect will be of depth-of-field set to keep the highlight in focus.

2 Likes

@Domino I’m very late to this thread as I’m working other projects, but image optimisation is what I do, for my own photographic work, but also for book publishers, web sites etc.

Apologies to friends, but do not use third party apps if the whole site is about images, you have little control of the final output.

Do you have original uncompressed files, either TIF, PSD or 100% JPEGs that have not been re-sized?
Secondly, do you have access to Photoshop?