If you put high-resolution photos on a website, it may not be so nice for the visitor. This is because then your website will take longer to load and people will be gone in no time. That’s why it’s important to resize your photos, but also to make them razor sharp. In this article, you will find an answer to this question: how to resize photos for a website?
As a web designer and photographer, I get to deal with this often. I regularly need to resize quite a few photos for online use and have them be super sharp as well. This is really necessary, as a high-resolution photo can sometimes be more than 30 megabytes. By the way, the size of photos is expressed in MB (megabyte) and KB (kilobyte). Usually the golden rule is: if your photo is larger than 200 KB, then a website is going to slow down. If it is smaller, then your website is going to be faster.
As for sharpness, I personally tend to export photos with a maximum of 1920 pixels on the longest side. This way, a photo is still super clear even at full screen. Don’t want to view the photo on big screen? Then you can also export it at 1200 or even 800 pixels or less on the longest side. That saves a huge amount of memory.
But how do you actually do that, resize one or more photos? There are numerous ways for this, three of which I highlight for you below. You’ll also read what my favorite way is.
Resizing photos, by the way, is different from cropping or cropping photos. Read how to crop photos here.
Don’t have good photos for your website yet? Read how to get good photos for your website here.
Resize photos with online program
There are a lot of online tools to resize your photos. One of the most popular tools is Resize-Image.net. Here you simply follow an online step-by-step plan to upload, resize and then download your photos. Hugely easy to do. And it’s absolutely free!
When resizing with this, you only need to perform a few steps: upload, resize, select output (I like to work in JPEG myself) and optimise the image quality if necessary. Then you can download your image. I recommend that you check carefully that your image meets your requirements: is it still sharp when you have downloaded the reduced image? Yes, fantastic! No, feel free to redo the whole process (multiple times).
Resize photos with offline program
Before I was really serious about photography, I liked to use the program Faststone Photo Resizer. We’re talking about the days when you had to resize your photos before you could publish them on social media like Facebook. Faststone Photo Resizer was my lifesaver. And this program is still very convenient and free.
Actually, it’s almost as simple as the above online option, only you have a little more options. I recommend you stick to the resize options. Again, after resizing, check carefully that your image is still as sharp as you want it to be. There is no harm in doing it again. Not finding your way around the program? There are a lot of tutorials for Faststone Photo Resizer on YouTube.
Resizing photos with a vintage program: Bridge
As a photographer and a web designer, I personally prefer working in Bridge from Adobe. This is a program for managing, organizing and also resizing images. And it’s completely free. Until recently, Bridge was the literal bridge between the two image-editing programmes Lightroom and Photoshop: Bridge can create previews of different types of files and juxtapose them. For example, a PSD file (Photoshop) or JPEG, which you exported from the Lightroom catalog, can show Bridge in a folder fraternally side by side. And if you want to export these different file types, in fact, you can immediately specify in which extension you want it. For online use, I usually export my images in JPEG.
But, how to reduce this? In the “essential elements” section, select the folder you need. Then you can select your images in this. Then if you right-click, you select “export to” and “custom export.” A window opens where you can specify your preferences. And then everything is exported! And yes, even this photographer sometimes has to redo this because in a dark image you can count the pixels. And, of course, we don’t really want that.
Bridge is one of my favorite tools. Looking for even more tips? Discover my favorite tools for both web design and photography here.
What should you pay attention to when resizing?
At least once a week, I resize a lot of photos for online use, such as for posting on a website. So, as I described several times above, it is hugely important that you don’t see the pixels! That just comes across as much more professional. When in doubt, enlist the help of a friend (amateur) photographer. He or she has an eye for that and can tell you whether or not you can see the pixels.
Furthermore, blue skies and photo studio backgrounds can be hell when resizing: sometimes certain areas in your sky or background suddenly show up as pixels, when your original was so tight. Again, feel free to redo the process and adjust your values. For photos with blue skies and photo studio backgrounds, I regularly have to export around 200 KB to get the desired result.
Shrinking even further? Choose webp or avif
Do you have a website with a lot of images and want to reduce it even further? Then you can opt for the modern file format webp. Via a website like fotoverkleinen.nl, you can upload the photo you are going to resize, set it up and export it in the webp format. This saves quite a few KB. And without any loss of quality!
Want to reduce it much further without losing quality? Then you can try webp’s successor, the avif format. An image exported as avif is sometimes only half the size of the same image in webp format. One way to get the avif format is to use an online avif converter.
In a nutshell
What you work with does not matter so much, as long as you know what you are doing. If you are a beginner or do not have much affinity with photography, you can make it easy on yourself and choose both free online tools. Are you actively involved in photography? Then I recommend Bridge. Furthermore, jpeg will often do the trick, but if you really want to save space on your site, you can choose webp or avif.
If you want to be safe, make sure your images are never larger than 200 KB and contain a maximum of 1920 pixels on the longest side. If you are going to work much smaller, for example with thumbnails, feel free to shrink your images to 50 KB or much smaller. I wish you much success!
What program do you use to resize your images?
Article updated August 23, 2024.