Recently, I was asked to help figure out why a friend’s new site was causing her browser to basically shut down & drag her entire computer to a crawl. After a bit of quick investigation (thankfully, my computer has a few more resources than hers, so I was able to load the site), I discovered that the theme she’s using allows her to set custom images to be used in six different areas of the home page. That theme uses the Customizer to select & store the images.
One of those spaces is for the site logo, which seems to display at around 200×100. Two of those spaces are for background images similar to those you’d see in parallax designs; these images display full-width across the browser. The other three spaces were for icons that appear at 125×125 at the top of three “featured” area boxes.
Because the friend was buying full-quality stock images and uploading those to fill these custom image spaces, her home page was ~15 megabytes (and she hadn’t even set a logo yet, so it was really only five images being used on the home page). All five of the custom images she was using were enormous; in fact, one of the 125×125 icons was actually an 8,000px square image being resized through HTML.
When the Customizer stores its settings in the database, it appears that, for media (including images), it stores the URL of the media item rather than an ID. Therefore, by default, when that media is pulled back out to be displayed on the site, the full-sized, original upload is used. I’m sure the theme developers probably included some instructions somewhere along the line explaining that users should resize & crop images prior to adding them in the Customizer, but that seems like a strange way of doing things.
Instead, I decided to do a little bit of digging and testing to see if I could improve the way the images are used.
As my first step in the process, I was able to quickly determine that the Customizer panel itself loads a resized version of the images, so it was obviously possible to do so.
Since I’d proven to myself that this was possible, I started picking apart code within the theme and within WordPress core, itself. Eventually, I stumbled upon the `attachment_url_to_postid()` function. The status of this function appears to be a little bit fluid within Core, but it appears to be what’s used by the Customizer panel itself, so I decided to try to use it.
Once I discovered that, it was simply a matter of registering the appropriate image sizes. In this case, I chose 2560×1920 for the parallax-type backgrounds, which seems large enough for most implementations, but still keeps the images from being unlimited; and I chose 300×225 for the size of the featured icons – slightly large than the 125×125 at which they normally display, but I wanted to make sure they were ready for the possibility of being full-width on mobile displays or something. Then, I took an inventory of the Customizer setting IDs for each of the spaces that needed to be modified, and hooked into the filters for their values. Then, I set up a function (two functions, actually, since we’re dealing with two different image sizes) to retrieve the appropriate URLs.
You can view some sample code for this process below.
Leave a Reply