Are Your Images Slowing Down Your Website?

 
Website design on a computer on a desk with flowers
 

Images are a SO important to the look of websites and can make a significant impact in the success of our sales. Images set the tone for designs and even contribute to the success of your SEO on Google, but what happens when they slow down your site’s performance?

Here are a couple of ways that you can resize your images to make sure they still maintain their amazing quality, but don’t hinder your online presence. The best part, it’s an easy fix!


When should you resize your images?

Images these days can take up over half of a website’s total size. With that, it is important that images are mindfully resized and formatted to maintain the website experience. Any images in megabytes (MB) are going to be considered too large. The goal is to resize images so that they are around 500 kilobytes (KB) in size. Once you know the size, you can determine if it needs to be compressed or reformatted.

Here is how you can find out the size of your image:

  1. Go to where your image is located on your computer

  2. Right click the image thumbnail

  3. Click on “Get Info”

  4. Notice the size of the image is listed on the top right hand corner

    (See example below)

Resize image information for websites

Option 1: Convert PNGs to JPGs (on Mac)

A PNG stands for Portable Networks Graphic and is generally a larger file size than JPGs (Joint Photographic Experts Group). The biggest difference is they have different compression formats, but both can successfully be used on websites.

An easy way you can make the file size of your PNG smaller, is to convert it to a JPG.

Here’s how:

  • Open your image in preview

 
Screen Shot 2019-06-07 at 12.29.23 PM-min.png
 
  • Go to “File” and click “Export”

Exporting Image for a Website
  • Change the format to JPEG

  • Select your export destination (e.g. desktop or a folder)

  • Click “Save”

Converting an image to JPEG for a website
  • Go to the new file

  • Right click the thumbnail

  • Click “Get Info” to view check on new image size

    • Notice below the size went from 2.2 MB to 352 KB (much better!)

Checking new image size for website optimization

Option 2: Compress PNGs and JPGs on compresspng.com (on any operating system!)

  • Go to https://compresspng.com/

  • Select the correct file type you will be uploading (located in the middle right of the webpage)

    • Note: If you want to compress a PNG but upload it to the JPEG selection, it will not work!

Select JPEG, PNG, or PDF for website image optimization
  • Upload your image and wait for the compression to finish

    • It will look like this when it is complete and also show the percentage it was compressed by:

compress+a+PNG+for+website+optimization
  • Download the updated image and check the size.

Voilà! You’re done and ready to upload your image to your website!

Have any questions? Comment below or contact me here for help on your own website!