Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

How to Optimize Images for Use on your Site

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Now that we’ve talked about how images are used in WordPress, we have to talk about how to optimize images for a small business, professional services website. You don’t just want to take a picture from your camera and stick it on your website. Optimization applies not just to your own pictures but to images that you purchase for your site.

What is Image Optimization?

Image optimization is finding the right balance between file size and image quality. There’s never any good reason to put an ugly image up. It’s has to look good. There are varying ways to reduce file size and still maintain image quality.

You can take a three and a half meg image that you buy on dreamstime and take it down to 150k with no one the wiser seeing it on your site.

Why is Optimization Important?

Whenever we talk about using images we need to talk about image optimization. About finding that right balance between file size and image quality. But why should you bother with optimizing images? Why not just upload massive images to your site?

Faster Page Loading

Well, the first reason is because optimizing will increase the speed of your web pages. Smaller file size images mean quicker downloading images which means faster loading of your web page. Faster loading of your web page increases user retention.

Increased User Retention

If somebody sitting there waiting for an image to download forever, they can just as easily walk away and look up another site. And, of course, Google studies show that the longer it takes a page to load the less the number of people stay with that page. They may just disappear before the page loads.

Search Engines Factor Page Speed in Ranking

The third thing is that Google factors page speed into rankings. If your page loads very slowly your site will rank very low even if it has really good content. If it takes a long time to load it’s going to get a lower rating than comparable content elsewhere. These are the reasons why you want to optimize your images.

Four Elements to Image Optimization

Again, image optimization is the process of find that balance between image size and image quality. And there are four elements of image optimization.

  • Resolution
  • Dimensions
  • Compression Format
  • Compression Quality

The first one is the image resolution. The second one is the image dimensions. The third one is the image compression format. Hopefully, your eyes aren’t glazing over yet because while it sounds complicated it’s a simple concept. And the fourth one is compression quality. These are the four aspects of image optimization that you’ll be able to master here with a little bit of practice.

Resolution

Let’s start with Image resolution. You often buy images at 300 dots per inch. But uploading an image at 300 dots per inch isn’t useful because the web page cannot see an image at 300 dots per inch. That is unless you’re looking at a retina display. The display can only use 72 dots per inch. Please, friends whenever you are setting up images, you want to set them up at 72 dpi.

Making retina ready images is not something we will be doing because that’s very specialized. Having said that, the way you make retina ready images is not by changing their dpi, it’s by changing their size so the dpi is still the same. Retina displays will take a much bigger image and scale it down so that the functional dpi is higher. So even when you’re creating images for retina display those images still should be at 72 dpi.

This is an absolute rule: never upload an image to your website that is not 72 dpi. And that’s image resolution. It’s an easy rule.

Dimensions

Let’s move on to Image dimensions. And by image dimensions, we’re talking about how many pixels wide and how many pixels tall it is. You always want to upload the maximum size you want it to be displayed at. Remembering that WordPress will make smaller images allowing you to choose smaller images when you want them.

Upload the Largest Size You Will Use

My suggestion is always to upload a big image. By that I don’t mean a 3000 pixel wide image but there are some cases when a 1900 or 2000 pixel wide image is the right image size to upload.

Typically, the right size upload might be 1280 by 720 or it might be a 1000 px wide. Just keep in mind that you always want to upload the maximum size you think you may want to display it. As I just said, you always have the options of using one of the reduced size using WordPress image sizes.

Never Scale Up An Image

However, an image should never be scaled up. There is no scaling up of images that looks good so I always start with a large image and then crop it down and scale it down. Web pages can scale images. And they can define images on the fly by explicitly defining a height and width. But you should never use that to enlarge an image. And really you should seldom use it to decrease an image.

Scaling Down Does Not Decrease File Size

So if you want a 300 pixel wide image to show up inside the content, you shouldn’t choose the full size image and then and then scale it down to 300 pixels wide. You should choose the medium sized image that is 300 pixels wide. Use the available image sizes rather than scaling.

The reason for that is that scaling an image does not decrease its file size. So if you take a 700 pixel wide image and use WordPress tools to scale it down to 300 pixels wide, it’s being artificially scaled and the web browser is still loading the big image.

