WordPress Images

Wow, again, where to start... There are so many articles out there on the subject of images and media for WordPress. Most of the top results on Google have good information, are well presented, and even have some tidbits of knowledge for intermediate and advanced users. But there's just so little information that falls into the 'revelation' category. You know, that bit of information that turns on the light bulb in a single instant, changing something from knowledge into working, functional understanding.

Here are some notes on the a fore mentioned 'knowledge epiphany' in the form of notes to myself (hopefully later to be developed into a full blown knowledge base type of article).

WordPress, Images, Efficiency, and Viewing Pleasure

I don't know about you, but I come from a world of high speed internet and large, abundant screen real estate. I sit here writing this today in front of a single 30 inch monitor (along with 5 other 24 inch monitors spread out in an array around said 30 inch monitor). I don't like staring at tiny little images that have foggy detail. You know what I'm talking about. It ranges from that small detail on a product you want to buy and can't see in the image to some historical photograph that's missing the pop and wow factor because someone downsized it so much. Come on! Fast internet, big screens, why not present the biggest image possible to a viewer? Oh, right...

Small Screens

Forgot about all those portable devices that are hooked up to McScrooge 'unlimited service plans' (in that there's no limit to the amount of money they're willing to charge you) from cellular phone companies. For those devices, because of the small screens, they don't need great big pictures. Sometimes that's just the circumstance. Not to get off on a tangent, but it's worth mentioning that I just do not understand why anyone would want to watch, view, read, etc. something on a phone or even a tablet device, if they could do the same thing with a real computer and a great big screen. OK, I get it, sometimes it isn't possible to view something on a great big screen. But it's those times that a big screen is available and someone would still choose a tiny little, super-duper, Retina display from Apple over a cheap 50 inch TV from Wal-Mart. Why? OK, back to the subject.

History

WordPress Thumbnails. Errr, don't you mean 'Alternate Image Sizes'? Well, yes. But WordPress life started out referring to them as 'thumbnails'. A thumbnail being a downsized (as in dimensionally and quality) to a smaller size, which in turn usually represented a link to a larger, full sized image. That's how it began with WordPress. And sort of like Max Headroom, the name just sort of stuck, even though it doesn't refer to the same thing anymore.

Compression

On the subject of compression, most websites state WordPress compresses JPEG files using the setting of 90%. That is not true anymore as of early 2022. I confirmed this by experimenting with the add_filter( 'jpeg_quality', create_function( '', 'return 82;' ) ); setting in the Child Theme functions.php file and it is 82%. This author confirms my testing with greater explanation: https://kinsta.com/blog/lossy-compression/ Below is the data (it was a quick test, so not too much data) and a 1066px x 799px Image with a bland background to give the compression program and easy job;

  


Original JPEG / JPG Image File Size (100% Quality): 56.4 KB (57,795 bytes as reported by Windows)

90% Quality File Size: 47.5 KB
86% Quality File Size: 40.0 KB
85% Quality File Size: 38.1 KB
84% Quality File Size: 37.1 KB
82% Quality File Size: 34.8 KB
80% Quality File Size: 33.1 KB

Now here's the freaky part. What do you think the file size would be if the add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) ); is set to 100? 56.4 KB? Nope. Like Gomer Pyle said, "Surprise, surprise, surprise!" See the table below;

Original JPEG / JPG Image File Size (100% Quality): 56.4 KB (57,795 bytes as reported by Windows)

100% Quality File Size: 132 KB

WTF!?

Not until 93% Quality does the compression setting equal the original file size.
 

But wait! That was an attention getter. What if the original file was already compressed? That would account for the odd compressing numbers, right? How about an original piece of Modern Art exported as a JPEG at 100%? Here's the data;

Original JPEG / JPG Image File Size (100% Quality): 479 KB

100% Quality File Size: 232 KB
82% Quality File Size: 85.8 KB

Phew! Sanity restored. But it is something to watch out for. If you've got a JPEG File that's already compressed, WordPress will compress it further. After about 10 uploads and downloads, it's gonna look a little fuzzy. So be careful where you get your JPEGs from. Don't just steal them. Steal them, then edit them. Just kidding.  : )

