Your Website Is Only As Good As Its Photos
By: Ashley Santamaria
You may have a killer web design that boasts seamless transitions, perfectly timed animations, and flawless layouts. Yet, if the images you choose to use in your design are subpar, your website ultimately falls flat. Not only this, poor image use can and will ultimately lead to poor website traffic.
Image quality is one of the most critical components to a website. Images are likely the largest and most visual part of any website design. They are the first elements a viewer’s eyes land on as they navigate a website. A major obstacle to retaining viewer traffic and engaging your audience with your website is image quality. Low quality images will immediately deter users from engaging with your site and will cause them to leave. On the flip side, too high of quality images will negatively affect loading times and may not display images properly. This, too, can result in a lack of website traffic.
Here are some of my tips for using great images in web design:
1. Start with high resolution images that can be compressed or saved at a reduced size. It’s likely that you will need to downsize an image regardless. Beginning with a high-res image will prevent a loss of quality as you optimize your images for the web.
2. Compress images. When reducing size or compressing, I try to keep my image size around or below 300 KB and below 1600 px in the widest dimension. Try a website like Tiny PNG for image compression. Image size greatly impacts website loading speeds, so keep image size small to optimize page load speeds (without compromising image quality of course).
3. Cropping is key: crop images to a standard ratio unless there’s a specific use case that requires a funky crop. 2:3, 3:4, and 3:5 are great cropping ratios for rectangular images (best for hero images and full bleed images). A 1:1 ratio will create square images that can be used as thumbnails, for example, for products listed in an e-commerce store.
Good pixel dimensions for rectangular images are 900 X 600 (2:3 ratio), 1200 X 800 (3:4 ratio), 1500 X 900 (3:5 ratio). For square thumbnails, 500 X 500 is a good pixel width. Any larger than this is unnecessary.
Crop images using the Rule of Thirds (see photo example below):
In this image, note the blue grid lines. These divide the image up into thirds in both the vertical and horizontal directions. The subject of the photo, the man (specifically his head), is placed at the left and top thirds of the image. This is where the top grid line intersects the left gridline. The subject is off-centered, but the image maintains balance because it is cropped using the Rule of Thirds.
In this image, note the pink gridlines. These are the center axes of the image. The focal point of the building (the corner closest to the foreground) is aligned with the center vertical axis to balance the photo.
Cropping images using the Rule of Thirds is one of the best ways to instantly elevate image quality and composition.
4. Remove any distracting objects from photos, like parking signs, traffic cones, fire hydrants, etc. Anything that may be interfering with the main subject of the image. This can be achieved by using the stamp tool in Photoshop (aka the best design tool out there). You can truly work some magic with a little bit of Photoshop enhancements. You’ll have to get a little creative when using this tool, but it’s my go-to time and again for removing unwanted items from images. Note the differences in the image comparisons below:
You'll notice that two NO PARKING signs and a bright orange traffic cone were removed from the second image. I did this using the stamp tool in Photoshop. These distracting details might seem minor, but when this unedited first image gets used in a prominent web location like a hero image, they are the first thing I notice.
A second comparison:
When I see this image on a website I built, I don't want viewers to think about how many handicapped parking spaces there are. I want them to focus on the subject of the image: our client's beautiful office building. Again with the stamp tool, I removed the handicapped parking signs and instantly restored focus to the building, making this a sweet hero image for our client's About Us page.
*Important editing tip: ALWAYS keep a copy of the original photo before making any photoshop edits. You never know when you'll head down an path of editing that ultimately screws up your image beyond repair. Have the original saved somewhere safe so you can start your edits over again if needed (this has happened to me too many times to count).
Last updated: 12/13/2021