Envira Gallery Blog
Digital Photography Tips, Tutorials and Resources
Digital Photography Tips, Tutorials and Resources
by Gerald Jackson on Jan 26, 2021
Visual aspects of blog posts are just as important as the written content that they accompany. Not only do images and embedded videos enhance the reading experience for your audience, but they signal to search engines like Google that your content is rich and engaging.
Rich and engaging content is what ranks, so you can see how that might be a critical part of any content strategy.
In modern content and SEO development, however, you can’t just throw images up on a page and call it a day. Images that load slowly, take up too much space or look bad can impact your SEO rank and your audience engagement efforts.
That’s why it’s important to optimize your images before you publish content to the web.
Here, we will talk about image optimization in WordPress. We’ll focus specifically on the importance of optimization, how to approach optimization using WordPress plugins and tools and how to manage basic SEO optimization with built-in WordPress functionality.
In this article, we cover:
If you’ve never worked with images or image editing before, you may have never come across the term “image optimization.” The truth is that depending on the context, optimizing an image can mean a number of different things. For WordPress developers, image optimization is tied directly to making images accessible to readers and Google website crawlers in equal measure.
What does accessibility mean in the context of WordPress optimization? It all boils down to performance:
Image optimization in WordPress is all about minimizing load times without impacting image quality too badly. By providing optimized images, you can serve content to users faster, which is good for them and good for your SEO.
While file compression and formatting are incredibly important for images embedded in your WordPress site, it’s also important to include specific HTML elements and page layout techniques that help with accessibility and readability.
There are a few other things that you can do, including using XML sitemaps to serve image information to search engines, but they are beyond the scope of this article.
To understand why image optimization is so important for WordPress websites, you need to understand how images work for Search Engine Optimization (SEO).
Images contribute to your search engine rank primarily in three ways:
However, these criteria only matter if your content can rank. And, according to Yoast, site loading speed is the king of SEO. Why is that? Because:
As stated above, the best image formats for optimized images usually involve some sort of compression.
When you take a picture with a camera or create an image on your computer, there are several image formats you can save it as. Many cameras will allow you to save images to RAW format, which contains all the image information from the camera sensor. Likewise, early computer image formats like Bitmaps (.bmp) were completely uncompressed. Both files were usually incredibly large and hard to load over internet connections.
To make images easier to load on the web, designers have picked up three standard file types:
Several other image file formats exist, but most website users require some combination of the above three. SVG images, for example, are vector images that use XML and metadata, which allows users to scale them without impacting the look of the picture. However, most platforms disallow this image type due to size constraints.
If you’re optimizing images for WordPress, the first step you can take is to compress the image so that it loads faster for display.
Depending on the use of the image, you can compress it into a JPEG, PNG or GIF file. If you aren’t loading high-resolution images, then you have some more flexibility when it comes to compression and image quality.
Remember: if you’re uploading photos, you most likely want to use JPEG files. If you’re posting logos, infographics or other images with text, then consider using PNG files.
Speed Up Your Website with Envira Gallery’s Compression Tool
The Compression Tool directly inside Envira Gallery lets you to optimize your images and reduce their file sizes.
The image compression tool is available for users with any paid Envira Gallery subscription (Pro tier or higher).
If you’re using Envira Gallery Lite, head over to our documentation to learn more about upgrading your Envira Gallery license.
If you’ve already upgraded, you’ll just need to update the Envira Gallery plugin before you can begin compressing your images.
Learn how to set up the new Compression Tool inside Envira Gallery so that you can speed up your website and page loading times.
Below, we’ll cover how to use Smush to compress our images. This compression plugin is perfect for users who simply want to compress their images easily inside their WordPress installation.
Install Smush. In the WordPress Dashboard, click on Plugins > Add New. The plugin market screen will open.
Search for “Smush.” When the Smush plugin card loads, click Install Now. When the button changes to Activate, click it again to turn it on.
A new link for Smush will appear in the Dashboard menu. Click it to go to the Smush dashboard page. A help dialog will immediately startup on your first visit to the page.
Click Begin Setup to move to the next screen.
Automatically optimize new uploads should be turned on. If it’s not, select it, then click Next.
Make sure to select Strip my image metadata, and click Next.
Select Enable Lazy Loading, then click Next.
Optionally, check Allow usage data tracking and then click Finish Setup Wizard.
Now, Smush will automatically compress all images uploaded to your WordPress site. It will also strip any additional metadata from your Finally, Smush will optimize your pages so that images load in accordance to their placement on the page.
Next, go to your image gallery. You’ll note that your existing images are not compressed.
Click on the Smush link. This will automatically compress your image file.
Optimizing images for SEO is a bit simpler. There are three basic steps to take:
First, add an Alt Tag to your image. To add an Alt Tag, go to your Media Library, then select an image and click Edit.
When the editing window appears, type in an Alt Tag text string in the Alternative Tag text box. Add a caption if you like, then click Update.
Make sure that your images are close to relevant keywords. If your posts are about lemon pie, for example, and you include an image of a lemon pie, then place the image (including an Alt Tag that contains the term “lemon pie”) near a paragraph that mentions lemon pie. Google will notice this and use it to rank your content.
Optionally, you can add a caption to the image right in the gallery itself. Adding a caption provides Google with additional metadata to help it process what your content is about.
Remember that SEO optimization helps Google identify your images and your content for indexing and helps your pages rank in search results.
There are several tools available for optimizing images prior to posting them on WordPress. If you want more control over your image optimization then you can try out some of these software tools to help you.
You know Adobe Photoshop as a photo editor, but it’s also one of the best standalone image optimization tools for users that need control over their optimization. With Photoshop, you can take most images and optimize them however you see fit.
Adobe Photoshop also allows you to save images in any of the above-listed formats while controlling the resolution and image quality. Photoshop lets you:
If you are going to use an external program, we recommend using Adobe Photoshop.
If you simply want to compress and optimize images in WordPress without having an external software package, then we have a few recommendations for plugins that could suit your needs:
We chose these plugins based on their ease of use. If you are a more advanced image design professional or WordPress programmer, there are also more advanced plugins that offer API access. These include plugins like ShortPixel and reSmush.it.
Whether you are an expert or a beginner, there are tutorials available to help you work with image optimization in WordPress through plugins and the WordPress interface:
Optimizing the size, speed and data associated with an image are the most important parts of using images in a WordPress site of any size. As your site gets larger and your pages more in-depth, then you may consider more advanced optimization options like the following:
As you can see, image compression and optimization are important parts of any blog. WordPress users who rely on using images as portfolio pieces or product photos need to focus on optimizing their images so that their WordPress sites load fast.
Readers in the digital age don’t want to wait for content. They’ve shown that you only have seconds to display your content to them, images and all, before they will bounce away.
Google notices this. They’ve built tools in their algorithm to note when content promotes slow loading times due to unoptimized images. Likewise, they can track when readers bounce from your page. In both cases, it means a lower rank for your content and fewer readers.
Remember to use the right image format for all images, and to strike a compromise between image quality and compression. Use JPEGs for photos, PNGs for logos, and compress files using WordPress tools to minimize load times.
We’ve covered some of the best tools and plugins to use for file compression and optimization. The Envira Gallery plugin, however, combines the best in photo management tools, gallery building functions, and image optimization options on the market.
If you enjoyed this article, check out our other popular pieces:
If you want to find out more, consider signing up for our email list or following us on our Facebook or Twitter accounts.
Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.
Thanks for covering this. My pre-WordPress site was very fast-loading since it used separate thumbnail images (not re-proportioned large photos) for the gallery pages. With modern WordPress and EnviraGallery, that option looks extinct and now a viewer must wait for the entire gallery to load several megabytes-worth of images before they can effectively click on an image. Lazy-loading proved even less efficient for me for some reason. So, considering we have to live with the limitation of only one source image for both the gallery and Lightbox, I have this question that I hoped would be covered in this article: What is the recommended pixel-count for the width of horizontal images to upload, considering that I am presenting fine art images and wish to have crisp and best-color images? (I keep my galleries to 20 or so images at most, each at <2000 pixels wide at low compression of 8 or 9 out of 12 in Photoshop – and my galleries can take minutes to load! – way too long.)