Optimize Your Photos For Your Website

January 12, 2021
Photoshop Photo Optimization

I love working on my website. It’s an obsession I have. Or it’s that feeling of being a coder in an action movie where I’m saving the world on the back of a website. Not that I could do that, but a girl can dream can’t she?

I do enjoy learning about coding, trying new things, and finding new ways to improve my website and add value to the lives of the brands I work with. One of the things I’ve come to learn in my time of editing websites is the importance of loading speed. While I stress the importance of impeccable design and even better photos, none of that will matter if your site doesn’t load fast enough and your customers leave before seeing your beautiful website. This is why you need to optimize website photos to ensure you aren’t bringing your site down.

The fastest way to improve your website’s speed is to change the sizing of your images. Photos tend to weigh down your site speed because you have to download them every time you open a page. Depending on how large of photos you are uploading to your site will determine how much time a page takes to load. Downsizing your images doesn’t mean that you should forfeit quality. However, there are a few tricks you can use to decrease the size of your images and keep them looking flawless for your website.

Optimize Website Photos

To optimize your photos, you’ll need editing software. I’ll show you two different examples, Photoshop and Canva, but the same principle is valid with any software.

Optimize photos on WordPress

If you’re using WordPress optimizing your photos is easy. Open up the image in your media library or by editing it in a post (use the pencil button when the image is clicked on) and edit the original. An editing box will open up, and all you have to do is change the dimensions. I change the width to 1,000 pixels to keep things simple and make sure that everything looks good on different computers.

When you open a photo in photoshop, you’ll need to get into the image size panel through the Image button on the main menu. From there you’ll adjust your images to a size that fits your needs. Here’s what you need to remember, your resolution should never be above 150. In all reality, you can take it down to 72dpi since all digital screens use 72dpi, but I often like it at 150. You’ll want to adjust the resolution first since it will alter your height and width, but you’ll change those right after. When you change your resolution and your pixel sizes you can only go down, don’t go up. Increasing these numbers will degrade the quality of your images so just don’t do it.

Update the resolution to something between 72-150dpi then adjust your width to 1,000 pixels.

In the case of websites, I shrink my longest side down to 1,000 pixels usually. You can choose to make yours larger just in case, but I’ve found this to be a safe number for any screen size.  Once you’ve changed your pixel sizes and resolution, it’s time to save the image. PNGs work well on social media, but they are larger file sizes. To ensure that your photos are taking up to much bandwidth save all images as a JPEG.

Optimize Website Photos With Canva

Create a board in Canva to the desired size of your photo (width of 1,000 pixels) then drop in your image.

Not everyone has Photoshop (even though a subscription for Photoshop AND Lightroom is only $10 a month!), so if you are working on a tight budget but still want smaller images for your website, then Canva is the place for you. Canva is the beginner’s Photoshop. With layouts for social media posts, posters, and everything else you can think of that you might need for graphic design it’s a great place to make quick graphics for your business. It’s also an easy way to optimize photos when you don’t have a real photography editor.

Export your image as a JPG to decrease the file size.

After you make an account with Canva, you’ll have a chance to create a board. If you make a custom board, you can choose the specific size of images you want for your website. You’ll have to do all horizontal photos at one time and then the vertical images, but beggars can’t be choosers. Type in the size you want, remembering that your width should almost always be 1000 (for the use of blog posts or elsewhere on your website). Then you can upload the images you want, drop them onto the board, and export them one by one. Canva gives you different file options for exporting and just like with photoshop I recommend exporting your images as jpegs. The goal with any exported image is to be no more than 1 mb in size.

Update your Alt Text so that search engines can find you. Remember to use keywords that people will use to search for your business.

Optimizing Large Amounts of Photos

If you have hundreds of photos on your website that need to be optimized, you’re going to need something a little more robust than Photoshop or Canva. Instead, I use a WordPress plugin called Smush. With this, you can “smush” all your photos already uploaded to your site. To do more than 50 at a time you’ll have to purchase the paid feature. Otherwise, just keep a browser open and keep hitting “smush” when each batch of 50 photos is complete.

Your website is your first impression to many of your customers; you don’t want to disappoint them before they even get started. Optimizing your website, while time-consuming, can make all the difference in creating an excellent experience for your customers. If you’re wondering how your website holds up, you can test your site speed with Pingdom. This site will let you know how long it takes to load your site and what’s bogging it down. If it takes more than 1.5 seconds to load, you’ve got some optimizing to do!

Want to know if you’re site is creating a powerful user experience? Sign-up for my Brand Review and have an expert walk through your brand’s digital experience. You’ll get an in-depth report sharing what’s working, what needs work, and all the tips and resources to make your website the best! Sign-up today!