Good images make your website a great visual experience. BUT if you don’t optimize your images, they can cause problems. Here are a few reasons why you should optimize your images:
- Large images can slow your site’s loading time. According to KissMetrics, 40% of people abandon a website that takes more than three seconds to load. A study by Google showed that 53% of mobile site visitors leave a page that takes longer than three seconds to load.
- Google and other search engines penalize sites that are slow to load.
- Large images take up more bandwidth on your server.
Today’s smart phones take great pictures. They’re nice and large, from 3500 pixels to 4500 pixels wide. For printing, that size produces beautiful, crisp photos, but for websites they’re a nightmare. These images take up too much space on your website. They range in size from about 3 MB (megabytes) to more than 4 MB.
These large images can slow your site’s loading time, but they don’t have to. There are ways to fix this problem. Here are a few tips to make sure your sites images are an asset and not a liability:
Load the appropriate image sizes.
In order to do that, use a free program like Pixler or Photopea. To move up a step, I strongly recommend Affinity Designer and Photo. These are paid programs but are low cost and have almost the same features as Adobe Illustrator and Photoshop. You’ll find lots of uses for them.
My suggestion is to never load an image that is more than 1200 px wide. Here’s a quick tutorial. The programs all vary some. I’m using Photopea. Using one of these programs you’ll want to select “Image size” and enter 1200 px, leaving the dimensions locked. Click Okay.
Then click File/Export and export your photo as a .jpg. Reduce the size of the image size as much as you can while still retaining a good photo.
Now your image will an appropriate size to upload to your website.
A photo should almost always be uploaded as a .jpg. I usually recommend a medium size file. Here’s an example of medium size file that uses only 91 KB. The quality is still good but it takes up much less space on your website.The large version of this photo used 6389 KB. That’s a 70% reduction in the amount of space used on your site.
(By the way, this is Jim, Daisy and Rose when the girls were puppies.)
When you upload a drawing, a graphic or an image that requires a transparent background, you’ll want to export the file as a .png. These files take up a little more space but work better with graphics.
Images can also be uploaded as .svg files. This is a topic for another day.
There also are plug-ins (programs) that also can work on your WordPress website to automatically reduce the size of your images. When building a website, I always install such a plug-in, just in case the site owner forgets to reduce the size of their images. That being said, it takes a lot of bandwidth to upload a large image so it’s still best to reduce the size before you upload.
Images are said to take up 21% of your pages overall weight. Use them wisely and your design will shine and your page load times will be reasonable.