Image Scaling
The purpose of this page is to show you example images and for you to see how they look on your computer so that we can make a decision about what needs to be done with the scaling and sizing of images within the website.
Obviously image quality is very important but we need to take into consideration how websites and browsers work and then try to find a solution that works around those limitations and aspects of their functionality.
I will use one of the examples from the photos you took, for Ania Perkowska.
This is a file called image2-1.jpg.
The original size of the image 1527 by 1280 pixels.
Here the website is downscaling the image from its original dimensions to 300 x 251 pixels.
In order to scale down a large image into a much smaller space the website/browser must compress the pixels together and do the best job it can in order to display the original image at this smaller size.
If I resize the image using Photoshop to the same actual 1:1 dimensions of 300 x 251 pixels, we can still see that the image is a little blurred as even a professional graphics package has to squeeze detail from the original image to a much smaller size which will once again lose detail.
If I take the original image and instead of resizing it, crop a portion of the original image at 300 x 251 pixels you will see the original detail is still there, which is why when you click the image and look at the large preview picture the quality is still there, but you won’t see it because it has to reduce the picture and all the detail to accommodate the smaller space.
If we show the image at larger sizes the picture should look crisper because we’re having to compress it less.
600 x 503 pixels:
Likewise if we display it in a square at 150 by 150 pixels, the image is so much smaller a lot of detail will be lost:
Click the above image though and as you will see when it pops-up, all of that detail is still present in the original image.
If we compare this to another website, for example at Drayton: https://drayton.artlogic.net/artists/28-salvador-matthews/works/
If we take this image of the bird and the flower:
This image is 436 x 291 pixels and we are displaying it at 300 x 200 pixels, the same width as your thumbnail images:
The original image from the Drayton website is this we can use for quality comparison at the same dimensions:
You shouldn’t see any difference as the size of the image is the same and the scaling is also the same.
In the next example we will take the original sized image of 2000 x 1333 pixels and see how that shows in the page when reduced down to 300 x 200 pixels.
These images are relying heavily on browser scaling, to show a very large image at a much smaller resolution.
This image has been uploaded to your website and is being served in the same way as your images.
This is the original image from the Drayton website which is also being displayed at the same size:
Can you see any difference in these images?
When I look at these images on my computer screen I see images that are crisp and clearly represent the subject matter.