Thanks to this website (http://regex.info/blog/lightroom-goodies/jpeg-quality) it is easy to discern for one's self (instead of taking my word or anyone else who writes an opinion on JPG Compression) how a gradient becomes visible to the human eye around 80% compression. They also include a bar graph that shows the file size. In the end, it seems evident the WordPress guys really did their homework and figured out that 82% is just about the perfect medium for Quality / Size. Good job guys! (I'm using the term 'guys' in a non-gender fashion)

Image Management

I do not like the way Apple devices organize files. IE, the 'organization' is done by the software and the user is presented with files, etc. with a big abstraction layer in between. And yes, I know, even a very basic file system / structure from DOS and Linux, as presented to users via a Shell, has an abstraction layer in between the user and what's going on with where the files are on the disk drive. Yes, there's a bunch of abstraction layers. But I am of the opinion (because I have to fix stuff when it doesn't work correctly, or something has to be found, etc.) that there's still a need for a usable File and Directory / Folder structure available to an end user. No so with Apple products.

WordPress is almost like that. And I'm not trying to be dismissive about how they do it. Out of the box, Images are sorted by date, I never liked it, but hey it's better than Apple. The alternative, which is better, but not by much, is to have WordPress store everything in a flat structure. OK, that's fine, but unfortunately, WordPress, along with plugins, themes, etc., also generate additional 'Alternative Image Sizes' (Dimensional

The Notes

Image Services

Watch out for Plugins that are only gateways to a subscription service for compressing images. Really, one's own server can't do that? Well, given the state of some WordPress servers, that's actually understandable, but not for someone who has their own web server (virtual or not). Example (one of many): Imagify.

WebP Files

For well managed JPEG / JPG Files there is an infinitesimally small gain in image size.

Regenerating 'Thumbnails' (AKA Alternate Image Sizes)

By far and away the one I've found to be the best is Real Thumbnail Generator

Regenerate Thumbnails from Alex Mills (AKA Viper007Bond) is a basic one that does a good job. If Real Thumbnail Generator is installed, Regenerate Thumbnails will put everything inside whatever directory Real Thumbnail Generator has been configured to use as a top level directory, but it won't organize them into sub-directories for different sizes as Real Thumbnail Generator does.

Regenerate Thumbnails Advanced: Works fine at creating, deleting, and controlling sizes generated. But Real Thumbnail Generator, combined with other Plugins is better

Controlling the number of 'Thumbnails' (AKA Alternative Image Sizes)

There are lots of good plugins for managing this. 'Stop Generating Unnecessary Thumbnails' is right at the top. But be warned, weird things can happen. For example, if you see this freaky image size that doesn't seem to make any sense, and has an equally unhelpful name in terms of identifying its origin, watch out. For example, the Astra Theme has an odd image size it wants / needs to display a logo in it's header builder. If that alternate image size isn't created, you won't see anything in the Astra builder utility, just a blank spot. Why doesn't it just use the full size image and downsize / scale it to fit in the available space? I don't know, but it doesn't.

Oh and on another note, the 'Stop Generating Unnecessary Thumbnails' Plugin only 'prevents' unwanted sizes for the automatic WordPress generation of alternate image sizes when a new image is uploaded (and also for itself). It doesn't prevent other Thumbnail regeneration products from generating whatever they want to or are configured to purposely generate.

Cleanup of 'Thumbnails' (AKA Alternative Image Sizes)

Thumbnail Cleaner, Regenerate Thumbnails (from ShortPixels) and Media Cleaner (Pro version for the latter)

Thumbnail Cleaner: Good for focusing on getting rid of old thumbnails (Alternate Image Sizes). OK, here's the situation: You're switching to Real Thumbnail Generator and want to get rid of all the Alternate Image Sizes (AIS) in the Uploads Directory / 'flat file structure'. Clean up thumbnails before installing the Real Thumbnail Renerator is the best option. That's because it will scan and delete files in sub directories and those will need to be re-created too. No big deal unless there are a lot of images. Just a note: Using it with Real Media Physical Folders (or no Plugin) will result in any image file in the 'Thumbnail / AKA AIS' being deleted (CONFIRMED with testing, unless protected by a file permissions setting). IE, it seems to go after any image file in the uploads directory that is not the 'original' image.

Media Cleaner (Pro): Good for identifying any unused images (IE, the full size / original images). If one has a custom setting in a child theme's functions.php settings dealing with enabling Trash for Media items, it will mess this up.

Media Organizers

Wicked Folders

Real Media Library: Has the advantage of the Real Physical Media Addon, but lacks the Bulk Edit Features (however WP Sheet Editor can compensate)

Media Library Organizer Pro: Allows for editing of EXIF and IPTC data (read from an image file like a JPG, stored in the WordPress Database, but does NOT update the actual image file.)

Media Library Assistant: Has its own "Media Screen" (Under Media, Assistant) with a bunch more options, some similar to Admin Columns Pro, LOTs of other stuff; Adds: "Parent Info" / AKA 'Attach to', Attachment Metadata, Attachment File Metadata, Attachment Categories (separate from Real, Media Library Organizer, etc., although all of them can import settings / categories), Attachment Tag, and "Set Feature Image" for an Image (which doesn't seem to make any sense, other than in a Yellow Submarine type of way).

Bulk Editing (Renaming, changing Attributes, etc.)

WP Sheet Editor (with Media Addon): Can Bulk Edit Media File Information

Media Library Orgainizer: Yup, it can do it, but looks a LOT like it's using the Media Library Assistant functionality.

Media Library Assistant: Has it's own special "Assistant" Version of WP Media

Phoenix Media Renamer: This utility works, but one oddity is that the Timer (wait symbol) goes on forever, even if it has successfully renamed something, just reload the page and everything will be renamed and the timer symbol goes away. Also the method is a bit weird in that when doing it inline, one must check off the items to rename, even if it is just one, use the Apply Button and select the action to apply, and change the name

Media File Renamer: : It's advised to remove the Renamer Column when viewing media in the list view, because it takes FOREVER to go down the entire list

MIME Types

Media Library Assistant

File Upload Types

SVG Support (obviously only for SVG Files)

EXIF and IPTC Metadata

A bunch of plugins 'map' the data, IE it's in the WP database, but the file itself isn't updated.

Media Library Assitant: View Only

Media Library Organizer: View and Edit, Bulk Edit too.

EXIF Details: View in List View (nothing for Attachment View), no editing

WP Sheet Editor

Real Media Library: Seems to add EXIF Data when uploading files.

WARNING: Haven't figured out which plugin did it, possibly Media Library Assistant (NOPE, checked it on another site, and that wasn't the one responsible), but a plugin added a BUNCH of columns to the the "Media Database", including EXIF, etc. The Smush Plugin does the same thing. It's fairly normal for a plugin to do this AND leave all the data behind (just in case one needs it in the future if the plugin is reinstalled)

Services

There are also a bunch of image related plugins from ShortPixel, along with what seems like dozens more, that have 'free' plugins (IE, there is no 'pro' version), and instead sell a service. Interesting concept in that they make their plugin a 'thin-net' client that then sends an original image off to a server to be manipulated (resized, cropped, format changed, etc.). That has the advantage of reducing CPU usage on a server, but it has a downside of using up valuable bandwidth to upload large images and then download them again. In strict terms of time, tried a quick test with a couple of services that offered a free trial and discovered it was faster to deal with the minuscule CPU hit instead of all the time it took to upload the file, have it processed, then download everything (network, CPU, and disk access time all came into play). Of course the testing was done using a huge image file and that would seem to be similar to using a bunch of smaller files. It's an interesting angle and of course the sellers are going to point out all the benefits. But of course they're the ones benefiting too by selling a subscription. My choice? Keep it 'in house'.

Summary

Install these plugins;

  • Real Media Library, Real Thumbnail Generator, and Real Physical Media
  • Media Library Assistant (it provides an "Advanced Version" of Media, so if using Menu Editor Pro, think about moving 'Assistant' (under Media) to the top (replacing Library, under Media) as the default function of Media
  • WP Sheet Editor
  • Thumbnail Cleaner
  • Media File Renamer (from Meow Apps)
    • Use Phoenix Media Rename for inline name changes
  • Optional
    • EXIF Details (if one desires EXIF details in list view): These are actual values read from the file, not "mapped" EXIF values stored in a WordPress Database (as of 2022, there doesn't seem to be any plugin to change the values in the file, only read them, but there are Windows and Linux utilities to do this.
    • Media Cleaner (if one desires eliminating unused images)
    • WP Attachment: Shows what Images or Media is attached to a Page or Post, etc. (when editing the Page or Post, etc.)

Gotchas with Real Physical Media and Real Thumbnail Generator

Major Issue

Ran into an issue with the Real Physical Media Plugin. In the "Settings Section" (on the same page as Settings, Media) for Real Physical Media, when it is first installed, there is a notification that states: "You have not currently activated a file handler. Please activate a file handler in the settings below." Immediately below that is a field titled "File moving handler", which should show a File Renaming Handler indicating the Media File Renamer (by Meow Apps) is selected or needs activating (it appears, like the Henry Ford saying "You can have any color you want as long as it's black." in response to a question about available colors for the Model T Ford). Sometimes it doesn't

The problem involves the name of the PlugIn Directory. IE, the Real Physical Media Plugin Directory should be: real-physical-media If it isn't, the plugin won't work. This isn't completely the fault of Real Physical Media (it just means they've got the plugin directory name hardcoded in somewhere instead of using a call function). Other plugins can have similar issues, so don't rename the plugin folder from its original name.

Custom CSS

When using the Real Physical Media Plugin, it is very likely that if custom CSS is being used (like with Custom CSS and JS), those paths will need to be modified manually.

File Names with Periods

When using the Real Physical Media Plugin, if a file has a Period in it, one of two issues occurs. One, RMP strips out periods (and other non-WordPress compatible characters or modifies them in some way when setting things up and / or uploading files), or it can't handle periods in a file name, other than an extension. The former could be a setting, the latter could be a programming issue. For instance, PictureNameFromXYZ.com.jpg becomes PictureNameFromXYZ.com

Images that have been Inserted as Thumbnails (AKA Alternate Image Sizes)

If an image has been inserted into a Post with as "Thumbnail" size (IE, not the Original Size), and "Thumbnails" are regenerated with Real Thumbnail Generator and and alternative storage location is used, then something breaks for the file path.

Retrieved from "https://wiki.terrabase.info/index.php?title=WordPress_Images&oldid=1599"