Improve your website loading time: Learn how to resize images for your website

Having large images on your website will negatively impact its load speed. This article will help you to understand how to resize images for online use.

A common issue with small businesses’ websites is that they load very slowly (and thereby negatively impact their SEO rankings) because the images on their website are billboard-size when they don’t need to be. This article will help you to understand how to resize images for online use.

When considering your online business imagery, on top of having amazing images that speak to your target market, it’s important to follow some technical rules to ensure a professional message is conveyed. Image size, resolution and file type are key considerations.

Technical Components of an Image

Below we have explained some of the terminology you’re likely to encounter when you’re working with digital images.

Pixels

The size of a photo is measured in pixels, which is the smallest colour component in a photo. Each of the coloured squares in the image below is a pixel. This is what a photo looks like extremely close up.

Close up of an image showing individual pixels
Source: http://www.rideau-info.com/photos/

Lossy vs. lossless compression

Lossy and lossless compression are two different types of file compression. Lossless compression formats compress the original image without losing the accuracy and detail of the original. Lossy compression, on the other hand, accept some image degradation in exchange for a smaller file size.

Image quality

There are four factors that determine the quality of an image. These are:

  • The size (in pixels) of the digital image. Also called the resolution.
    For example, a photo that is 2048 pixels x 1536 pixels in size is a total of 3,145,728 pixels (or 3 Megapixels)
  • The quality of the recording device (camera’s optics and sensor, scanner’s sensor) which is directly related to the quality of the pixel)
  • The digital format it is stored in (lossless vs lossy compression).
  • The technical proficiency and the “eye” of the photographer.

Source images

When it comes to the original images you use on your website, a bigger source image is better, because you can go down in size, but not up, without losing quality. A high-resolution photo is an image with at least 300 pixels per inch (PPI).

Different image formats

JPG/JPEG (lossy format from 1-12, 12 being the best).

This format relies on the blending of colour. It is a “lossy” format meaning it reduces the file size of an image by blending “redundant” image pixels. As the image is compressed blurriness appears around the edges of objects in the photo. It’s great for websites because of the small file size. The smaller size does mean that some quality is lost, however.

Note: there is no difference between the .jpg and .jpeg filename extensions

PNG (Portable Network Graphics)

PNGs are amazing for interactive documents web pages when you need to use an image with a transparent background. PNGs are “lossless,” meaning you can edit them and not lose quality, however, this means that the file size tends to be fairly large and will hinder your website load speed. Only use PNGs in instances where you need to use a transparent background, for example, your logo file.

GIF (Graphics Interchange Format)

Similar to the PNG format, GIFs can be saved with a transparent background. However, you likely have heard of the term GIFs in relation to their other differentiating feature which is that they can be animated. You’re unlikely to need to use a GIF file on your website unless you’re using an animated GIF like the example below.

via GIPHY

TIFF (Tagged Image File)

A TIF file is a large file format with no loss of image quality. TIFF files are lossless which means that the original image data is preserved no matter how many times you copy, re-save, or compress it. They are not suitable for use on websites as they are large and will severely impact your website’s loading speed.

RAW (Raw Image Formats including .raw, .cr2, .nef, .orf, .sr2, and more)

The least-processed image type on this list is a RAW image, which is generally the first format a photograph acquires when it’s captured. RAW photos are good because they capture all of the elements of a photograph without losing minute visual details due to processing, however, they are unsuitable for use on your website.

GOLDEN RULE:
Always create a copy of your images first before editing – store the original and never touch those again.

The trade-off: Image size and quality versus fast load time

When uploading images to your website you will need to find a happy medium between image size and quality and fast load times.  The heavier your images are on your webpage, the longer it takes to load.  This can result in lost customers and will also penalise your site in terms of Google rankings.  Did you know, bounce rates increase by 50% when your website takes 2 extra seconds to load and conversions decrease by 12% for every extra second.

If you want to test any of your website pages for their performance, you can use tools.pingdom.com:

  • enter your webpage address
  • select the location closest to your server
  • it will analyse your webpage and report on your approximate load time, image sizes and other factors that might be slowing your webpage load time
  • you can then take informed action to improve your load time!

