Images without a website are as lonely as a website without images. Images have a language that says so much that even a blog without graphics is a boring blog. So it is that when you introduce images to your website you open up a whole new world behind the words you’ve written. Apart from that being obvious, images can also lend a hand to disperse long paragraphs of content and to give it a better opportunity to be shared across the web. However, graphics also increase the size of your pages which has to be downloaded.
Downloading must be quick, or your visitors will find frustration as the loading times are increased, and this can also have an unfavourable effect on search engine rankings. And there’s one more thing that is often overlooked, and that is the amount of images. Too many will use up the storage on your server and increase your bandwidth. These little things often become the big things that destroy the pleasure of your website experience and could also be the blame for hosting cost increases over the next few years. So, we’re going to show you how you can optimise your images and avoid all the little pitfalls that could await your new website.
File Formats for Images
Every file you see on a website is an image file, and each file has come in a variety of formats, all optimised for a specific use. You want picture perfect images on everything from your website to your blog, so you’ve got to use the right type of image for the right application. An incorrect format can produce a poor or enormous image or a missing graphic in an email. Not what you want. So what are the file formats for images?
JPEG stands for Joint Photographic Experts Group. That’s just the name of the people in some technical department who developed it. Being one of the most widely used, this format is for photographs, email images, banner ads and some larger web pictures.
- Photos and artwork enjoy JPEG’s because of its flexibility and compression which makes them rapidly downloadable.
- Previews for clients are best forwarded as JPEG’s which can be reduced in size and perfect for forwarding in emails.
- JPEG’s are for print photographs and art works which have a high resolution with low compression, and they’re a breeze to edit.
GIF stands for Graphics Interchange Format and is frequently used for low-quality images that possess only a few colours and are more widely used as the file format for animated files.
- GIF’s are for web animation. Very cleverly, they hold all the required information for animation frames and timing in one little file. If you make a moving picture in an image editor like Photoshop, you’ll be able to export it as a GIF.
- GIF’s also have what is known as an ‘Alpha channel’ that can be transparent, so you’re able to place an image over a coloured background.
- For simple icons and web graphics, the images are shrunk down with the compression techniques in the GIF format making it the best to use on a website.
Now that the technical stuff is out of the way, it’s on to optimising your images before you upload them to your website. Using WordPress has many advantages and one is the thumbnail feature which is located in the WordPress settings/media. It creates three different sizes of whatever image you upload. You can also adjust the sizes of the thumbnails by configuring WordPress to make a 150×150 pixel thumbnail (small), a 300×200 pixel image (medium) and a large, 600×600 thumbnail image. What a lot of bloggers do is to link to a full sized image, but this is not the favourable way to optimise images. WordPress reduces the sizes of uploaded images but does not compress them when it creates a thumbnail, so the way to optimise properly is to optimise the image and then upload it to your website. In Photoshop where you can save for web and devices, your image quality is reduced so that it can be uploaded on the internet. If your graphics editor doesn’t have an optimisation option, there are plenty like the ones detailed below that are free to download.
- ImageOptim (MAC)
- RIOT (Windows)
- PNGGauntlet (Windows)
- Trimage (Linux)
Optimise Images After Upload
There is so much assistance on the internet. Plugins are available so that you can optimise your graphics after you’ve uploaded them onto your website. In hindsight, that’s probably a better option for those people who find they’re time poor, however, to be at the risk of being labelled a hypocrite, it is probably better if you optimise your images before you upload them. If You’ve Never Optimised Images Before
Smush.it, a WordPress plugin is a rapid solution to reducing the size of your uploaded images but again it is highly recommended that you don’t commence until your traffic has slowed down, probably overnight. There are alternatives that don’t rely on an external server which include:
- EWWW Image Optimiser
- CW Image Optimiser
- Insanity
- Hammy
Closing Remarks
Those images you consider the hallmark of your website presence will forever say what you intended them to say. They are important, but the importance lies in the fact that you optimised them before you uploaded them. People will respect the fact that you considered website page loading time, that you considered bandwidth and improved their experience as a browser. For all your hard work and consideration, the search engine rankings should also improve because your pages load quickly. Just note that while you’re reducing your file sizes, that quality can be compromised, therefore obtaining a balance between your image quality and your image file will pay off.
If you’d like to expand on the information provided here, please head over to Optimise Your WordPress Website Using These Simple Tips wherein you’ll find a host of techniques that expand on the reduction of post revisions and enabling caching.
Here are the web design services we offer, make sure you take a look at this page or read our article on Should you Turn Your WordPress into an eBook?
our work
