But do you know an image needs optimization? Optimizing images can be helpful for your page SEO in many ways. During content creation, most people still think that image optimization is all about using proper alt text and naming them well.

However, optimizing an image is much more than just naming it and using suitable alt text.

In this article, I will describe some useful steps which you can use to fix your site image issue that appeared on GTmetrix and Pingdom.

Breaking down the image added above:

1. Due to the image optimization problem, the page speed score in GTmetrix is very low.
2. You can see the total page size is 6.78 MB which is significantly high; I would keep in under 3 MB so that the site can be loaded in just 1-2 sec.
3. Serve scaled images are the issue that appears in GTmetrix/Pingdom because of unscaled images according to your template settings.
4. Optimize images is the issue which appears because of the lossless version of those images can save extra data which will improve your page speed score.

* Remember page speed score is another essential metric that can help your page to rank high in search engines.

Learn How Fix Image Optimization Issues That Appears in Pingdom and GTmetrix

To fix these issues, apply the following optimization techniques.

#1. Find Unoptimized Images

After adding the images into your post-scan your URL to find image problem. There are tools like GTmetrix and Pingdom, which can help you identify the problem with image optimization issues. GTmetrix shows the issues in detail so I would recommend you test a particular page with GTmetrix.

As soon as the scanning is finished, it will display all the results into two different tabs, “Page Speed” and “Yslow.”

There are seven types of image-related problems that can occur during page scanning. Here’s what to do to fix those problems:

1. Serve Scaled Image: Resize the recommended images into the correct scale that your theme’s HTML & CSS support.
2. Optimize Images: Compress the images losslessly.
3. Specify Image Dimension: Define the width and height of images in HTML or CSS codes.
4. Make Favicon Small and Scalable: The recommended size of a favicon is 16x 16x.
5. Use a Content Delivery Network (CDN): Serve your images from a CDN URL.
6. Minimize Redirect: Serve images with HTTPS.
7. Combine Images Using CSS Sprite: Combine multiple images into one image using CSS sprites.

#2. Serve Scaled Images

If you get this warning to serve scaled images by GTmetrix, it means that the page has some oversized images. GTmetrix will recommend you to resize those images into the correct dimension (will be provided by GTmetrix) that your theme requires.

As soon as you scale the images to the recommended dimension, the serving scaled images warning will disappear. Scaling the images will help you to decrease the page size as well.

Caution: Do not change the image title while scaling the images.

You can either use an online image editor or any offline tool to resize the images as required. I use iLOVEimg, which is a free online editor and allows you to compress, convert, and resize images. Another tool that also works great for compressing both PNG and JPEG images is TinyPNG.

First of all, download the recommended image file from GTmetrix. Open the image editor and upload the image file which was downloaded from the GTmetrix link shown in the warning.

Note down the recommended image size from GTmetrix and set the dimension in the image editor. Resize and download the resized version.

Now upload back the resized image to the same file location using the cPanel file manager or any FTP client. Note that you should see an overwrite confirmation popup while uploading the image then select overwrite and upload option.

Follow this procedure and resize + upload back all the images which appear on GTmetrix recommendation. As soon as you finish the process clear your website cache and rescan the page with GTmetrix and the warnings will disappear.

#3. Optimize Images

The “optimize image” warning usually appears when the page contains some uncompressed images. Losslessly compressing an image will reduce the size of the image and image files will resize themselves instead of via CSS. Most importantly, the page load time will decrease by a little %.

To fix this problem, the open optimized image in a new tab which is recommended by GTmetrix and download it.

Now copy the original filename from GTmetrix (Image URL) and rename the downloaded file by pasting the copied name.

Now with the help of a Cpanel file manager or any FTP plugin and upload back the optimized images into the correct location (wp-content/uploads/date/….).

The location must be the same to solve the problem. While uploading the optimized image, make sure you get a popup to replace the old image file with the new upload. Then select confirm.