So you don’t want to use scaling as a means of providing smaller images. You want to use the defined WordPress image sizes for choosing smaller images which means that you first have to have uploaded a large.

Image Compression

When I start talking about image compression format people usually start to glaze over but I’ll keep it simple. There are three typical website image formats.

  • Jpegs – best for photos
  • Gifs – best for graphics
  • Pngs – best for transparency

You really have three choices of image compression format. You have jpegs. You have gifs or some people refer to them as jiffs. And then pngs. There are other formats but beginners are really only going to work with these three.

How to Choose the Right Image Format

You want to pick the right one for the right use. If you’ve got a photograph then you want to use a jpeg. If you’ve got a cute little graphic image then you want to use a gif. And if you’ve got areas of transparency in an image and you want to use a png. That’s the rough summary of their uses.

Quality Levels

Each image compression has some kind of quality level. And so when you save a jpeg you can save it at high quality which will result in a big file size or you can save it a low quality which will be a much smaller file size.

You’re going to adjust the quality of a jpeg so what you should do is compare the various quality levels to make the right choice. You don’t want to reduce the quality to the point at which the image looks bad but you don’t want the quality to be higher than is necessary for the image to look good.

You want to choose the lowest quality level that produces an acceptable image. There are four quality settings to look at.

It will be either a quality percentage which is the way it is with jpegs or the number of colors which the way is the way it is in pngs and gifs. There is also transparency in pngs and dithering in both pngs and gifs.

In a gif the number of colors and dithering will set the quality. If you can get by with 64 colors, the image is going to be quite a bit smaller than if the image requires 256 or 512.

The same thing is true with pngs. If the image has a lot of transparency and a lot of colors then the image is going to get quite a bit bigger. So you’re balancing these percentages to find the smallest file size that nevertheless still looks good.

JPEG Example

Let’s take a look at some examples. We’ll start with jpeg. Here are two images. One is a graphic and the other is a picture of fruit. This is actually a pretty big image. This photograph of bananas and various fruits has a very low quality setting. I think I set it at ten percent but it still works just fine on a web page. And it’s only 9k.

The image probably started out 2.5 megabytes. But when we reduced it in size, reduced it in resolution and then reduced it in quality it came down to 9k. And it still looks as good as it did if it were at 50K.

However, this is a very poor application for jpeg because this is a pretty high quality jpeg. But you can see there’s ghosting all around the edges and it looks fuzzy. It doesn’t look nice and crisp and clean and that’s because jpegs are really good at gradations of color. They’re not good at hard lines of color. So I’ve got a black and a gray or a black and a purple and a blue. That’s something that jpeg is going to mess up unless it’s a very high quality.

GIF Example

The same thing is true with a gif. A gif is relatively poor at gradations The fruit image is now at 24k but it doesn’t look nearly as good as it did as a 9k jpeg. Obviously the jpeg is the right choice for the picture of bananas. Because even at 24K it doesn’t look nearly as good.

The opposite is true for the graphic. This is only 5K in the gif and it is much clearer, much crisper because the gif does really well with hard lines of color. It’s obviously much better at 5K than it was as a jpeg at 7K.

PNG Example

Finally, let’s look at a png example. To make the fruit image look decent it is at 96K. And at 96K this image doesn’t look any better than this jpeg version at 9K. So you wouldn’t use a png for a photo like this.

But it does a great job with an illustration like this, our graphic image. Again, it’s very crisp and if this had transparency behind it then this would be a good choice for it. With a white background obviously the gif gives you a smaller file size.

So you’re going to choose generally start with the right image type, photos versus graphics. Then you’re looking at the quality of the image in a range. And generally speaking, as long as it was a high resolution image to start with a low quality jpeg looks just fine on a website.

Image Preparation Software

So, how do you do all this work? You do it with software. There are lots of software out there that let you do this. Here is a list of what I consider to be the most typical.

  • Adobe Photoshop
  • Adobe Photoshop Elements
  • Snagit
  • Paint.net – Free
  • Gimp – Free
  • http://resizeimage.net

Adobe Photoshop and Photoshop Elements

I have lessons on the site for how to use Adobe Photoshop and use Adobe Photoshop Elements to optimize images for the web.