The most common screen resolution is 1366 px wide 768 px high. Based on this information, talk to your web developer regarding the best image size for your own website.

As an example, on Navii.com.au:

  • full-width-images are 1,400 px wide and we try to keep them at less than 100kB
  • smaller images are generally uploaded at 800 x 600 px or less and are less than 80kB (ideally less than 50kB)

How to resize images

There are many free programs available to edit and resize photos. Many of them are web-based, such as:

  • Canva.com or Canva photo editor (great for cropping, resizing and simple image edits)
  • PNG2JPG (allows you to change the format of an image from PNG-to-JPG or JPG-to-PNG)
  • Tinypng.com (excellent for reducing the size of images however the original image cannot be larger than 5 MB)
  • Pixlr.com (more advanced capabilities)

Mac users can easily resize images on their computers without the need for online software. To do this, simply open your image, click File, click Export, change the format t0 JPEG and drag the slider until you are at the desired file size (ideally under 100 kb for website use). There is a demo of this process in the video above.

Windows users can use a similar process using the Paint program which natively exists on windows computers. To do this, open an image in Paint, click File, click Save As, click JPG, save the new file.

LOOKING FOR the right tools & knowledge
to promote your business online?

WE OFFER 2 solutions

Both options are fully subsidised by the Australian Government and offer support via our Facebook Group. 

Shirley from H&M Productions showcasing her Next Best Steps action plan

2 thoughts on “Improve your website loading time: Learn how to resize images for your website”

  1. แทงบอลออนไลน์

    ทุนน้อยแต่ได้กำไรสูงต้องยกให้ สล็อตออนไลน์ ครับเพราะถ้าทำแจ็คพอตแตกคุณอาจจะรวยแบบไม่รู้ตัวเลยก็ได้ SEO สล็อตออนไลน์จัดเต็มโปรโมชั่นแจ็คพอตแตกง่ายโอกาสได้เงินสูง หากมีปัญหาก็มีทีมงานดูแล 24 ชั่วโมง ใช้ระบบฝากถอนอัตโนมัติ สะดวกรวดเร็วปลอดภัย

  2. แทงบอล

    การแทงบอลออนไลน์ถือเป็นทางเลือกที่ได้รับความนิยมสูงมากนั่นเพราะให้กำไรสูงถึงแม้จะมีต้นทุนต่ำก็ตาม SEO ก็เป็นเว็บแทงบอลออนไลน์อีกหนึ่งทางเลือกที่ได้รับความนิยมสูงสุดเช่นกันนั่นเพราะเป็นเว็บที่มีความหลากหลายและน่าเชื่อถือทั้งระบบดูแลก็ดีที่สุดอีกด้วย

Leave a Comment

Your email address will not be published. Required fields are marked *

Stay current

We’ll keep you current on the latest digital tools and opportunities that will help you to remain competitive in the digital world.

Brisbane
Head office

Suite 1,
57 Woodfield Rd
Pullenvale QLD 4069 
Australia

Sydney

Suite 101,
18-20 Victoria St
Erskineville NSW 2043
Australia

Melbourne

5 Molesworth St
Hawthorn East VIC 3123
Australia

Adelaide

120 Kenilworth Rd
Parkside SA 5063
Australia

Agnes Water

139 Bicentennial Dr
Agnes Water QLD 4677
Australia

aboriginal-flag

Our team would like to acknowledge the traditional custodians of Country throughout Australia and their connections to land, sea and community. We pay our respect to their elders past, present and emerging and extend that respect to all Aboriginal and Torres Strait Islander peoples today. We acknowledge that the sharing of knowledge has occurred across the lands and waterways of Australia for many thousands of years. As we continue to share stories and support small businesses we try to listen to the knowledge and practice that has always existed here and consider how we can contribute to the preservation of culture and Country wherever we live and work.

© 2021 Navii Pty Ltd ABN: 83 642 080 653 is a wholly owned subsidiary of
Digital Coaching International. All prices are in Australian Dollars.

This project is supported with grant funding from the Australian Government.