How do I upload an image to WordPress? Simply drag and drop in the Media Library and press the "Insert in the publication" button without doing any image optimization?
If so, that's how you lose bandwidth quickly, you lose the opportunity to improve the ranking of search engines, visitors and sales.
The images represent almost two thirds of the total weight of a web page, according to an article based on the research. Having many non-optimized images is bad for the loading time of your site. This can create a domino effect on key marketing metrics.
Even a fraction of a second in the page load delay hurts. The latest Akamai study found that a mere deceleration of 100 milliseconds in load time could lead to a 7% drop in the conversion rate. If a page takes two seconds to load, bounce rates increase by 103%. Add one more second to the delay and expect 53% of your mobile visitors to leave your page.
Ultimately, your sales will suffer. Amazon, for example, did tests that showed it could lose $ 1.6 billion in sales each year with a page load delay of just one second.
These facts emphasize the value of optimizing images for your website.
What is image optimization? and why is it important?
When you optimize images in WordPress, you make sure they have the lowest file size and the correct format, keeping it attractive enough to display on your site or blog. electronic commerce
Sound impossible? It is not like this. Image optimization is really easy to implement, however, many webmasters and digital marketing specialists skip this step to increase WordPress performance.
Here's a re the benefits you'll get from image optimization:
- Faster site load
- Higher SEO rank (Google uses page speed as search ranking factor)
- ] Lower bounce rates, which means more visitors will see your page
- Less bandwidth used (with less disk space on the server), saving costs
- Better user experience for your visitors , more savings in your mobile data plan
- Site optimized for mobile devices
- Higher conversion and sales rates, as a result of the benefits listed above
10 easy image optimization tips for WordPress websites [19659020] optimize-wordpress-images “width =” 624 “height =” 416 “srcset =” https: // themegrill- jgzsdow3hv.stackpathdns.com/blog/wp-content/uploads/2018/05/optimize-wordpress-images.jpg 624w, https://themegrill-jgzsdow3hv.stackpathdns.com/blog/wp-content/uploads/2018/05 /optimize-wordpress-images-300×200.jpg 300w “sizes =” (max-width: 624px) 100vw, 624px “/>
Before uploading images to WordPres, be sure to perform these image optimization techniques. Remember: your main goal is to use the lowest possible file size without compromising the quality of the image.
1. Use relevant images for your content
"A picture is worth a thousand words", says a saying. But it's not worth anything when it does not match the subject of your content. For example, if your blog post is about traveling in Southeast Asia, a photo of the Eiffel Tower certainly seems out of place, unless you can justify why that photo should be in the publication.
Using a relevant image to accompany your content fulfills an important SEO purpose. If you add an image to a related topic or article (along with the alt tags and the image file name), you can increase the ranking of your site for the keyword for which the image and text are optimized.
Choose images prudently Only upload an image just for the use of an image.
2. Choose the correct image format
All browsers support the GIF, JPEG, PNG and SVG image formats. But you can not use any of them without considering how the loading speed of your page will affect and what type of image you will use.
GIF
GIF (Graphics Exchange Format) has a limited palette consisting of only up to 256 colors. This makes it ideal only for simple images with less color, such as logos, tables, graphs and line drawings.
Since GIF supports animated images, it is the reference format for the animation. But, no matter how much fun you see in your blog posts, use animated GIFs in moderation. Too much movement in the image can distract readers, and that is bad for your UX.
JPEG
JPEG (Joint Photographic Experts Group) is perfect for photographs, gradients, screenshots and other images with various colors.
Avoid converting line drawings and logos to JPEG: they will be blurred and have image file sizes larger than GIFs.
Use the new JPEG formats such as JPEG 2000 and JPEG XR. These new JPEG formats have a higher compression ratio, which means they have a smaller file size that contributes to a faster page speed.
On the other hand, a progressive JPEG loads layer by layer until the image is completely visible on the page. It is faster compared to common JPEG files (baseline) that loads the image from top to bottom, line by line. A progressive JPEG loads a small part of the data first, which initially shows a lower quality of the image. However, as you load more data, a higher quality of the photo appears.
PNG
PNG (Portable Network Graphics) produces the highest image quality but at the expense of file size. Therefore, limit its use to images that require a lot of detail and high resolutions, such as vector graphics and computer generated graphics.
SVG
Due to its typically smaller file sizes, SVG (Scalable Vector Graphics) loads faster than JPEG and PNG. This is the ideal format for logos, icons and images formed by geometric shapes. SVG maintains the sharpness of an image in various sizes or in retina displays.
Eliminate the guesswork of selecting the best file format for each image with the help of a WordPress plugin called EWWW Image Optimizer. Convert images to the format that produces the smallest size.
3. Reduce image sizes
In image optimization, larger does not always mean better.
WordPress can handle any image size, so regardless of the image dimensions used, it will be reduced to fit the main content block (the area where blog posts are displayed). For example, if your main content block is 700 pixels wide and you upload a larger image than that, WordPress will reduce it. But you're just wasting bandwidth that way.
Larger images also need more disk storage space. An image of 2,500 pixels, for example, consumes 1 MB. Smaller image sizes require less bandwidth.
To optimize WordPress images for a faster page load, resize an image. You can make an image smaller without losing its quality on your computer, directly in the WordPress Media Library, or using a WordPress plugin.
How to change the size of an image on Mac?
- Open the image in the Preview application by double-clicking on the file.
- Click Mark (the icon that looks like a pencil tip)> Fit size (the small square icon).
- Enter the new width and height.
- Check the small box next to "Scale proportionally".
- Click on OK.
How to change the size of an image in Windows
- Open the image in Paint by right clicking on the file and selecting Edit. [19659013] Click on the Resize> Pixels button.
- Enter the new width and height.
- Check the small box next to "Keep aspect ratio".
- Click on OK and save the image.
resize an image in WordPress
- Upload the image.
- Click on "Edit image."
- Enter the new dimensions.
- Click on "Scale".
- Then, click on the "Back" button.
- Click on the "Insert in the publication" button.
How to change the size of an image using a WordPress plugin [19659069] Manually changing the size of the images one by one could be an arduous task. You can automate it with a WordPress plugin called Imsanity that allows you to set the maximum width, height and quality of your images. The add-on will automatically change the size of all images that are larger than the maximum size. Its bulk resizing feature helps free up disk space by resizing all existing WordPress images.
4. Compress images
Also, optimize images in WordPress with an online image optimization tool or a WordPress add-on.
When compressing an image, use only one tool or add-on once. Multiple image compressions can worsen the quality of the image. Also, when using a WordPress plugin, make sure you compress the images externally on your servers to reduce the loading time of your site.
A great free online tool for image compression is TinyPNG. Simply drag and drop up to 20 PNG or JPEG files on the site. After a few seconds, all the optimized images can be downloaded.
Regarding WordPress add-ons, WP Smush is the most popular for optimization and compression of images. Remove all unnecessary data (including the camera model used to take the photo and creation date) from your images and then scale them for you before adding them to the Media Library.
5. Use a CDN
A CDN (content delivery network) helps improve the loading time of a WordPress site and solves bandwidth problems through image optimization, among many other features. It works by serving an image from the server closest to the visitor's location. Using a CDN is a good option, especially if you have a lot of traffic and activity on your site every month.
6. Use slow loading
Load tons of high resolution images to WordPress? Do not miss the benefits of delayed uploading, an image optimization technique that loads an image only when the visitor scrolls down to view it. This causes a page to load faster and use less bandwidth.
Slow loading is extremely useful when you have something like "20 best-selling cars of all time" like your blog post where you need to upload several photos of car models. 19659002] To begin, install one of the deferred upload plugins for WordPress.
7. Assign each image a descriptive file name
What file name says what an image is about: "IMG00045.jpg" or "2017- Honda Civic "? Definitely, it's the second one. And that's what helps your site rank better on Google.
Search engines track the names of the image files. This is the reason why a descriptive file name rich in keywords is a must for image optimization. your website or blog post, with the main keyword ideally placed at the beginning of the file name.
8. Add alt tags to images
If you often leave the "Alternative text" field blank when loading an image in WordPress, you are missing out on the opportunity to add SEO value to your site and make it stand higher in the search engines.
An alternative text, also called alt text or alt tag, is a brief description that the visitor sees when the image can not be loaded on the page. It provides context for what the visitor is looking at.
Alt tags also describe images for search engines, which can not read pixels in the image. Instead, they read the alternative text.
Here are some useful tips to keep in mind when creating an alternative text WordPress image:
- Be as descriptive as possible.
- Keep them short and clear.
- Include relevant keywords where they fit.
- If possible, use a long-tail keyword.
- Avoid keyword stuffing. You do not want to over-optimize images for SEO.
9. Subtitling your images
Adding titles to images requires more time and effort, but it's worth it in terms of SEO and UX. The titles are read 300% more than the content body, according to Kissmetrics. They are among the first things that readers scan in an article, in addition to headings and images.
Therefore, subtitles help you to involve your visitors by making them understand and appreciate their content better.
It is not necessary to create legends for all images, as some can stand on their own without a supplementary line of text. Subtitles are only useful when you need to provide readers with more context about certain images.
Also, consider whether you need to use a certain image for SEO. If not, you can leave it without a legend.
10. Optimize images for sharing on social networks
Do not forget about social networks when optimizing images in WordPress. When you (or a visitor) share your blog post on Facebook, for example, your submitted image is displayed along with the title and meta description. The image shown should be displayed correctly on social networks to attract people to review their publication.
Otherwise, Facebook will pick up an incorrect image and show it along with its content. The image may also be cut due to an incorrect image size. To avoid such boos on social networks, use these recommended image sizes for different social networks:
- Facebook: 1200 x 628px
- Twitter: 1024
x 512px - Google+: 800 x 1200px
You can also use a Yoast SEO plugin to optimize your images for social networks in WordPress. It allows you to adjust your social settings so that the content and the image are displayed correctly on different social media channels.
11. Properly sized images in the editor
When you include images in your WordPress content, most people simply click "insert to publish" without selecting the appropriate size. This causes the images to have irregular sizes that do not match the page. Having images that are too large on the site can cause a drop in the Google PageSpeed rating. To avoid this, it is recommended to click on the "add media" button at the top of the content editor when adding images. You must also include the details of the image religiously as outlined below.
12. Use Image Sitemap
Make sure search engines like Google see your images when you crawl to your website. How are you going to do this? Just add your photos to your site map.
By doing this, Google receives metadata from images that increase its likelihood of appearing in image search results. do is add relevant details such as the type of image, theme, title, title, geographical location and license.
To generate your image site map, you can use the Google site map generator or WordPre ss SEO for the Yoast add-on.
Here is a sample site map entry:
You can create a separate sitemap for the list of images or you can add it to existing ones .
Conclusion
To wrap up, remember these 10 easy tips for optimizing your WordPress images:
- Use relevant images for your content.
- Choose the correct image format.
- Reduce image sizes.
- Compress images.
- Use a CDN.
- Use deferred load.
- Assign each image a descriptive file name.
- Add alt tags to images.
- Include your images.
- Optimize the images to share on social networks.
- Images of adequate size.
- Use ima ge sitemap.
Make this WordPress guide for image optimization an essential part of your website's optimization efforts. It helps ensure that your images have the right format, size and alt tags for faster site loading and higher SEO ranking, leading to better conversions and sales.
Author Bio
Gary Viray is a Filipino technology entrepreneur, marketing specialist, author, data analyst and founder and president of Propelrr, a digital marketing and innovation agency. Cheer on Twitter, @garyshack.
(This is a guest publication, see guest publication guidelines)