Repeat this procedure for all the unoptimized images. Once finished clear cache and re-test the page with GTmetrix/Pingdom and optimize images warning will be solved.

#3. Specify Image Dimension

Mentioning the image width and height (In HTML and CSS codes) enables faster rendering. This mention helps the server by rejecting the need for unnecessary repaints.

“Specify Image Dimension” warning appears when GTmetrix finds any image on your website without width/height mentioned inside the HTML or CSS code. These days some of the themes automatically add the image dimension while some others don’t.

Visual editor plugins for WordPress and live page builders such as Divi and Elementor allows you to mention every image dimension. It is the right approach by the developers so that you won’t face this problem + using these plugin you can fix the issue that appeared in GTmetrix too.

But if you don’t use any visual editor in WordPress then adding width/height in HTML code will help you to solve this warning. An excellent example of using dimensions in code is:

Once you have edited all the images and added their respective dimensions then clear the site cache and recheck the page in GTmetrix whether the issue was fixed or not. If you have done it correctly, then the problem won’t appear again.

#4. Make Favicon Small and Scalable

Favicon is the icon connected with a web page. This little image that remains in the “favicon.ico” file is stored in the server’s root. During a page load, the browser requests this .ico file, and hence it needs to be present with the page.

Every single time a browser asks for this favicon file, the cookies along the server’s root is sent. So making the favicon small in size will help to reduce the cookie size for the server, and it will improve the website performance score in testing tools.

You need to make sure that the favicon size is 16x16px, and the file is in favicon.ico format, and is cached using a caching plugin. Making favicon cacheable avoids frequent requests for it.

#5. Use a Content Delivery Network (CDN)

CDN (content delivery network) is a set of web servers distributed over multiple locations all around the globe which delivers your content more efficiently to the users. The advantage of using a CDN is that it can provide an equally fast website performance to all your users from different locations around the world.

When you are using a CDN, you need to serve the images from a different URL, which is called your CDN URL.

For example:

• Image URL without CDN: https://yourdomain.com/wp-content/uploads/2019/05/an-image.png
• Image URL with CDN: https://static-ea7a.kxcdn.com/wp-content/uploads/2019/05/an-image.png

The CDN URL can be different for different CDN providers. There are many CDN providers available; I prefer to use KeyCDN and Cloudflare. But this can be your personal choice. Most of the CDN providers are good, make sure that you have picked the right one.

Cloudflare – Cloudflare serves the website contents with 150+ data centers while KeyCDN has in total of 34 data centers. Cloudflare is much easier to combine with other CDN providers, which will increase the data centers resulting in faster content delivery.

But Cloudflare doesn’t set separate CDN URLs for the images. Instead, it serves the same image with caching+compression. So to get a different CDN URL you can serve images from KeyCDN.

KeyCDN – Setting up KeyCDN with your WordPress site is easy.

Create an account, verify your email address and you will be ready to serve your site + it contents with CDN. Create a new custom zone URL where you want to pull content from during the browser request.

Go to “zone” from the KeyCDN dashboard and fill-up the form.

Save the zone, and it will lead to a new window where you will see the newly created Zone’s status + your CDN URL and SSL status. You can add more zones if you want and manage your available zones efficiently.

Now on your WordPress install CDN enabler plugin (lightweight) and use the CDN URL from KeyCDN that you have created earlier.

Now clear your website cache and Cloudflare cache (if you use Cloudflare) and re-test your website address in GTmetrix. This time the “Serve Images From CDN” warning should disappear.

#6. Combine Images Using CSS Sprite

Nowadays, themes developers use small icons to create and design a beautiful website.

Moreover, we use icons in our pages, mostly on the homepage. On my website, there are four icons on the home page. But they are one image which has combined using CSS sprite.

It is a good practice because combining four images into one decrease the total number of browser requests to the server and speed up page loading time as well as decrease server load.

