Image rotation is our plugin invention for improved speed and reduction of workload. This scheme is helpful – not only for the designer – but also the website owner. Managing fewer featured images is easier and cost effective. This method is less backup-intensive thus using fewer server-resources (particularly RAM). And it’s better for speed from caching benefits, too.
OBJECTIVES: Create the perception of custom featured images on every blog post. This enhances user experience.
The Featured Image is a standard WordPress theme feature. Site developers can add a “representative image” for posts and pages.
The problem: Researching relevant stock images for 100’s of blog posts is time consuming and even tedious. Creating custom images or illustrations for 100s of post is also cost prohibitive.
The goal is an illusion of different images on successively-viewed blog posts. We solve this with randomly-rotated images. It’s labor-economy with image reuse. This saves time and money.
The typical site visitor reads a few posts at a time. How long a visitor stays on pages is engagement or dwell time. Google interprets these metrics as “intent.” Visitor intent affects SEO. How much? No one knows but Google.
If the same image is used on every page and post, the reader often isn’t aware the fast page changed. A different image remedies this static illusion caused by rapid changes. Swapping images is a good cue and provides page variety to combat user boredom. We want to remove confusion because it causes poor user experience.
Two suggested plugins are free, obscure, and esoteric:
We’ve experimented with various plugins. This combination works best for us.
ROTATING PSEUDO-FEATURED IMAGES
On PagePipe posts, we don’t use the WordPress featured image function. Those settings are in the editor right sidebar and called Featured image > Set featured image. For our posts, that remains unused.
How to use these suggested tandem plugins:
1. After plugin installations and activation, we go to Added Content > Added Content in the left black sidebar.
2. We “Add New” and create a “post” called “TOP.”
3. We select top, bottom, or both positions. For this case, it’s top.
4. We set “Include In” to Posts, Pages, or Everywhere. We want this rotator only on posts.
5. We specify “Content to Add.” In our case, this is two shortcodes.
Usually shortcodes are added in sidebar widgets – or main text content area.
The content we’re adding are two right-justified shortcodes. These are the “Content to Add.”
6. The first shortcode is:
[(bracket) wp-image-refresh (bracket)]
The WordPress Image Refresh Plugin shortcode shows a different random image every time a post loads. The plugin shortcode works for posts, pages, widgets and sidebars. This technique won’t slow down pages or posts. There’s no site drag from global loading.
7. The second shortcode is from a plugin called Shortcode For Current Date. We only show month (F) and Year (Y). This line is tinted a gray color #666. This creates an automated “evergreen” freshness effect.
Updated: [(bracket) current_date format=’F Y’ (bracket)]
8. We also add a plugin called WP Author, Date and Meta Remover to strip the normal WordPress default meta information from all pages and posts. We don’t want content perceived as stale because of a date stamp.
9. We now go to the left sidebar WP Image Refresh > WP Image Refresh and add 6 custom, 8-bit PNG, hand-optimized images. An image is uploaded to the media library and selected. The PNGs are 524px × 214px. The extremely light weights vary from 6k to 9k. The images are hot linked to a destination page with a URL.
Determine the post’s main-column width. When rotating full-page-width images, obviously the dimensions are different. Every theme has it’s own unique column width. Calculate these values by adding media. Use a test feature image and make a measurement using a screen-ruler utility or browser tools. Then remove the browser-resized “dummy.” Then manual resize your images to match.
How it works:
After following the above steps, one different pseudo-featured image appears at the top of body text on all blog pages. Images change for each post. Occasionally, images may repeat. They are random and not in sequence.
These aren’t *real* featured images. They aren’t linked to other theme constructed pages as thumbnails for grids, blog listings, navigation, or related posts. This is a limitation we can live with on most sites.
The UX navigational benefit is perceived variation during page or post changes. There are speed benefits, too. The images aren’t optimized using WordPress automated cropping. That can do weird things bloating image weight.
8-bit PNG, line-art illustration is almost always faster than compressed JPEG photographs. When using JPEGs, the goal is a compression equivalent to the Photoshop quality setting of 50 to 60. The WordPress default is a quality setting of 82 and yields the equivalent of Photoshop 50Q. This is “The-standard-of-goodness” used by WebPagetest.org. When hand optimizing, we use Linux GIMP with a JPEG-compression quality setting of 70. We don’t use aggressive settings on client sites.
Using 6 customized images reduces the overhead in your WordPress media library. This reduces the server load when backing up your site. Automated shutdown happens when you overrun shared hosting capacity. But now you don’t have 100s of featured images. Only six.
Also, using fewer images means the browser cache is likely primed with an image from other post loads. Primed images are instantaneous loads. This repeat-view speed benefit isn’t reflected in online tests.