Optimizing images for websites can be a tricky business. There are just so many options and they can be more than technical but I would like to try and simplify a few things. For me to explain about optimizing images for websites I need to show examples. Therefore I simply have one image that has been converted to four different image file types. Here are the results.
|Gif||500 x 377||43.4kb|
|Jpeg||500 x 377||90.2kb|
|PNG-24||500 x 377||137kb|
|Bitmap||500 x 377||552kb|
If I had saved this image in PNG-8 the size would have been slightly smaller than the GIF. And here is the image.
Optimizing Images for Websites – Why Should We?
The first and most important reason to optimize images is for user experience. You want your images to look great and load fast so your human user is happy. The next good reason would be bandwidth. Why waste it when you do not have to. Every bit of bandwidth used costs money so it is better to conserve it and use it wisely.
#1. Before you Upload
You should definitely reduce an image size before uploading it to your WordPress website. For example you might take a photo with your digital camera. Now days the photo you take from a digital camera would be anything from 1000 pixels wide to 4000 or more. The image I am using above is 500 wide so you can imagine how many kb an unoptimized image would be?
It is not a good idea to upload a big image and reduce it through WordPress as most WordPress themes will store the original size, the resized version, and any thumbnail versions. That could mean you might be storing 5 or 6 images after just uploading one. Not only that, each time the image is loaded the server has to resize the image, which takes time.
You can also crush an image which will optimize it for websites. I use PNGcrush to do this. It is a bit technical to use, but I have found a great way to install PNGcrusher and use it in a crazy easy way.
#2. Think About the Size Again
Just by reducing the size of this image in the Jpeg file format from 500 wide to 400 wide, we go from a 90.2kb image to a 56.8kb image. This is an amazing savings again. If you are planning on building an authority website, then adding images for hundreds of articles will make a huge impact on your website loading speed.
#3. Where To Store Images
I like to upload one image per article or page, but after that, any other images get stored on another server. I use Amazon S3 storage and Mozy as they are extremely cheap and reliable!
You can store your images all over the internet for free but if you are serious about building a business, you need have control over all of your content. You do not want your images disappearing as this is counted as a broken link and these kinds of errors can cause a drop in rankings. Therefore you need to those extra images on an online file storage service or your own server.
It is the same with website hosting, you need your own hosting so you can be in complete control of your own business.
Mozy Online Backup is the preferred choice by Walt Mossberg of the Wall Street Journal, Christopher Null of Yahoo! Tech and winner of the PC Magazine’s Editor’s Choice Award. It is the most secure, feature rich and inexpensive backup service in the world. Mozy Backup 2GB Free or plans starting out at $5.99/mo.
#4. Choose a File Format
When you save an image on your computer you have the option to save it as a JPEG, PNG, GIF, or BMP and many more depending on the program you use. So the question is, when optimizing images for websites, which file type should you save your image as?
This will greatly depend on the image itself. If you have a flat image with a limited amount of colors, for example a computer screen shot, you could save it as a 8-bit PNG or a GIF format. This is because you do not need to showcase too many colors and details in the image. If you have a photograph that is colorful and requires quality then you need to choose JPG or 24-bit PNG, but JPG is smaller.
It gets far more technical than that, especially if you are using an editing program like Photoshop. Unless you have a photogallery website or something that showcases images, then I would stick the these simple methods for optimizing images for websites.
#5. Copyright Issues
You might think that copyright issues have nothing to do with optimizing images for websites but I think it does. You need to save your image as the right size, the right file type, so why not finish the job by having an image that you have right to actually use. When building a WordPress website you do not have time to deal with copyright issues so we should think about this issue before we upload.
- Make sure you won the image. This is the best way.
- When using someone else’s images, with permission, always include an attribution link back to their site.
Tools for Optimizing Images for the Web
Just say you already have a website and have already uploaded images that are not optimized? That is OK as you can still optimize those images even after uploading.
Install a WordPress Plugin
For example, you can install a free WordPress plugin to help you optimize your images called Smushit. This plugin will optimize images in several lossless ways by:
- stripping meta data from JPEGs
- optimizing JPEG compression
- converting certain GIFs to indexed PNGs
- stripping the un-used colours from indexed images
The screenshot below shows how easy it is to use. Simply go to the media library, select the images you want to smush, then choose “bulk smushit” from the menu. Then press apply.
Use Image Optimizing Software
You can also download a free program to optimize images for websites. One example is Riot. This is best used before uploading an image to your site.
Just go to the website and press on the big green arrow to download for free. This software is awesome and very handy for all webmasters. You will be able to control compression, number of colors, metadata settings and much more, and select image format (JPEG, GIF or PNG) for your output file.
Optimizing images for websites is easy when you can compare the image formats at the click of a button.
What are your tips for optimizing images for websites?