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.

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.

A Whistle Stop Tour of Git

git logo
Having just spent the afternoon showing a designer how to use git, I figured this would be a useful reference. It’s super quick because there is little to no explanation here, just the raw commands. It’s up to you to do a bit more research to understand what’s going on! Saying that, there should be enough here to get you working with git, even if you don’t grasp it all – just dive right in and play around.

Continue reading “A Whistle Stop Tour of Git”

Backup folders outside your sync app using symlinks

I say “sync app” as this process works on Copy, Dropbox and the like, in just the same way.

The idea is to make it appear to your sync app that a folder is inside it’s watched folder, when it is in fact somewhere else entirely.

Windows:
Use either the JUNCTION utility from Sysinternals, or the MKLINK command built in to Windows Vista, Windows 7 and Server 2008, for example:
junction "C:\Documents and Settings\User\My Documents\My Dropbox\DesiredFolder" "C:\Path\To\DesiredFolder"

mklink /D "C:\Users\Steve\Documents\Dropbox\DesiredFolder" "C:\Path\To\DesiredFolder"

Or, if you prefer a GUI, install Link Shell Extension.

OS X or Linux:
Use the ln command, for example:
ln -s /path/to/desired-folder ~/Dropbox/desired-folder

This works with files too:
ln -s /path/to/desired-file ~/Dropbox/desired-file

Another easy way to do this with Terminal is type the ln -s part, then from Finder drag the folder/file that you want into the Terminal window then drag the Dropbox folder and hit return.