It’s no secret: the handling of responsive images with regards to web development has been in flux for a while now. We know that responsive images need to be optimized for the device resolution on which they are being viewed – but there are no standards, or even generally agreed upon solutions for serving these images to web pages.
That challenge is why we built Waldo – a free, open-source solution we’re releasing today to help manage responsive images. Read on to learn more and download!
Mobile-first web development is the industry standard, and for good reason; images are one of the leading causes of page bloat and slow loading times, especially on mobile devices and cellular networks. Any place that these images can be optimized helps the performance of a site.
Waldo was the result of that exploration.
Waldo is an extension for WordPress and other PHP-based applications that dynamically generates responsive CSS background image styles. If you’re a web developer, it’ll greatly improve how you serve background images in your web projects.
There’s less coding to be done! Every time that you need to include a responsive background image, Waldo handles all of the work for you. You just need to call Waldo and pass in the appropriate parameters.
If you haven’t been using responsive images for backgrounds, you’ll notice an improvement in the load time and page weight of your pages that utilize Waldo. Appropriately sized images mean smaller page weight, which results in faster load times.
Waldo contains an array of key/value pairs that associates image sizes with media query values. Waldo uses this association to build media query styles for background images from an object that contains matching references to image files. These styles are then saved to waldo.css which is called in the head of your application.
(Not technical enough for you? Read on!)
The array waldo_sizes found in waldo.php must be configured to match the image sizes and their associated min-width media query values that are supported by your theme. The methods in class Waldo() rely on these key/value pairs to properly fetch image references and build the image styles.
The method $waldo->waldoSavedStyles() retrieves an array of saved styles and stores to the global variable $waldo_styles; this method is called on the initialization of Waldo.
For each instance where Waldo is to generate background image styles, call the function $waldo->waldoStylesArray() and assign to the global variable $waldo_styles. Pass in a variable containing the appropriate Advanced Custom Fields image object, a unique section name, the $waldo_styles array, and a unique section class name. This function builds an array of styles at an index assigned to the unique section name, and saves the updated array back to the global variable.
The method $waldo->waldoStyles() uses the $waldo_styles array to build media queries containing the appropriate image styles. It removes whitespace to effectively minify the styles, and saves to waldo.css. This method then saves the $waldo_styles array to waldo-styles.php for future reference. The $waldo->waldoStyles() method is automatically called at the end of each document.
By default, Waldo is configured for use with Wordpress 4.4+ in conjunction with Advanced Custom Fields 5.3+, though it is easily modified to function with other PHP-based applications. Get Waldo here, and then follow the configuration and ‘how to’ steps to get started!