This is a question that gets asked regularly of the support team.  The short answer is because we all like to visit a website and it to load quickly, display the information we need allowing us to get on with our other tasks.

Simply put the larger the file you upload the longer it will take a visitor to your site to download.  This effect is exaggerated on slower connections such as 3 and 4g mobile data connections.

Real world example

At iTCHYROBOT we use a number of tools to profile websites.  One tool in particular benchmarks page size, actual load time and more detailed data such as when a user can first interact with the site or when the content loads above the fold.

Don’t get me wrong, file size is not the only factor in page loading times but it is a major factor and one that you have control over.  I will give some real world examples and solutions to the often raised support tickets.

For now lets look at some data.

The data above is the analysis taken from two home pages that are hosted in the same location and have been tested by the same independent tool.

Both homepages have a header slider of approximately 5 images.  They contain roughly the same amount of text and images throughout the rest of the page.

The big difference is that site 1 has had the header images optimised and scaled for optimal loading times.  Whereas site 2 has images over 1MB loaded into the slider.

So site 1 has a full page size of under 2mb compared to the 6MB or site two and a loading time of 4 times faster.

I’m not a graphics expert!

That is not a problem and there are a number of free solutions you can use.  

Paint!!

OK, so all web and graphic designers have now turned their noses up and are about to shun me but as far as basic image editing goes it does the job and is free and installed by default on Windows machines.  

Paint will allow you to resize and crop images and save them in a variety of different formats. 

GIMP

Its a funky name but then again so is iTCHYROBOT so those in glass houses and all that.  GIMP has been around for years and again it is totally free.  It started its life on the Linux platform and support has been introduced for Mac and PC.

GIMP is a far more capable and powerful image manipulation tool and while that will help you in the long run the learning curve to get started is steeper that Paint.

If you want to find out more about GIMP here is the link: https://www.gimp.org/

GIMP is my image editor of choice!

Adobe PhotoShop

No list for editing images would be complete with mentioning what is probably the industry standard package.  I’m not going to say much about Photoshop other than it does everything and way more than even I need as a developer.

Downside, it is not free and is now accessible by monthly subscription.  In the education world there are incentives given by Adobe such as heavily discounted license fees so do not totally discount it however I appreciate schools need to keep control over the purse strings!

General Information on images

You are now armed with your pictures and have had a play with an image editor.  When it comes to putting your images online a balance needs to be struct between the quality of the image and the file size.  The image going online is not for print so it does not need to be a massive physical size or have high quality save settings applied.

As a general rule for heading images they should be resized to around 2000 x 700 px.  They should be 72dpi and saved in JPEG format.  Set the quality setting to medium or if a numeric system around 4 or 5.  Save the image then open it and take a look.  If it looks good then it should be more than acceptable for upload.

Within your iTCHYROBOT Schools Platform most if not all areas where images can be uploaded have helpful suggested image size suggestions.  Take a look and try to match your image to these sizes for optimal performance.

What file format should I use for an image?

Let’s keep this really simple.  If you are manipulating an photo use a JPEG and if your image editing software allows set the quality to around the medium setting.  You will not know the difference from the original.

If you are dealing with an icon or a drawing you could use a PNG.  PNGs are a very popular format and have additional benefits such as transparent backgrounds if required.

WebP is an emerging format that has excellent compression capabilities.  I will expand on this in due course when web browser support becomes more ubiquitous.

A few more freebies!

You have your images scaled to size.  You have saved them as JPEG or PNG.  There are a couple more tricks you can do if you have time and want to optimise website performance.

ImagOptim

This is a free desktop tool, unfortunately it is Mac only, but it does a great job of shaving a few extra KBs off the image size.

If you want to know more here is the link: https://imageoptim.com/mac

TinyPNG

For those not on a Mac we still want the performance benefits without too much extra effort.  TinyPNG is a great free online resource that allows you to compress your images for optimal website performance.

Find out more: https://tinypng.com/

Ahhhhhh, but its a PDF that will not upload

We get this a lot!  Mostly at the end of year when the annual accounts need to be uploaded to the website.  The familiar PDF lands in our support inbox weighing the same as a small elephant.  What happens in most instances are schools receive a paper copy of their accounts and then proceed to scan the whole document which can be 20+ pages.  All these A4 pages effectively become images within the PDF document creating a monstrous file size that will not upload and would take an age to download. If this sounds a familiar tale read on!

Solution 1

Your accounts team or external accountant will have generated your accounts in a package capable of outputting a PDF that is text and table based data rather than images.  Ask them for an electronic copy as a PDF and use that instead of the scanned version.

Solution 2

If that is not possible there is a super (free) online tool that takes the hard work of compressing a PDF.

Head over to SmallPDF, https://smallpdf.com/ and select Compress PDF.  90% of the time this will create an optimised file that will be under the upload limit for the website.

Conclusion

There are lots of tips and tricks for making your website faster, more responsive and engaging.  For customers of the iTCHYROBOT Schools Platform we offer free drop in sessions.  Give the team a ring on 01642 688808 to book a session and we will be happy to answer your questions and show you some more useful tips and tricks to speed up your content creation.

Sign up to receive Blogs like these direct to your inbox.