Creating CSS sprites can be a little bit technical, or you can use a CSS sprite generator.

Quick note: Don’t apply CSS sprite for your great images on your page such as featured images, images that describe your writings. Because combining these images will lead to loss of individual alt tags. Alt tags are an influential SEO factor for images.

#7. Some Bonus Tips To Optimize WordPress Images

Above mentioned techniques will help you to fix image optimization issues in GTmetrix + optimize WordPress images. However, there are more factors when it comes to image optimization. You can use these tricks to optimize website images, even higher standards. I will mention a few ways which you can apply to the image.

#7.1 Apply Lazy Load

You can halt the image loading while the other parts of a website such as layouts, fonts, CSS are loading. It may or may not affect the visitor’s experience, depending on how fast your web server is! Because as soon as the site starts loading the images will be waiting for other components to be fully downloaded.

Now if your site can load the non-image part real quick then applying lazy load is beneficial.

I use Autoptimize caching plugin for my site, and there is an option to enable lazy load for images. On applying lazy load, the site score has improved from 90 to 93 on GTmetrix along with a slight improvement in loading time. If you consider using a different plugin, then use the lazy load plugin.

(You can see my GTmetrix site report here) [lazy load enabled]

For more Lazy Loading plugins alternatives read our post – 10+ Best Free Lazy Loading Plugins To Speed Up Your WordPress Website.

#7.2 Remove EXIF data

EXIF data contains information such as image shutter speed, image ISO, focal length, the model of the camera, image data, and much more. These pieces of information don’t need to include while using that image on your website. So try to remove them.

Popular WordPress image optimization plugins like Imagify, ShortPixel, and Smush have an option to keep or remove EXIF data. So while configuring these plugins, make sure you have unchecked it.

#7.3 Use Correct Image Format

I prefer to use JPEG, PNG, and WebP format on my website.

PNG is an uncompressed version of an image. So you should use PNG with small images with fewer color effects because a high-resolution image with more color effects can increase the size of a PNG file.

JPEG is concentrated so that it can be used for colorful images. JPEG is lower in size, and hence, they lose their quality. You can see the difference between JPG and PNG from this popular demonstration by Labnol.

WebP is a new web-optimized image format which is a combination of both lossless and lossy compression. Developed by Google and useful for the website as it provides better image quality with less image size.

Final Words

As long as images remain one of the crucial parts of an article and webpage, image optimization is necessary. I tried to mention some key points using which you can optimize WordPress images. However, as I said earlier, there are more tricks that you can apply to speed up the page performance.

Some of them which I have not added in this article (Because it is a performance-related article) are Hotlink Protection, Name + Alt Tag, Image URL Redirect minimization, and leverage browser caching especially for images, etc.

Anyway, make sure to optimize your full website performance since this is a crucial factor in SEO these days. If you have any thoughts or doubts regarding this article mentioned below, I’m always happy to hear from you + help you.

The post How to Fix Image Optimization Issues That Appears in Pingdom and GTmetrix appeared first on WP Pluginsify.

To help you use WordPress the right way, today, we’re going to look at some of the services and great tools out there that you can use. These will make the content you create more interesting, engaging, and more accessible for the search engines to crawl and understand. In that way, what you put out there is going to attract the attention you need.

Tools and Services for WordPress Content Optimization

Headlines

The headline is possibly an essential part of your article. It both tells Google and your audience what they’re going to read about. And that makes them useful indeed. Of course, there are plenty of great tools for WordPress apps on offer, which can make a big difference.

At the same time, you don’t need to use any of them. A much better tool is Coschedule’s headline analyzer.

They will rate your headline based on several statistics that are clearly defined and easily understood. In this way, it is straightforward to fix whatever headline problems you might have quickly.

Even better, by using the tool a few times, you already get a better idea of what works and what doesn’t, making your headlines better also if you’re not using the tool.

Readability

