Take your pictures for a workout, writes Abha Thakor
Get your images into shape, it really does matter.
Common reasons why over-sized files end up on the web
“You don’t need to create web-sized images anymore, it all happens automatically.”
“Making multiple picture sizes went out with Web 2.0, you just need one image now of whatever size.”
“You just use the image as it comes in, from a phone or camera. Job done!”
“It doesn’t matter if it’s a heavy meg image, it just has to be less than the maximum upload size. Everyone has super fast internet now.”
These are just some of the comments heard when talking to a group of web editors and content creators recently. However, we also hear of IT support teams continuing to respond to image related issues – pages crashing, website pages not loading, and snail-paced web speeds. In fact, ignoring image optimisation can add to production costs. It can take a significant amount of time to reduce web sizes after publication or be unhelpful for both the user and the editor having to fix the issue when uncompressed pictures and attachments result in slow loading.
Unless you have installed an automated plugin or added a script, the likelihood is that image created for printed media or similar formats is unlikely to be optimised ready for the web or social media. Adding a 12MB picture for social media, for example, is going to take time to load for most devices. One of our recent reviews reported 7MB plus individual picture sizes on a charity site rather than a maximum per webpage of 1-2MB. The team had created beautiful images which could not be easily viewed by many users and caused performance issues on the website. On top of that, a resource heavy exercise had to be conducted to replace all the images as the platform used did not allow for batch changes.
Don’t make your SEO colleagues cry by ignoring image sizes!
Wrongly sized images are bad news for your search engine results too. Overly large images in storefronts can be an even greater cost to the retailer leading to serious falls in SEO results and customers just not waiting for product images to load.
The most frequent issue we have found in the last few months on working with websites, both commercial and not for profit, is the size of images being uploaded to media libraries. The worst was 23MB for a single web image and another took 5 mins to load each image on social media on a good fibre connection. We were so concerned about big image sizes becoming more frequently seen on both small and big sites, we undertook some informal research aided by people on our training courses.
- 38 out of 50 people were unaware that images needed to be optimised for the web
- 27 of those did not know of any tools which could be used to help prepare images for online use
- 5 used online tools to resize pictures
- 14 had used the same images, without change, in both their offline and online presence
- 41 had not considered exif or meta data (including device, location, names) being shared through web upload, including when naming pictures or photographers on their cameras or tablets.
Help for your images
There are so many plugins and apps which will help you compress images or make them web friendly. This does not mean to make the image not fit the space, but to reduce its file size. This is often misunderstood with users putting thumbnails on their site in the hope of creating web size images, but still delivering the full image size to the end user.
Other misconceptions are that showcase images and banner photos would not be able to be used if they had to be made into web sized images. You don’t want to create blurred or skewed images, but most images can be compressed using appropriate tools with little loss of quality.
WPMU DEV has Smush plugin for WordPress is easy to use and can help speed up sites. One on our top five list, with both a free and a paid for option available.
TinyPNG also works really well for clients wanting to make sure their pics actually load within a few seconds on social media. Short pixel image optimiser WordPress plug-in is a popular option with some clients for its options, but needs familiarity with using API keys.
When I work with images with my brother, who is learning about websites, he describes optimising an image as sending a picture to the gym so that is ready to pose and do its job. A correctly optimised picture stands out better, load faster, will tend to be clearer for the view needed, and allows the instant link of the idea to the visual message.
Gone are the days where you needed to be proficient with Photoshop or other design software to make images web-friendly. The technology is now more usable by non-creatives and there are multiple options available. But a word of warning, you don’t need multiple plugins installed on WordPress and similar platforms or need to keep reducing an image beyond its usefulness.
- how you are going to want to use an image and what level of detail do they need to be able to see for it to be useful
- what do you want the reader to learn or understand from it
- is it really necessary and does it add value
- how will it display on different device sizes
- what kind of compression suits the purpose of the image and how you want people to use it, eg how much loss of quality can you afford?
- is there a way of displaying a larger version on a different channels, eg Instagram, Flickr, an on-site gallery (there are some brilliant gallery plugins on WordPress and other CMS)?
Recommended reading shared in our training
Article explaining how compressed images, easy to follow piece by Kinsta. Good section on how newer versions of WordPress support responsive images creating multiple image sized images in the library.
Kayleigh Thorpe’s image optimisation and gallery talk provides a walkthrough for the WordPress platform.
Kayleigh and I have spoken at WordPress events together on images and I can recommend her talks as a must to any content editor working with images on the web.
Irina Blumenfeld’s talk on images weighing down websites is also a great learning tool focusing on when to use different image types including PNG, JPG, GIF, SVG. The presentation is useful for those working on content management systems including WordPress.
Steve Mortiboy’s talk usefully shows the common mistakes made with images on the web.
Using Shopify? Then check out its tips for images which is helpful for naming, alt tags and image site maps too.
Google Developers has a more detailed explanation of SVGs, optimising vector images and impact of high resolution screens.
ShortPixel.com for reducing images. Free and paid for services available. The site has an online image optimisation test.
TinyPNG offers PNG and JPEG compression. It has a facility to create thumbnails. A drag and drop facility for larger image sizes is available as a paid for pro version. It also has a useful Developers API to connect your server to optimise all your PNG and JPEG images. There are WordPress plug-in and Magenta store extensions available too.
Many of these tools also have options to preserve or remove exif and metadata, while some will give you the option to crop the photo as well as resize it.
re.Smush.it image optimiser for WordPress