Optimizing Images for your Website

with No Comments

You made sure to take amazing photos for your new website. Check. Hired a copywriter to help you re-write your content so you are polished and presentable. Check. Added some photos to a few blog posts and now your website is loading really slowly. Bam! Everything comes to a halt!

Make sure your photos aren’t weighing down your website. Many times when you’ve taken a photo from your phone or a stock photo website, it’s huge. I’ve seen many times where clients will upload many huge photos to their website and then wonder why it’s loading slow.

40% of people abandon a website that takes more than 3 seconds to load. (Neil Patel) That’s not much time! It’s vital that your pages load fast and your potential clients don’t abandon you.

Here’s a guide to optimize your images BEFORE adding them to your site. (Guess what, you won’t even have to use Photoshop!) Let’s review the most common image types you’ll run across.

JPGS

JPGs (also known as JPEGs) are the most popular file type for images on the web. JPGs are great for photographs or complex images containing lots of patterns, colors, gradients, etc. JPGs can also be saved in high-quality, low-quality or anywhere in between.

PNGS

PNGs are another popular file format online and can handle different types of images. PNGs can also have transparent background – This is one of the biggest differences between PNGs and JPEGs.

Saving Images for your website

Bottom line, large images take a long time to load on a website. What does large look like? We are referring to file size, not the dimensions of an image.  For example, if you are adding an image to a blog post, you’ll want to aim at 200K or lower.

You don’t need to use Photoshop to edit your photos, there’s an amazing program out there called Pixlr that can help you reduce your photos down. You can reduce the file size of an image without having the cut out the quality. Let’s walk through it step by step:

Step 1

Go to https://pixlr.com/editor/.

Step 2

When Pixlr opens up, it gives you a few options. Choose “Open Image from computer”. Go ahead and open up the photo you want to use. I’m using a photo of the Portland Waterfront by Ian Sane.

Step 3

Did you need to crop the image before using? Use the crop tool and edit your photo.

Step 4

The best next step is to see what size the image is. If it’s JPEG, there’s a good chance it could be huge. Check this by going to the top navigation, choose Image and click on “Image Size”, if the image is over 2000 pixels wide, it’s probably too big. This photo is big at 4000 pixels wide, most raw photos taken straight from a camera are usually huge. You can reduce the image to be around 1800 at its widest.

Step 5

Next, you can also have a chance to reduce the size while saving it, if it’s a JPEG. Go to FILE on the top navigation and then go to “SAVE”. Here’s you have the option to adjust the quality of the photo. If you are using this photo for a blog post, it’s ideal to keep the image size to under 200K. Here you can see the size of the image and can adjust it to reduce it around 198K while still keep the integrity of the photo.

Step 6

Save the photo and you are ready to use it on your website.