The best readability app for WordPress is widely considered to be Yoast SEO. What’s so great about Yoast is that it gives you a direct checklist at the bottom of your blog page, which will tell you how well you’re doing in terms of readability.

Even better, they also give you a lot of information about how you can improve your SEO, which will make your content rank better on Google. All you need to do is follow the checklist, and you’ll be well on your way.

Another useful tool that isn’t integrated into WordPress but is still a helpful tool is the Hemingway App. It will show you which sentences need to be taken under the loop and improved. It will also point out other problem areas, such as the overuse of passive sentences and adverbs.

Proofreading and Editing

Of course, you’ll want to make sure your text isn’t just readable but doesn’t have any mistakes or problems in it, either. In this regard, there are also plenty of great tools out there which you can use.

Probably the most famous would have to be Grammarly. This one is well-liked because it offers insight that even Word doesn’t catch most of the time. What’s more, if you’re willing to pay for the service, they can point out mistakes you’re making that you might not even know are confounding your writing.

The only problem with Grammarly is that as it’s a machine, it does sometimes make mistakes. That’s understandable as human languages are still hard for bots to deal with. For that reason, sometimes, you’ll want to use writing services with actual people involved. There are a lot of them out there, so make sure you check the reviews so you get a service that will give you excellent value for money.

Semantical Analysis

Google doesn’t just care about specific keywords anymore. It also wants us to use related keywords. Now, if you don’t feel that you include these naturally, then it’s always a good idea to use one of the many great tools that are out there.

For example, the very new but very useful tool Sosore will tell you what words are related to the keyword you’ve chosen, which will benefit your article. It makes things a lot easier than simply typing your keyword into google search and seeing what they advise you at the bottom of their page.

Not that that last idea is all that bad, but it will take you a lot longer. So why not simply install a quick WordPress app?

Meta Tags

Whatever keywords you’ve decided on and whatever words the semantical analysis has revealed to you, you should try to make sure that they go into the meta tags of your post as well. Google really cares about these.

The great thing is that the program I mentioned above to help you boost readability, Yoast can help you in this regard as well. They’ll make sure that your keywords are in the right places.

Admittedly, that program will have a bit more trouble with semantic keywords (as in, it doesn’t really pay attention to those), but if you follow the same advice as it offers on the original keyword, it will tell you what to do.

How to Insert Link

Internal links are one of the best ways to let Google know what a site is about. How it does this is it looks at the text you’ve put into the link and use that to figure out what the page you’re linking to is actually about.

For that reason, you mustn’t just use the words ‘this link’ or ‘that page’ there. Instead, you’ll want to formulate your sentences in such a way that the exact keywords that you’re trying to rank the page for are included in the text for the link.

Yes, this can sometimes make your text read a bit weird. But, with a bit of creativity and rewriting, you can circumvent that, and both leave Google happy and informed, as well as leaving your audience unaware that you’re constructing your text in odd ways for Google’s benefit.

Last Thoughts

The thing to remember is that everything you do needs to please two ‘people.’ Google and your reader. Now, Google is always trying to make sure that its algorithms get better and more human at reading your text. Nonetheless, they’re not there yet. Sometimes you’ve still got to bend yourself in weird shapes to make them happy.

The thing to remember is not to bend yourself too far over. After all, Google will continue to update its algorithm. Readers, in the meantime, will remain the same. So, if you’ve got to choose between readability and SEO, always opt for readability. One day Google will catch up, and then everybody will be happy with what you’ve done.

Hopefully, these great tools and services can help you boost your WordPress content optimization. Good luck!

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.

The post Tools and Services for Awesome WordPress Content Optimization appeared first on WP Pluginsify.

Optimizing your web design for video content can help it have a bigger impact. Which is why you should try to:

Place Videos Prominently Above the Fold

