BIZ OWNERS
arnold on Oct 17, 2018
Article Summary – To optimize an image for a website you need to do the following:
- Make sure you are using the exact size image needed for your page or post
- Compress the file with TinyPNG
- Give it an accurate and keyword rich file name
- When uploading to WordPress copy the title into the Alt tag
- Choose what happens to your file in your page or post.
- Use a plugin to further compress your image
The rest of this guide will explain those steps in a little more detail.
Why do you need optimized images?
Google, Site Speed, SEO, User Experience, and the ADA are just five of the reasons you need to optimize any images you put on a website.
A growing On-Site Factor for Search Engine optimization is website speed. Google doesn’t want to show websites in the search results that load slowly. It has also been found that 25% of people will abandon a search if it takes longer than 4 seconds to load and 74% will abandon a mobile website after waiting for 5 seconds. The peak load time for a website should be about 2 seconds.
Google wants to make searchers happy so they rank fast websites higher in the search engine results page than equivalent websites that load slower.
So how do we easily speed up websites? The number one reason I see for websites with slow load times is the use of images that are not optimized with large file sizes. The more space your images take up, the longer it takes for your website to load. Think about someone trying to load your website with a 3G cell phone. If you have one image on the site that is 2Mb then that image alone is going to take a few seconds to download.
The rest of this guide is going to show you how to fully optimize your images for your websites.
Image Dimension Considerations
The first important thing to consider is going to be the dimensions of your images. If a page on your website displays an image that is 600 x 400, then do not load anything bigger than 600 x 400. If you upload an image into your website that is 2400 X 1600 and your website displays it at 600 x 400, then the image is taking up four times as much space. Anyone who visits the website will still need to download the entire 2400 x 1600 image before it loads. So, rule number one is to always know the dimension of the images you should be using in your websites and don’t serve scaled images!
Reducing The File Size Of The Image With TinyPNG
There are ways to reduce how big your file size is without having to reduce the dimensions or the image quality. You should always compress images before uploading them into your Website. To do this I always reduce the file size of my image online with a website called TINYPNG.com. With this website you upload a photo and TINYPNG gives you back the exact same image with the exact same dimensions but at a much smaller file size. This is a great way to reduce the size of your images before you upload them to your websites. In the image below you can see TinyPNG reduce an 801.8KB image to 309.7KB. The image looks exactly the same but that image will be 500KB smaller.
Every single image that you upload to a website needs to be optimized with TinyPNG.
Besides reducing the file size of images, there are also some other important considerations when it comes to optimizing images.
LABELING YOUR IMAGES
The next way to optimize images before uploading them to your website is to name them something appropriate, descriptive and keyword relevant. As an example, the image above is named shrinking-an-image-on-tinypng.jpg. With that file name google can tell what the image is and my image has a better chance of appearing in an image search. A relevant and keyword rich title also helps to reconfirm the importance of the relevance of keywords on your page. If your page is all about TinyPng and several of your images have TinyPNG in the title then it shows Google that your page really is about TinyPNG.
Once your images are reduced, compressed and properly labeled you can then upload them into your website. As they are uploaded to a CMS such as WordPress you should make sure the title and the alt tag are entered and accurately describe your image. The title will always be the file name of your image and you can just copy this to the Alt tag as long as you properly labeled your image in the previous step.
The alt tag is what Google uses to know what an image is. Google used to be unable to tell what an image was (but they are very close to being able to read images now) and it relied on the Alt tags since they are purposely put there by the webmaster to describe the image. Also, the (ADA) Americans With Disabilities Act is being expanded online and it is going to become mandatory for most websites to have their alt tags edited as website reader programs read the alt tags out loud to persons with eyesight disabilities.
EDITING IMAGES IN YOUR BLOG POST
Once your image is uploaded to a CMS such as WordPress and in a page or blog post there are still some changes you can make to optimize the image. Sometimes you might want to upload a large image to your website but display it small until it is clicked on (such as a restaurant menu which would be hard to read if it were small but would take up too much room on a website if it were full size). In this case you would upload the full size image, but display it smaller with a caption that instructs the user to click on it to see a larger file size. In the image settings you simply change the “Link to” to “Media File”. This will allow you to upload an image with a smaller dimension and allow the user to click on it to make it larger.
Once your image is in the post you can click on the image in your post editor and then click the pencil at the top to get into the image options.
You will then see these options:
ALIGNING IMAGES IN YOUR POST
When you upload your image to a blog post you can choose how you want it positioned in your post. You can choose Left, Right, Center , or none. This is how you get the text to align around an image.
WHAT HAPPENS WHEN SOMEONE CLICKS YOUR IMAGE
The other thing to consider is what you want to happen when someone clicks on your image. Do you want them to see a bigger file size? Link to another page? Nothing? Make sure you tell WordPress what you want to happen.
CAPTIONS
Make sure you include a caption if needed.
Plugin For Image Optimization:
One last plugin I like to use for image optimization is WP Smush. This will further compress your images after you have uploaded them to WordPress. The screenshot below shows the plugin after it smushed all the images on my website:
Conclusion:
All the steps above are what I do every time I upload an image into a WordPress website. There are a lot of steps but you have to get into the habit of taking the extra minute for each image. Once this becomes second nature, you will be able to complete all these steps in less than a minute for each image.
When your website is full of optimized images it will load faster, Google will have better information about the images on your website which is good for SEO, your Quality scores for Google Ads will increase for certain keywords and your users will have a much better experience.
If you have any questions about anything I wrote, please comment below or send me a message!
