Optimize images for WordPress, Whether you are a blogger, content writer. For an online magazine or an online store manager, image optimization is an art. You will want to specialize in. If you are asking yourself whether I should add images to the content of the site and whether it is helpful.
the answer is unequivocal – yes !!!
Images are eye-catching, make the site more interesting and colorful, emphasize. The subject of the article and the text surrounding it for the surfers. And even contribute to the promotion of the site Google and the various search engines.
But without proper optimize images for WordPress, you are wasting a high-value promotional asset. In this post, I will explain the steps that need to be taken how to optimize images for WordPress sites and in general.
1) Choose a suitable image
Be sure to choose a meaningful image that is relevant to the topic of your article, page, or product. The image should reflect the subject of the article and connect to the text surrounding it. An image surrounded by the relevant text. Will ranked higher for keywords to which the image directed.
A few things to pay attention to:
- Avoid purchased images (like Stock Photos). You want the site’s images to stand out and attract attention in favor of higher conversions. If you fill your site with purchased images, you will likely look unoriginal. And like thousands of other sites that exist on the web. Even if you perform excellent optimization, it will not have the same impact. Or promotion potential as high-quality original images.
- Hence the need to use original and optimize images for WordPress. The more original and interesting the image. The greater its impact on the user experience.
- Attention to copyright – Regardless of the image you choose to use. You should note that there is no conflict at the copyright level. Using the image without a proper license will expose you to a lawsuit.
2) Prepare the image for use in the post
Once you have chosen the right image, whether an illustration, diagram, or photograph, there are a number of things you need to do and take into account:
Choosing the right name for the image
Image optimization for WordPress begins with choosing an appropriate image name. It would be correct to use keywords that describe what the image is talking about. You are interested because the search engines know. What the content of the image is and what it is talking about.
Although the image name is not the first aspect that search engines refer to, it does not mean that you do not have to choose a suitable name for the file.
Let’s look at an example – take a look at the following image:
You can use the generic name set by your camera (such as ERT0091.jpg).
But it would be much more correct to call the file Red-BMW-M8-Competition-2021.jpg.
Think about how your customers will look for products on the site.
What naming pattern will they use for the search?
In the example above, those looking to buy a car of this type will probably use the following terms to search:
- Red BMW M8 Competition 2021
- BMW M8 Competition 2021 Red
- Red BMW M8 2021
You can take a look at your site’s analytics to understand what terms users are consistently using. If you do not, just make sure you use relevant words in choosing the file name.
Note that the underline “_” should not be used in the image name but the dividing line “-“.
Choose the right size for the image to optimize images for WordPress
The loading time of the site affects the user experience and therefore has an impact on the promotion of the site. The faster the site goes up, the more satisfied the search engines (SEO) will be. The images have a very significant effect on the page weight and its loading time.
A situation where you upload a very large image, which ends up appearing small on your site is not a desirable situation. In other words, avoid a situation where you upload an image of 1500 × 2500, which appears on your website as an image of 250 × 150 (relevant when the page actually uses the full image size).
Resize the image(optimize images for WordPress):
Be sure to resize the image to the size in which you are viewing it. WordPress helps to do this by creating several sizes for the images you upload, and you have the option to choose the size of the image you attach from those sizes.
One way to control the image sizes that WordPress produces is in the WordPress Control Panel> Media Settings. In the next post, you will find more information about and more ways to control the sizes in the images that WordPress produces.
Speaking of background images that are spread across the entire screen, it is likely that these will be embedded in CSS as background-image along with background-size: cover. Most people upload 1920 × 1080 pixel images in this case, but background images that do not convey a special message, or those with irrelevant details – can be easily downloaded to 1600 × 900 pixels.
Reduce the weight of the image – Image Compression
The next step in optimizing images is to reduce the weight of the image as much as possible, while the image quality is still to your satisfaction. Because the loading speed of the site has an effect on the promotion of the site (and of course it improves the user experience) it is important that you make sure to do so.
Make use of external tools and plugins that allow you to compress the images before inserting them into the post. Software such as JPEG mini Lite or ImageOptim or external tools such as TinyPNG can be very useful.
There are even a number of WordPress plugins that do this job for you and the most appropriate in my opinion is the EWWW Image Optimizer (free tool). Other great plugins are WP Smush, Short Pixel optimize images for WordPress, and TinyPNG Compress JPEG, (JPG) & PNG Images of course.
There are quite a few storage companies that prevent these plugins from doing the job, a situation that is likely to happen solely in shared storage.
Anyway, after uploading the image you can check if the image is properly compressed with the help of tools such as GTmetrix, Google Page Speed Insights, or the great tool of them all WebPageTest.
3) Attach the photo to the post(optimize images for WordPress):
this is important that you upload the image to the article in a place relevant to the text around it and be sure to insert a caption, alternate text, and title for the image.
I will note that the option to insert a description into the image is less relevant because it will only appear on the attachment page of the image, and these pages are in most cases irrelevant and are redirected back to the post containing the image.
The caption of the image is basically text that accompanies the image itself. An example of this caption can be seen at the bottom of the BMW M8 image we talked about and is shown at the beginning of the post. Why is this important for website promotion? Because surfers tend to scan this text as part of the article. More than that, studies show that captioning is one of the first elements that surfers crawl after headlines, bold text, and images.
However, there is no need to add a caption to each image and sometimes images serve a different purpose. Decide whether this image serves you in terms of promotion, ask yourself the question whether, in terms of visitors to your site, there is logic to the text under this image or not.
Alternative Text is the text that is added to the image and displayed in situations where it is not accessible to the surfer on your site for any reason. For example, situations where a visually impaired person has removed the ability to display images in a browser and uses screen readers of various kinds. Alternate text ensures that no information is lost at the content level, and it would be correct to add it also in terms of site accessibility.
Let us give an example of what an alternate text in the code itself looks like:
<img src="Red-BMW-M8-Competition-2021.jpg" alt="Red BMW M8 Competition 2021”>
Alternate text is valuable in terms of website SEO. Adding alternate text with relevant image keywords can help you rank higher in the search engines. In fact, using alternate text is the best way to appear in Google’s image search engine.
Here are some simple rules about Alternative Text:
- Describe the image in simple language, just as you did choose the file name.
- If you are selling products that have a serial number or model, use those in the replacement text.
- Do not blow up the replacement text with a lot of keywords (for example – alt = “BMW M8 muscle car buy now cheap best price on-sale”).
- Do not use alternate text for decorative images. In these cases, the alt attribute must exist in order for your HTML to be valid, but it must be empty. In general, try to display decorative images using CSS.
There is also an Image Title attribute but there is no obligation to use it and its value for SEO is minor if any. The use of alternate text is what makes Google and other search engines understand what the image is talking about. But for the order, habit, and desire to follow W3C settings, insert the same text you entered in the alternate text in the Title tag.
When you hover your mouse over the image, Internet Explorer displays the alternate text as a ‘Tooltip’, Google Chrome, however, will display the image title and not the alternate text.
Create a sitemap for images (XML Sitemap):
Add the images on your site to the site map (XML Sitemap) so that they are accessible to search engines in a single place. This allows Google to discover the images easily and index them faster. Beyond that, this increases the chances that the images will appear in the search results when searching for any phrase in Google Image Search.
If you are using the WordPress SEO by Yoast plugin, the option to create an XML Sitemap is done at the click of a button.
Assigning an image to your article is also important sharing on social networks. The Open Graph protocol allows you to share content not only with the surfers. On the site but with your friends/followers on Facebook and other social networks.
It is important that when sharing, an image will appear to attract. The viewers’ attention, increase the percentage of clicks. And thus the traffic to your site. And build your branding. Make sure that the correct Meta Tag exists on the <head> site as in the following example:
<meta property="og:image" content="http://example.co.il/link-to-image.jpg" />
Open Graph protocol, which means that these tags are necessary for an image. To appear when sharing on social networks. If you added an image to your article and did not upload it. While sharing it on Facebook, go to the Open Graph Object Debugger. And click on Fetch new scrape information after entering the address you shared. This tool can help you identify all the problems. That exist on a particular page terms of Facebook sharing.
The Open Graph protocol also exists for other social networks. Such as Twitter, Pinterest, and the like. And one way to configure it is with the help of the WordPress SEO by Yoast plugin.
Performing optimize images for WordPress SEO is a set of several actions. If you are summarizing this post, pay attention to the following points. When you attach an image to a post you wrote or to a product in your digital store.
- Use the image relevant to the text around it.
- Choose the correct name for an image file that reflects the subject of the image in a few words.
- Make sure the image size matches the size it will be displayed on your site.
- Reduce the weight of the image for faster page loading.
- Add a caption to the image.
- Use alternate text (alt-text) for the image.
- OpenGraph Protocol – Make sure the appropriate tags exist.