In most cases when video content is published on a webpage, it is meant to be the center of attention. Which is why placing it prominently above the fold and right below the headline is best. By making them one of the first things viewers see. It is likely to increase the effectiveness of the video.

If your web design is responsive, you should try to make sure that videos are placed prominently above the fold on smaller screens too.

Pad the Video with White Space to Make It Look Less Cluttered

Because videos are ‘busy’ and have lots of movement. They can easily make a webpage look cluttered and crowded. Especially if placed directly onto a busy background. To avoid that you should try to pad your video with some white space so that it doesn’t look as cluttered.

Padding a video with white space will also help to set it apart from other elements, and help give it more prominence. After all, you don’t want your video to have to compete with other elements for attention or have viewers easily distracted by them.

Digital design companies can optimize web design for video content by ensuring seamless integration of video elements within the site’s layout enhancing user engagement through responsive video player design, and delivering a superior video-watching experience.

Use Other Elements as an Alternative to Watching the Video

Not all of your website’s visitors will want to watch video content, and you should cater to that. Adding other elements that provide an alternative can help in that regard – and one of the most popular ways to do so is to include a transcript in a collapsible element right below the video.

Not only will this improve the user experience by giving visitors an alternative, but it is also a good SEO practice. After all search engines aren’t able to ‘watch’ videos for themselves, and so the transcript can help to provide information about its content.

If you optimize your web design in the ways listed above, it should maximize the effectiveness of the video content that you publish. But before that can happen you first need to be able to create interesting and engaging videos. Which is where Movavi Video Editor can help. It is a user-friendly video editor that you can use to compile videos and make sure that they look great.

Not only will Movavi Video Editor let you create videos from the raw footage that you record. But it will allow you to create video from photos by compiling them into a slideshow. By adding your photos to the software you can arrange them in any way you see fit. Forming up the structure of your video. After that, you can use its features to include background music. Add a voiceover, insert animated transitions, and other audiovisual elements to give it the punch it needs.

Some of the other features in Movavi Video Editor will enable you to merge videos together. Trim out unwanted parts. Enhance the video quality, apply filters or special effects. Fix any issues, insert captions, and more. With all of these tools at your fingertips, creating engaging video content should be a piece of cake. Armed with that content, you can then focus on optimizing your web design so that you’re able to really tap into the potential of video content.

The post 3 Easy Ways to Optimize Web Design for Video Content appeared first on WP Pluginsify.

This WordPress plugin can help you to optimize your images so that the excess file size added to your website is practically nonexistent and your webpages continue to load fast for your visitors.

Why Optimize Images?

It is essential to optimize images for the performance of your website. Here is a list of positive effects optimizing your images will have on your website by using a plugin such as ShortPixel Image Optimizer.

• Faster Page Load Times
• Better User Experience
• Decreased Bandwidth Use
• Better SERPs

ShortPixel Image Optimizer is an easy-to-use WordPress plugin. It installs directly into your WordPress Dashboard where you can easily manage the image reduction process. All images will be automatically processed. You can easily configure the ShortPixel plugin to compress past photos and even optimize your website history.

ShortPixel Image Optimizer is an excellent solution for optimizing images either already on your WordPress website or those you will upload soon. There is also a free version for you to try how it works and if you use no more than 150 images per month, you do great with the free Short Pixel Image Optimizer plugin.

For those of you who upload more pictures. You can upgrade to the different plans such as Short – 7,500 photos per month to XXL – 82,500 photos at really affordable monthly or annual payments.

This is a WordPress plugin we can recommend. Either you chose the free version or any of the various premium plans available. ShortPixel Image Optimizer can help you lowering bounce rates, increasing conversions, boosting your Google rank status, driving traffic to your website, etc.

Have you used the ShortPixel Image Optimizer for optimizing your WordPress website images? I would love to hear all about it in the comments below!

Details & Download 

The post ShortPixel Image Optimizer: Speed up Your Website with Optimized Images appeared first on WP Pluginsify.