First, an important point: on Arcadina photography websites, every image is optimised automatically when you upload it. That way it always displays well, loads very quickly and gives visitors the best experience.
When you start publishing images online, many of you ask us about the ideal resolution and size, with questions like these:
“If I make the photo x pixels, how many centimetres is it?”
“If it’s 96 ppi, what’s the final size of the image?”
These are different concepts. Below we explain the terms you need to know so the images on your website are optimal. Remember: size and resolution are two different things, and together they determine the file size.
Image size and resolution
You can give an image a size in pixels or in centimetres (or other units). If you’re working for print, the image should ideally match the exact size of the flyer, canvas print, etc. If the photo is for the internet, the size should be given in pixels.
The resolution also depends on the use: 96 ppi is enough for the internet, while print needs more than 150 ppi.
On the web we talk about ppi (pixels per inch) and forget about centimetres. 96 ppi is the perfect resolution for viewing an image on a screen: you don’t need more. Anything above that is extra weight that slows your website down and makes visitors leave. 300 ppi, for example, is a print resolution.
If you upload a photo at 300 ppi, you’ll upload a needlessly large file that won’t look any better. A huge photo can take a very long time to load, wastes space on the server, and your visitors probably won’t wait for it.
That’s why you need a photo editing program to adjust size and resolution. There are free ones, such as XnView, and better-known paid ones, such as Adobe Photoshop.
Practical example: 2000 pixels wide at 96 ppi
Let’s see step by step how to give an image a size of 2000 pixels wide and a resolution of 96 ppi. We use Photoshop in this example, but the process is similar in any program.
Note: the Photoshop screenshots in this article are in Spanish; in the English version you’ll find the same options under Image / Image Size.
Step 1: make a copy of the original image so you can always go back to it.
Step 2: open the copy in your photo editing program.
Step 3: in Photoshop’s top bar go to Image / Image Size. A window opens where you need to check these values:
Width (in pixels).
Height (in pixels).
Resolution (in pixels/inch).
In our example, the original image has these values:
Width: 11218 pixels.
Height: 7482 pixels.
Resolution: 100 pixels/inch.
As we’ve seen, the optimal values for the web are 2000 pixels on the longest side and 96 ppi. If you upload this image as it is, you’ll upload an oversized photo that will end up looking the same as a smaller, lower-resolution one.
Step 4: change the largest value (the width) to 2000. The height adjusts automatically:
Width: 2000 pixels.
Height: 1334 pixels.
Resolution: 100 pixels/inch.
The size is now correct, but the resolution is still the same. Click OK to save the changes.
Step 5: go back to Image / Image Size, change the resolution to 96 ppi and click OK.
Remember to save your changes before closing the program.