A Compete Guide On Using Images For Your Website

A picture is worth a thousand words – it’s an overused phrase but we website designers couldn’t emphasise enough how important images are in a website.

Think of your website as an online brochure; customers will rely heavily on your site images to view your products or services, browse your works and understand more about your business. So your website images should be nothing short of amazing. And most important of all, they have to load blazing fast but in all the right proportions on your site.

We love crisp, high-quality images, but they tend to have huge file sizes that could slow down your site’s loading time and distort your images. So what to do?

Here are some tips for using images for your website and making sure they are web-friendly.


1. Using high-quality images

One thing you can do is to hire a photographer to take pictures of your products, people or your office. This way you can have your own arsenal of all-original and high-resolution photos that you can reuse anytime you want and for whatever purpose. You can also use images from stock photo sites, which will allow you to download images for a fee.

But if you’re pressed for time and working within a tight budget, you can download images from royalty free websites. They are absolutely stunning and can be used for free! Some of our favourites are Unsplash, Pixabay and StockSnap.io.


2. Using the right file type

You’ve probably encountered the file types JPEG (or JPG) and PNG when working with website images. Here’s the difference:

Photos should be uploaded and saved as JPEG files as this file type easily manages image colours. Large images with flat areas of colour would have to be saved and uploaded as PNGs, such as logos, infographics, or any text heavy images. PNGs are typically higher quality than JPEGs, and they also support images with transparent backgrounds.


3. Image size, file size and resolution

Make sure your images are sized correctly for your website. We recommend:

  • 1440px by 960px for full screen images
  • File size should be no bigger than 500kb


4. Making sizes consistent

We recommend saving all your images in a consistent style, size and proportion to make it easier to line up columns, texts and widgets on your website.


5. Naming your files

If you’re still naming your image files ‘final.jpeg’ or ‘final3.jpg’, you need to stop now. Name your images correctly so you don’t just manage files easier but also give your SEO a boost. Remember, when Google scans webpages, they read the texts inside your images, as well as your image URL.


6. Resizing your images

Remember, it’s easy to reduce the size of a large image, but you can’t just enlarge a small image. Otherwise, it will appear blurry or pixelated.

In reducing image sizes, make sure to keep the proportions the same to keep images from distorting. Also, we recommend reducing the resolution to a size that’s web-friendly.


How to Save Images for the Web

Saving images for the web allows you to reduce sizes without affecting quality. You can use Photoshop for this (open your image in Photoshop, go to File, click Save for Web and select JPEG high).

But if you don’t have Photoshop, you can try two of our favourites, ImageOptim and Imagify, which allow you to resize website images quickly.


Can I Use Any Image Available Online?

Seriously, you can forget everything we’ve talked about but this: NEVER use an image you haven’t taken yourself or bought a license for. Images under the creative commons license can be legally used and shared, and those published under the public domain license can be used freely by the public. Images you get from Pixabay, Unsplash or other royalty-free stock photo sites are generally under creative commons or public domain.

Purchasing images from premium stock image sites allows you to legally use, share and alter the image.

Copyright laws were intended to protect a person’s online property and encourage the public to create their own image. So the rule of thumb is not to use copyright images. If you really love an image, ask permission to use it. If you’re not sure about ownership, best to be safe and not to use it.

How’s your experience working with images for your website? If you need help in making your website extra fabulous, get in touch with us!