A lot of thought goes into the design and development phases of website development that affect website performance and usability. At Switch we spend countless hours collaborating together and with our clients to make smart and informed decisions on how to create the best websites for our customers.
This is all fine and dandy, however, over time we see the quality of our websites start deteriorating after the initial launch period. So we’ve decided to write a series of articles to help our customers and give ourselves a reminder on some of the steps to maintain a healthy, top-notch website.
After all, none of us want our websites—that we spent hundreds of hours of blood, sweat and tears working on—to be performing badly.
Our first topic, imagery, is one that is close to our hearts and arguably has the largest impact on the website.
Images help support brand identity, convey information where words fall short, and visually enhance a site… humans simply process visuals better than text, which gives us a powerful medium for us to leave a lasting impact on the customer.
Below are some of the common pitfalls that we see content editors make when selecting and saving imagery for their website.
Uploading images directly from suppliers
Uploading photos directly from a digital camera or stock photo supplier is a sure-fire way to make your website perform slowly and quickly increase your hosting costs. Artwork that has been produced for print utilises a CMYK colour space and has been saved at a higher DPI—both of which provide too much information for the web and add unnecessary bloat to your image.
Images on the web need to be resized and optimised properly to maintain a responsive and performant website. You should never haphazardly upload any file into your CMS without understanding the adverse effects it can cause.
At Switch, we provide image specifications for our clients so they know exactly what size their image should be for any given component of their site. Uploading images larger than these specified dimensions is detrimental to the longevity of the website, will increase costs, and has no benefit to the customer.
Saving images using an inappropriate file format
Selecting the right file format for your image may be tricky if you don’t understand the different use cases for them. Choosing the correct file type has a direct impact on the file size of your images and can cause big problems for future maintainability if you’ve saved using an inappropriate format.
Most of the time you should be using jpg (for complex, colourful images) or png (for images with transparent backgrounds), though occasionally you may use a gif (for simple line drawings with limited colour). These file types perform differently and meet different requirements, so consider which one is best for your needs before uploading to your site.
Getting a good understanding of images is essential for all of us in the web industry, we highly recommend reading through Google’s article that explains image optimisation and file formats in more detail.
Unnecessarily large image dimensions
Want your site to load quickly? Of course you do. Watch out for images that are too large. Both excessive size in terms of dimensions and file size can provide unnecessary strain on the visitor and your bandwidth. To prevent this, always resize your images before you upload them.
If your media comes from a supplier or out of a digital camera as mentioned above, the dimensions are likely too large for the web. Follow these instructions to check your image sizes:
|
On Windows
|
On Mac OS
|
If you have a large number of images you want to resize, particularly if you have an ecommerce site with hundreds or thousands of product photos - there are methods to automate resize tasks. Each case is different, just ask your Switch Project Manager for recommendations and and we’ll be happy to provide guidance.
Not optimising your images
While it’s true that a smaller image in terms of pixel dimensions will likely have a smaller file size than a larger image, image compression can further shrink images by incredible amounts. Optimise your image by running it through free services and apps like TinyPNG or ImageOptim (Mac only) that compresses images to the minimum number of bytes without sacrificing image quality.
Not only does keeping image sizes in check make users’ experiences of your website better, but it also has SEO benefits: faster sites rank better on Google searches. If you take away one thing from this post, prioritise performance, as your website can never be fast enough.
Images make up the majority of your website’s size and thus have one of the largest impacts on performance. Image requirements for each website differ depending on the design and usage of your images; there is a big difference between images used for decorative purposes versus images for high impact homepage banners.
We provide as much automation and clarity as possible on each of our websites to reduce the amount of manual work that is required, but it doesn’t eliminate the need for some amount of conscious effort on the part of content editors. If you’re ever confused about best practice for your website, refer back to the original designs or contact us. We’re here to help.
There’s still much to write about and learn in regards to images. We will continue in the next post, so keep an eye out for it in the new year.
Subscribe for the latest news and events from our talented team and community network.