Summary
When showing lots of images on your website, you need to convert your images to the smallest file size that doesn’t degrade their visual quality. Otherwise, large files straight from your camera or from stock image sites will take a needlessly long time to load, slowing down your website’s loading speed to a snail’s pace.
There are two ways to make your image files as small enough to load fast while retaining their splendor.
The first way is to install a plugin to handle large image files. Several plugins are available to resize and compress your images to a far smaller file size that’s suitable for web display and fast loading. Most of these plugins can recover your website’s loading speed, by delaying your images from loading, known as “lazy loading.” Unfortunately, plugins can be unreliable and present compatibility issues with other plugins. Top performance from these plugins will often cost you an upgrade to the premium version. Despite these drawbacks, here’s a link to an article that covers several plugins for handling the image files for your site.
https://themeisle.com/blog/wordpress-image-optimizer-plugins-compared/#gref
The second way is to be proactive and manage all of your website’s images from the start. That’s what we’ll focus on in this article. Rather than cluttering up your media library with huge image files and then relying on yet another WordPress plugin to handle them, you can take the bull by the horns. You can resize, compress and optimize all your images yourself, according to an efficient workflow, before adding them to your website.
The workflow is straightforward. 1. Begin by selecting only the cleanest and clearest images that serve a definite purpose on your website. Cut out all decorative art. 2. Once you’ve culled your images for relevance and quality, edit and enhance your final selection. Work with the original, full resolution, uncompressed images. 3. Next, resize your images from full camera resolution down to something suitable for the web (600 to 1200 pixels wide). Simultaneously compress them (by a factor of 5 times or more) and convert them to a suitable file type ( .jpg, .png. or webP). Your images will end up 100X smaller than the originals, and load far faster. The rest of this article covers the detailed step by step procedure for this workflow.
Step by Step Workflow for Preparing Images for Your Website
Step One: Select Images for Clarity, Relevance, Impact and Message
Begin by selecting images that communicate your point clearly and immediately. All the details and elements in the image should contribute to the point you want to convey. Reject or clean up images that contain clutter or rubbish that distracts from the main point. Aim for minimalism and simplicity. Avoid images crammed with excess detail that may draw the eye away from the most important points of interest. Instead, choose images whose details draw the eye to where you want to focus the viewer’s attention. You can do this with leading lines, framing, and a whole slew of other design elements. Also provide lots of blank, “negative space,” to give your viewer some visual relief. Clean, clear images, free of clutter and rich in negative space also give you the advantage of a smaller file size.
Step Two: Edit and Enhance the Original Images at Full Resolution
You can vastly improve an original image or photograph with a few editing steps.
At the very least, you should remove excess image noise, sharpen the details, and correct both the white balance and exposure.
Then increase the contrast and color saturation to make the image “pop” to grab the viewer’s attention.
Lighten the shadows and dim the highlights to achieve a high dynamic range effect.
All of these steps can be saved in a “preset” file.
You can further improve an image by “burning-in” the area around its point of interest. The burned-in area will capture the viewer’s gaze.
When you’re done editing, archive the original image in its raw camera format, and save the edited version under a new file name as an uncompressed or lossless file type, e.g. Tiff.
Include the original image number, camera model and preset name in the new file name. This will spare you untold grief when you need to replicate the image.
Step Three: Resize, Compress and Convert the Images for the Web
The image files created by digital cameras contain far, far more information than can be displayed by web browsers on your computer screen or phone. First off, the pixel count along the edge of the image from the camera is three to six times larger than most display screens. That includes “retinal” screens. Secondly, the color depth, or dynamic range recorded by the camera is far greater than can be displayed on a screen.
In other words, most of the information contained in the camera file cannot be displayed. The huge excess in information only takes up precious storage space while taking far longer to load onto a web browser. Clearly, we need to resize the image to match the smaller pixel count for the display screen, and to compress the image to match the far smaller dynamic range of the display screen. By doing both, and by converting to a “lossy” file type, you can convert an unwieldy camera image into one for web browsers that’s a hundred times smaller.
Several apps are available, both paid and free versions, to resize, compress and convert an image all in one go, and can do so for a large set of images in batch mode. I’ve used the batch mode in Canon’s Digital Photography Professional software (freeware), in Rawtherapee (freeware), and Cyberlink’s PhotoDirector (paid).
Similar tools are available for the Adobe Photoshop and Lightroom platforms. I’m also going to test the cloud based image converter, XnConvert, by XnView.
https://www.xnview.com/en/xnconvert/
In most cases, you’ll want to resize your images down to between 600 and 1200 pixels wide.
When converting images to .jpg, you can specify the level of compression by entering a value for the image quality, either as a percentage, or on a scale of 1 to 10. For most purposes, I specify 70%, or 7 out of 10.
You’ll end up converting raw camera image files of twenty megabytes or more into resized and compressed .jpg files of a couple hundred kilobytes or so.
Step Four: Rename, Caption and Describe your images for SEO
There are a few more housekeeping chores to complete before uploading your images into your WordPress media library. All of them have to do with SEO to get the most from your images in terms of return on all the time you spend on them. You’ll need to list all the optimal keywords for your images and then include those keywords as far as possible in the corresponding filename, title, caption, description and alt text for each of the images. It also pays to include keywords in the context for the images, i.e. in the text and headlines that refer to the image as displayed on your web page or blog post.
I find it most efficient to write up and list the keywords, filenames, titles, captions, descriptions and alt text for all my new images in a spreadsheet before loading them into my media library. That way I can instantly fill in the dialog box for a given image when I upload it. Note that you can always edit the title, caption, description and alt text for an image at any time after uploading it into your media library.
After uploading your vetted, enhanced, resized, compressed and SEO optimized images into your WordPress media library, you’re ready to insert them into your website using your favorite page editor.
Step Five: Check your Website’s Loading Speed Before and After Inserting New Images
Before inserting the new images, take a moment to gauge your site’s loading speed. Google’s Page Speed Insights will suffice for a before and after comparison.
https://pagespeed.web.dev/
Simply enter your URL and press the “Analyze” button. Then scroll down to view the metrics for the test results, which include a “Speed Index.”
Now you have a benchmark for comparison. Insert your new images and repeat the speed test.
When inserting new images, I use Elementor, a drag and drop page editor. Elementor allows you to specify the display resolution for your image, among several other options beyond the scope of this article. When all of your images are already resized to the most suitable pixel size, beforehand, you can simply specify the “Full“ option.
Step Six – Final Step: Check how your Images appear on the Leading Browsers
Of course you also need to check how the leading web browser’s display your website with its new images, beginning with Chrome, Firefox, MS Edge and Safari. Make corrections accordingly.