Images enhance the user’s experience and help get a message across, all the merrier. But while it's tempting to start throwing images everywhere, avoid rolling like a mad imagery scientist. With images, less is more. And a sound strategy for managing images on a WordPress site is key.
You have to remember that your WordPress site won’t load too well if you’ve just uploaded a 4MB hero image to your home page. That isn’t the best policy. So, what is the best practice for managing images for WordPress? Glad you asked!
Let’s take a little journey into the world of web images and WordPress, shall we?
First things first... getting the images
Before you start worrying about managing images for a WordPress site, you first must have images. Barring a photographer, a couple great sources are iStock Photo and Getty Images, to name just a few.
These online repositories were specifically created for folks that need one or more images for their brand or site.
With both repositories, there is a monthly or yearly fee for obtaining the image or images. And if you want to use some of the images for commercial use, the fees can get a little steep. But they both have millions of images to choose from.
Finally, if you’re on a budget, like the rest of us, there are royalty-free sites like Pixabay. On Pixabay, there are tons of images to choose from that are typically free to use, with no need for photo credits. (Although credits are a nice gesture and appreciated by the contributor.)
Where you don’t want to grab images from is Google.
Most of these images are copyrighted intellectual property. If you really need to use one of the images, you will need to try and contact the original creator of the image and then obtain the right to use said image.
This can be not only a long and painful process but could result in great expense. Using a copyrighted image, without permission, could land you in hot water with a cease-and-desist order. No one has time for that.
Image sizes
How big is too big? That is the question of the ages. Ideally, you want to take the original image and resize it externally, with an appropriate application to get the large image cut down to the actual size that is to be used on your website.
Most WordPress themes have set sizes for things like hero shots (the main image on a page) and other features. So, you should try to size your main image to the proper dimensions before uploading it. Never just upload a huge, unedited pic to your site and then rely on coding to resize it for you.
A resized image, online, is still the large file size that was uploaded. It’s just coded to look smaller.
So, you can have a 2,000 x 2,000-pixel image appear to be only 200 x 200 pixels on the screen. But it’s still the file size of the 2,000 x 2,000-pixel image! Now you have a massive load time on your website’s pages.
For the pages of a site, you alo should resize your images to the appropriate size, as well, which is usually much smaller than the hero shot. Then it is acceptable to allow the site’s coding to resize the thumbnails for you, because these main body images are typically pretty small, anyway.
Image editing
You have an image that you need to work with. Now what? Well, you will need to go in and resize and possibly clean up the image in question before you upload it to the WordPress site. Fortunately, there are many applications out there that can be used for this very task.
My personal go to is Adobe Photoshop.
With Photoshop, you can edit and resize images to your heart’s content. It also has an amazing compression engine that can compress images into a multitude of web formats and makes them ready for upload.
That sounds fine and dandy, but what if I’m on a tight budget? Anything out there for free?
Again... glad you asked. There are free image editing websites out there. While not as powerful as Photoshop, they still have pretty amazing editing capabilities and even function in much the same way as Adobe’s star product.
One website I’ve used before is Pixlr. This is a totally free website that affords you with a host of notable features for editing photos.
Once you’ve edited your image(s), you can save them to your local machine and then upload them to the WordPress site.
Another online image editing site is befunky. With befunky, you can edit images, too, but its editing capabilities are much simpler than Pixlr and far more reduced than Photoshop. However, in a pinch, it’s still fun to work with.
Preferred compression and file formats
Once you have your image sized and edited, you will need to save it with the best compression and file format. The compression is, in part, what determines the file size. The format is the file type. Optimally, you want as small a file size as possible, and there are several file types to choose from.
For hero shots, you want to keep the file size down to under a MB — but that's up for debate. For the main body images, you want to keep them down to only a few KB. This will ensure a fast load time for your pages. The file types commonly accepted online are:
- PNG — Portable Network Graphics
- JPEG — Joint Photographic Experts Group
- WebP — Pronounced "Weppy," a raster image format
For images that need a transparent background, PNG is great. But with transparency comes a slightly larger file size. JPG or JPEG files are good for compressed images, but you get some quality loss when you really need to compress them a great deal.
WebP is a newer file type, developed to get a small file size but also to keep much of the original image quality. However, not all hosting plans come equipped to handle this file type yet — at least not without certain PHP extensions, like ImageMagick installed.
Displaying images on your site
Now that you have images resized and uploaded, you'll want to be able to make these images load as fast as possible. Even though you’ve crunched the image down, a little more smooshing is still a good idea. There are several plugins on the market that can help you with managing images for the WordPress site:
- Smush — This is the most popular, award-winning (and not to mention free) WordPress image compression plugin. It uses the latest image data compression algorithms, known as lossless compression, that removes unused data and compresses images without losing any quality. I have personally used this one, with great success.
- EWWW Image Optimizer — This is among the best WordPress image compression plugins. It helps to reduce your website’s bandwidth by optimizing images. A primary feature of this plugin is that it has no speed limits and unlimited file-size support (up to 150 MB).
- ShortPixel Image Optimizer — ShortPixel is another excellent WordPress image optimizer with a great interface. It’s fast, easy on the eyes, and has some fantastic features.
- Optimus — If bandwidth is your primary concern, this is the best plugin for you because it reduces the image size up to 70%, depending upon the file format, of course.
- Imagify — This is a premium WordPress plugin meant to optimize your images to speed up website load times. It's designed to handle everything for you, automagically. It is set up to run when you upload each new image. This way, you can optimize everything in one go.
Ok. You’ve edited your images, crunched and saved them, and then uploaded and smooshed them further. Now what? Now you have to display your images. By default, your theme will display images throughout the site in a certain way. But if you have the need for an image gallery, then you might want to consider these plugins:
- Modula — This plugin allows you to create pretty and responsive grid style galleries with very little configuration. It's compatible with Block Editor, Beaver Builder. and Elementor.
- NextGEN Gallery — NextGEN has been around the block for quite some time. Thus, it is typically the go-to plugin for most people. It is highly customizable and has great functionality. It's a favorite for photographers and folks who work with images as a career.
- Envira Gallery — This one comes in a lite version and a premium (paid) version. The features are more basic than those found in Modula and NextGEN. But it does have the ability for deep linking and pagination, for larger galleries.
- Photo Gallery by 10web — 10web's image plugin is cool because it also allows for ecommerce functionality, social sharing, and has various slideshow effects.
- FooGallery — Also a simple gallery, it still has some nice hover effects, lightbox, pagination, and retina support. It too comes in a pro (paid) version.
Image protection
You have worked so hard to make a site look pretty with imagery. Now, how do you keep your hard work from being swiped by someone who visits your site? After all, it is pretty easy to just right click on an image and save it to your desktop.
So, what’s to stop that from happening?
Well, there are several ways to approach image protection. It just depends on your goal. One thing you can do is to disable the right click on your site altogether. The above-mentioned plugin Envira comes with image protection.
You can also get a plugin called WP Content Copy Protection. It will disable right-clicking on your entire website. However, you can also set it to protect selected pages, posts, and categories, too.
Watermarking is another age-old tactic used to protect your images.
The plus side to this method of protection is that when someone does swipe your image, they then have your logo and/or trademark on it that they would then have to attempt to remove via Photoshop. Typically, most people will avoid grabbing an image with a watermark on it altogether.
The downside to this method of protection is now all your images have watermarks on them and, based on how you watermarked them, this can be unsightly.
Another way to steal the images from your website is by loading them from the original source. The image will load from your server, or hosting plan, and will then be displayed on third-party websites without your permission, of course.
You can disable the hotlinking of images from your WordPress site with a little bit of coding in the .htaccess file. Just add this code to the .htaccess file in your WordPress site’s root directory:
#Disable image hotlinking with forbidden custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]*Be sure to replace yourdomain.com with your site’s domain name!
Finally, you can also add copyright notices on your site, but most people ignore those anyway. I wouldn’t really bother worrying too much about this method.
Closing thoughts on managing images for WordPress
You should now have a generous mitten full of imagery tidbits at your fingertips that will hopefully be able to steer you in the right direction while making a WordPress site shine with pretty images — and still maintain fast load times.
These suggestions are subject to change and/or debate. But what kind of a world would we live in if we couldn’t change or debate?
