Blog

Image Size Matters – Reducing the load time of your pages

Karin from ScreamBlueMurder has done a great job of writing up a conversation we had about image sizes on web pages. She quite rightly pointed out that although we optimise all the initial content when we build a website, the customer usually has the ability to add their own content after the launch, and may not be aware of the impact of uploading unoptimised images to their site.

I have added some of my thoughts below, but I recommend reading Karin’s article first: Better Browsing: Image Size Matters!

a pie chart showing images as the main portion of page requests
Typically, images make up the largest portion of a web page.

One of the most important things to remember when trying to reduce image file size is to use the appropriate file type for the image:

  • .png for line art, logos etc (basically anything that looks like a vector).
  • .jpg for photos and everything else.

As Karin mentions, you should use Irfanview (Windows) or ImageOptim (Mac) to optimise images before posting on the web. Both offer the option to do this in batches.

Recommended JPG settings are:

  • Remove EXIF metadata (photographers reading this are shouting “NO!” at their screen right now, but to most people, this would be a huge benefit).
  • Set quality to 80.
  • Save as ‘Progressive JPG‘ (this enables the image to gradually get more detailed as it downloads, rather than having to wait until the whole file is received before it can be displayed).
  • PNGs should be saved with compression set to at least 6.

This is just a guide, you may be able to set the quality even lower, but some images may show artefacts and have to be set a little higher at 85/90. Experiment to see what works for different images.

Optimising your images is the easiest step to huge gains in reducing page load times, which can have a direct impact on company profits.

Contact us – we would be happy to provide you with a comprehensive review of your website’s performance including actionable steps to make it faster.

Block referrer spam from the SEMalt botnet

We are trialling the following solution for blocking what is fast becoming a scourge of the web; SEMalt referrer spam.
It’s been added to the .htaccess file on one of our personal sites, and we’ll see how it does there before implementing these measures on the rest of the sites we manage. Update to follow.

UPDATE: While blocking at the server IS working, there is much more to blocking this type of spam which is detailed here and here.

Make the new Twitter profiles more readable

Twitter is currently rolling out it’s redesigned profile pages, mainly to make Twitter more appealing for new users who may already be used to other social networks (read: Facebook).

That’s all well and good, but what about us, more seasoned users? Tough. Instead of a nice compact stream of information, we’re stuck with masses of whitespace and wildly varying font sizes. At times, this results in seeing as few as 4 tweets at a time, even on a 1080p desktop display.

Screenshot showing only 4 tweets visible on the new twitter profiles

If you’re using a modern browser (and you really should be), this won’t be a problem for long. If you don’t already have it, install the Stylish add-on [ Firefox | Chrome ] and our Twitter Profile Compactor user style.

This little chunk of CSS removes the excess whitespace and ensures the font sizes of tweets are all uniform. That’s a bit better!

Screenshot of a new twitter profile with Twitter Profile Compactor enabled.

If you get stuck at any point, give us a shout on Twitter and if you have any ideas for making this work better with the new Twitter profiles, the code is up on GitHub.