design by layne

Website

Are Your Images Slowing Down Your Website?

Welcome to the blog! Here we love sharing about all things website, SEO, branding, business and strategy. 

Hi there

Top Categories

Website

seo

Branding

Biz 101

WordPress vs Showit: What should I use?

Four Tips to Maintain Brand Consistency

4 Tips to Increase Conversion on Your Website

Popular right now

strategy

laying putting her hair in a ponytail in a shadowy studio.JPG

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?

When images are large (anything over 500kb per image) your site loading time will suffer, and so will your bounce rate and site SEO ranking. But if your images are below 100kb, you might risk having blurry and grainy images.

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 a between 100-500 kilobytes (KB) in size. NOTE: if you have a high content site with lots of images, aim for close to 100kb. 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” (or command “I” (like eye, not like elle ha))

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

    (See example below)

Resize+image+information+for+websites.png

 

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

image of layne sitting in a grassy field on her computer in colorado

  • Go to “File” and click “Export”

Exporting+Image+for+a+Website 3.png

  • 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.png

  • 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.png

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.png

  • 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:

  • Download the updated image and check the size.

compress a PNG for website optimization.jpeg

Using Photoshop to resize

If you have photoshop and like to use it, another way you can resize you image is by exporting your image, and dragging the quality percentage down and to the right. Usually doing this between 20-50% is all you need!

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!

  

layne alexandra design co.

web designer layne steege smiling

search the blog…

+ Show / Hide Comments

Share to:

Reply...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

seo checklist

FREE DOWNLOAD

For more of our latest projects, follow along on instagram at @design_by_layne.

Home
portfolio
About
The Blog
bonus layouts
resources

© design by layne 2023 | Privacy Policy | Terms & Conditions | Accessibility

services
Contact

design by layne