Resizing & Optimising Images For Web Use | Big Red Digital
SAVED: PAGE: ACTIVE AREA:

Resizing & Optimising Images For Web Use

Category: Web Design
Published:


resizing and optimising images for web use


Why Resize & Optimise?

If you are a content manager for your website, you should have the ability to resize and optimise the image files that will be used on your site. In some instances it is possible that the CMS platform that you use will optimise your images when you upload them, however, this is unlikely to be the case if you are using a standard text or html editor to place content onto your pages alongside text. Therefore, it is best practice to be able to control image quality and consistency yourself.

The reason for optimising your images is to strike a balance between the smallest file size and an acceptable quality so that your page content loads as quickly as possible, without compromising on quality.

The main things to take into consideration are the file dimensions and the level of compression you use to keep file sizes down. Which file type you use also has a bearing. By choosing the right combination, you can reduce your image size dramatically. Your website will run so much faster, and Google will be much happier to recommend your content in search results as a result.

This article should point you in the right direction, but of course, each website is different and your image shapes and dimensions will depend on your own page layouts and design.

Resizing Your Images

In order to work out what sizes to make your images, you can start from the basis that, in most cases these days, the overall width your web pages will be no more 1400px wide (the most popular monitor size in 2018 was 1366px wide). Therefore, you can use this as a guide to decide what width to resize your images to depending on where you wish to add them on the page.

If your page has two columns and your main column is around 70% in the layout settings then you should make these images around 1000px wide to fill that column width.

For smaller images used we would recommend that you don't make them much smaller than 500px wide. This is because you may need them to fill the column width when pages are shown on mobile devices (ie. they may appear larger on mobile devices than desktop).

Optimising For Upload

This is important to minimise page load times for users and to reduce your own administration time. If you do not have knowledge of how to do this using Photoshop or Paint, you can use third party websites such as http://www.webresizer.com/ to resize and optimise your images.

Differences Between Resizing & Optimising

Resizing and optimising are 2 separate actions that both need to be taken into account when making sure your images are right for use in your website. By doing both of these, it will ensure that your images will load quickly once added to your website.

Crop & Resize

Crop your image to suit the shape you wish to fill or to remove any unwanted areas. Set the dimensions (in pixels) for the image to the size it will be used on screen.

Optimise

Set the level of compression to be applied to the file to keep the file's size to a minimum without compromising on quality.

How Much Is Saved By Resizing & Optimising

We started off with a standard JPG file that was originally 3.8Mb in size and 3264 × 2448 pixels in size. We only wanted to use it at around half of the column width of this article (around 450px).

Resized Only

First, we resized the image and saved it down as a JPG from Photoshop. Here it is:

Resized image size: 450 × 338 pixels, file size: 285kb.

This is already a huge saving on the 3.8mb that we started off with. Next we saved a resized version with web optimisation by selecting 'Save For Web/Devices' from Photoshop.

Resized & Optimised

Resized & optimised image size: 450 × 338 pixels, file size: 57kb.

By resizing and optimising this one image alone we have saved over 3.7MB in space, didn't lose any perceptible quality and ensured that our article will load quickly.

Choosing the Right File Format

When you are you are saving images for web use, make sure you chose the best file type. These are the most common file types used online:

JPG – Uses lossy and lossless optimisation. Adjust the quality level of compressions for a balance of good quality and file size.

PNG – Produces higher quality images and supports transparency, however, PNG's have a larger file size. 

GIF – Only uses fewer colours so creates smaller files. A good choice for animated images but you are likely to lose out on quality.

Ideally, you should use JPG for images with lots of colour and PNG for simple images, or those with transparent areas where you would like the background to show through.

Resources

http://www.webresizer.com (Free online resource to resize and optimise)

How to optimise images for web using Photoshop (Recommended)

How to optimise images for web using Paint (Free App).

Back to Article Listing

About The Author

Hi, thanks for reading this article. I'm Big Red Digital's Managing Director and have been with the company since 2012. After starting my career in one of Glasgow's busiest advertising and design agencies, I made the natural shift to web design and digital marketing. I'm passionate about getting the very best results for our clients.

Related Articles

Total Pages:
Total Results:
Page Start:
Page Result #:
Close

Contact Us

 

 

 

No Robots:

This form collects and sends the information supplied to Big Red Digital. You can read our privacy policy for full details on how we protect and manage your data.
  I consent to having Big Red Digital collect the above details.