Photos take time to download, so they can also make your website slow to load. And potential clients hate slow-loading websites.
Photos also help your website look great (which potential clients love) and convert potential clients into actual clients (which you love).
The trick is to keep photos small enough that they load quickly while large enough that they still look fantastic.
Photo Size
Photo size ultimately refers to file size (e.g., 120 kB). Yet, 3 key things contribute to file size, the:
- Resolution of your photos
- Width and height of your photos
- File type of your images
Before briefly explaining these things, let me share my golden rule – always give me the largest images you have. I can make them smaller. But I cannot make them bigger without them going blurry.
The rest of this article gets a little bit technical. If you don’t want to read it, just:
- Follow the golden rule
- I can do the rest for a small fee
But, if you want to save money and invest time, read on.
Photo Resolution
Photos are made of pixels (dots). The number of pixels needed for photos to look good is different for:
- Printed photos
- Photos on the web
To look good, printed photos often need a resolution of 300 PPI (pixels per inch) to look good. But on the web, pictures still look good with a resolution of 72 PPI.
For example …
So, to keep your file size down without affecting how good your photos look, make sure your photos have a resolution of 72 PPI.
Width & Height
The physical width of your photos, measured in pixels (px), also affects their file size.
The minimum width of your photos changes depending on where it is used:
- Full-width locations need photos to be at least 1,920 px wide
- Content-width photos typically need to be at least 1,200 px wide
- Half-width photos typically need to be at least half of 1,200 px, or 600 px wide
- Third-width photos typically need to be at least a third of 1,200 px
- Quarter-width photos typically need to be at least a quarter of 1,200 px
<< Full-width = 1,920 px wide >>
<< Content-width = 1,200 px wide >>
<< Half-width = 600 px wide >>
<< Third-width = 400 px >>
This image went from 92 kB at content-width (1,200px) to 50 kB at half-width.
Make your photos as high as you want them to be, but no higher.
I described resolution first as when you reduce resolution, it automatically reduces the width and height of an image.
File Type
Different file types have different extensions. For example, modern Microsoft Word documents end with the .docx extension. PDF files (.pdf extension) are also documents, but they are different types of files.
JPG files (.jpg extension) are the most common image file type. For a long time, they were recommended for website photos.
PNG files (.png extension) are a different type of image file that used to be recommended for drawn images (e.g. logos).
But today, converting your photos (and other images) to WebP files (.webp extension) normally reduces your file size without reducing the quality of the image.
So my advice with photo file types is to:
- Start with a JPG file
- Convert it to a WebP file
- Compare the two
Then if you are happy with the quality of both, use the photo with the smallest file size.
Photo Size & Quality in a Nutshell
Let’s say we wanted to insert a half-width image into a web page. Using the image of a stream as an example, we cut the file size from:
- 928 kB to 92 kB by changing the resolution from 300 to 72 PPI (a 90% reduction)
- 92 kB to 50 kB by changing the width to 600 px (a further 45% reduction)
- 50 kB to 27 kB by changing the photo from a JPG to a WebP image (another 48% reduction)
Overall, we achieved a 97% reduction in file size while the photo still looks amazing.
