Images are a very important part of your website. I would rank them right behind posts as you need a image to make the post or page more appealing to the reader. Images also break up the text, so that it is not too boring to look at.
Image files can be very big in size, so it is very important to make these image files sizes as low as possible so that when they load, they do not slow down your site. Lowering this file size is what we call, optimizing the image.
Your are going to need an image editing program to do this. I recommend Photoshop, but it can be pricey, so I also recommend Gimp as it is a free open source image editor. I have used both of these editors and if you don’t want to shell out the cost for Photoshop, GIMP is a good alternative.
Photoshop is a very good image editing program by Adobe; the best in my opinion. Its retail price is around $600 for the stand-alone program. What I use, and recommend, is the Creative Cloud version. If you click on the image above, it will take you to the Adobe site where you can do a one month free trial of Photoshop. After that, If you decide you love the program and want to continue using it, you can pay the monthly price, which is around $10. The good thing about any of the Creative Cloud products, is that all of the software updates are included in the monthly fee, so you don’t pay any extra for that. Also, you can try out any of their products for one month as well.
Gimp is a very good free competitor to Photoshop. It is an open source program that was developed to offer a free alternative to Photoshop. Gimp has a lot of the same features that Photoshop has, only the features may be called something else, or they may be in different places. There are a lot of tutorials out there for Gimp that can help you use the program if you decide to. If you click on the photo above, it will take you to the site to download Gimp.
Optimizing For The Web
In this article we are going to talk about optimizing images for the the web, so I am not going to talk alot about the features of Photoshop, or Gimp, but just as it relates to optimizing images. I would add too, that I am using a windows PC, but the steps would be similar, if not the same, on a MAC.
Lets start with Photoshop. Start with a image file you have in mind to optimize, and open it in Photoshop. Photoshop is designed like any windows program so opening a file is the same. Go to the top menu bar and click on File>Open. This will open the file dialog box for you to select the file on your computer.
Click on File and Then Open
Now after you have opened the image in Photoshop, you want to go back to the top and select File>Save For Web. This will open the box below:
Image Not Optimized
Change Settings to Optimized The Image
Lets take a look at the image above. In most cases, after you select Save for Web, Photoshop will optimize the image for you without any further input from you. But you should check the file size in the bottom left of the dialogue box to see what size it is. If it is under 20k (kilobytes), you can leave it as is. If it is not, then you want to change around the settings to get to 20k or lower. I am using 20k as a standard here, but you could go higher, but it could affect the loading time of your page.
We will be changing settings here to get our file size down. You want to get it as low as you can and still preserve the quality and look of the image, but at minimum keep it to 20k (kilobytes) max. In our image above you will see that our size is 9.49k, which is very good, (I already optimized the image above, look at the one before that is Image Not Optimized), and the dimensions are 470px by 290px. The widths determine the size of the image on your page. You should know what your page width is, in my case I know it is 700 pixels wide. So, you don’t want to exceed your page width, but you can make it smaller.
Near the top right of the image you will see that it is a jpeg image of medium quality. You can change up the image types to see what works best, but most times, jpeg is the best to use. Since we are at 9k and the image looks good, our image is now optimized and is ready to be added to our page. Just select the save button at the bottom and save it to your computer to be added to your web page later. See Adding Images To A WordPress Page or Post.
Gimp is also designed like other windows programs, so opening a file is similar. Go to top menu and click on File>Open to select your file on your computer. After you find your file select Open again. You will see the screen dialogue box below.
Optimizing an image in GIMP requires a few more steps than in Photoshop. First we need to resize the image by selecting Image>Scale Image from the top menu. You will see the dialog box below:
You can keep the image widths that are shown here or you can change them. But, definitely change the X and Y resolutions to 72. This is a standard for web images and reduces your file size. Now you want to select the Scale button.
Now we want to “save the file for the web” by next selecting File>Export: Pick the location and name of the file you want to save it as, then select Export, and you will see the dialog box below:
Check the box that says Show preview in image window, and this will give you the file size. You can use the slider to lower or raise the file size. After you’re done, then select Export, and your file will be save to your computer and your image is now optimized. It is now ready to be added to your web page.
Photoshop or GIMP?
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017