Adobe Photoshop is a very expensive program and it’s time consuming program to learn to use and I would not recommend it to anybody if the only reason you were using it was optimize images. It’s too expensive and complex a tool for the job but if you’re using Photoshop for other things as well, then it’s great.

Adobe Photoshop Elements has the same skillset but it’s only a hundred dollars or so instead of hundreds of dollars or maybe Photoshop costs $1200. Adobe Photoshop Elements real big claim to fame is for family photos but it does a great job and has the same tools for image optimization as Photoshop does.

Snagit

I forgot about SnagIt. Thank you, Robin for the reminder because I do use Snagit all the time. Snagit does have decent image quality settings as well.

But if you are going to use either Photoshop or Photoshop Elements and all you’re doing is image optimization then Photoshop Elements is the way to go.

Paint.net

Paint dot net is a free program. I have lots of tutorials on the website on how to use paint dot net. It’s a little more cumbersome for image optimization than say Photoshop or Photoshop Elements but nevertheless it is it’s a free tool that works pretty well.

Gimp

Gimp is another free open source tool that I find to be just irritating as the day is long. I’ve never gotten myself to be able actually use it well. But if you already know how to use Gimp then you can use gimp to do the same thing.

Resizeimage.net

A site that I found when I was preparing for this class is resize image dot net. This site actually seems to be pretty cool. This is an image I played with. Let’s upload a different image. We’ve got these people sitting there talking.

Example of How to Optimize an Image

So you can upload the image. That is a really big image. You can see it’s only fourteen percent uploaded. You can upload a maximum of 120 megabytes of image here. This is probably three and a half. It’s a very it’s a large image.

While that is uploading let’s review what you can do here. You can crop your image down. You can rotate it, flip it. You can reduce the size of the image. You can choose your image format. It’s on gif at the moment but if you choose png then you can choose different kinds of compression. You can check and see what it looks like in that case.

It’s downloading a preview image. So there’s our image here. I would say that we don’t want the image that big. What we really want to do is crop it down to something like this for use on the site. Do that and then hit crop. And now the images are smaller.

And then you can resize the image. Right now it’s 5184 by 2632. Let’s say I’m going to make this 1200 pixels wide which is 23% now of the original size. We don’t have to use any of these background settings. They don’t really matter in this case.

This is an image so we know automatically that the jpeg is the right type. And you can say best image quality and it’ll do it by itself but the image will be too big. Between normal compression or progressive compression I always use normal compression, and this is considered low, fifteen percent.

Let’s view the image. And it turned it into a gif. That’s not what we wanted. I said jpeg so why is that showing is a gif? I don’t know. Well, that’s really odd. It worked just fine for me yesterday.

You can preview the image at a different percentage. When you click view image it will show you what that image looks like before you hit resize the image. Let’s choose that. The image went from 6 megabytes down to 23 kilobytes. Okay. And it’s still 1200 by 609 pixels.

Where’s the download button here. Download image. It looks to me like there’s a little bit too much ghosting there. That is the one thing about light colors is you can get a bunch of ghosting. Let’s take that up to twenty five percent and resize the image now. It went to thirty one and a half K which is fine.

Let’s view the image and there it is at its full size. Now we don’t see the ghosting. Let’s go back to fifteen and resize the image down to twenty three and view the image. You can see it really is kind of breaking up there. This is not a good image size for that. Let’s see what it looks like at 50%. Resize the image. It’s up to 48k. The image looks beautiful.

Now the question is does the extra k between these two make any difference. I’m switching back and forth between the two and is there isn’t actually any perceptible difference so I would say, no. I can see a tiny bit of difference but it doesn’t really matter. I would take this twenty five percent one as your image size.

You could always just say, show it to me as a png, I don’t believe Rick and I want to see what it’s like. We’ll use lossless compression. And let’s resize the image. So the same image size is 883 kilobytes. We can use lossy compression to resize the image and get it a little smaller. Oh, it didn’t get any smaller. Actually this doesn’t really give us any controls over that stuff for png so you may in fact choose a different piece of software for that.

Take it back to jpeg and resize the image. It’s back down to 31k. Download the image and you’ve got the image to use.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment