WordPress and Responsive Images: srcset and sizes Attributes

I’ve been puzzling over a performance issue on one of my sites lately and finally got it figured out today.

A custom shortcode uses the_post_thumbnail() to include a small image (~250px square); I have a bunch of custom image sizes set up, so the srcset attribute included 16 different image sizes. (Overkill? Maybe….) However, instead of using the image closest to 250px wide, Chrome was pulling in the largest available image—sometimes as much as 1500px! Obviously, this is terrible for performance.

In addition, certain pages had dozens of these images, multiplying the effect. My test-case page was 10+MB total (way too heavy…).

Here’s a sample <img> tag for one of my images:

I finally realized that the root cause was that the sizes attribute was set to “100vw,” basically suggesting to the browser that the image might at some point be rendered at 100% width of the viewport, so my browser was happily pulling down the largest possible image so it could display it in all of its high-resolution, hundred-KB glory instead of the scaled dozen-KB file.

Since I know this particular shortcode will only show images at a max width of 250px, I needed to set the sizes attribute to “250px,” hinting to the browser that anything slightly larger than that would be perfectly adequate.

Here’s how I handled it:

  1. Added a filter to wp_get_attachment_image_attributes and checked for a named image size or array
  2. If it was an array, I set the sizes attribute to that pixel size
  3. If it was a named image size, I set the sizes attribute to that pixel size

Sample code:

This approach admittedly is a bit heavy-handed and I’m still testing out the behavior on other pages on the site, but this fixed the problem with that specific shortcode, and my test page went from 10+MB to ~5MB—it cut my page weight in half!

The moral of the story is don’t “set it and forget it,” especially when adding responsive images using custom code.

Thanks to VIA Studio for their blog post that finally made the solution click for me.

Thinking With Type by Ellen Lupton

Thinking with Type coverFor Christmas this past year, my wife gave me a copy of Thinking with Type: A Critical Guide for Designers, Writers, and Students (2nd revised and expanded edition) by Ellen Lupton. I just finished it and very much enjoyed reading it. I’ll definitely be using it as a reference.

These days, I generally prefer to read Kindle books on my Kindle Paperwhite, but this book is definitely better as a physical book.

Description

This is a great introduction to and reference on typography. It’s divided into three main sections—Letter, Text, Grid—plus an appendix.

Letter

Explains some of the history of letterforms and the printing process, explaining why certain aspects of typography are tied to mechanical processes. Goes into details about type families, punctuation, numeral styles, typefaces on screen, and more.

Text

Discusses legibility in the context of large blocks of text including kerning, tracking, alignment, and more.

Grid

Talks about page formatting, the golden ratio, and more specific details about laying out text on a page.

Appendix

Includes more details on proofreading, editing, and some free advice.

My Thoughts

Much of this information I was already familiar with, partly due to my dad working in the printing industry and teaching us some of the terminology and concepts. A number of the concepts have also been covered by various blog posts and other publications that I’ve read through my career.

This guide includes examples on nearly every page (some created for the book and some from historical sources), either illustrating the point or depicting a “type crime” where type was mis-used.

Thinking with Type: capitals and line spacing
Capitals and line spacing
Thinking with Type: type family optical sizes
Type families and optical sizes

You can read the description of the book on Amazon for more information or take a look at the companion website for exercises and some more details.

Buy the book on Amazon

Thomas Jefferson: The Art of Power by Jon Meacham

Thomas Jefferson: The Art of Power by Jon MeachamAuthor of the Declaration of Independence, Virginia state legislator and governor, member of Congress, minister to France, Secretary of State under Washington, Vice President under Adams, and ultimately President himself, Thomas Jefferson was no stranger to power.

This 800-page volume was a good book, but I was a bit disappointed that it wasn’t as biographical as I had initially hoped.

Influence

I hadn’t realized how much influence he had on other presidents:

“For thirty-six of the forty years between 1800 and 1840, either Jefferson or a self-described adherent of his served as president of the United States: James Madison, James Monroe, Andrew Jackson, and Martin Van Buren.32 (John Quincy Adams, a one-term president, was the single exception.) This unofficial and little-noted Jeffersonian dynasty is unmatched in American history.”
—Kindle location 192

Politics

Jefferson and Hamilton were openly opposed to each other’s politics and their disagreements ultimately became the basis of the two major parties at the time. Hamilton wanted a stronger, more centralized government which emphasized trade and commerce, while Jefferson despised those who worked with their heads instead of their hands—he wanted a rural, agrarian society. Thankfully, Hamilton had President Washington’s ear and the country headed that direction rather than remaining a simple farming culture.

Jefferson was a republican through and through:

“The Jefferson of the cabinet, of the vice presidency, and of the presidency can be best understood by recalling that his passion for the people and his regard for republicanism belonged to a man who believed that there were forces afoot—forces visible and invisible, domestic and foreign—that sought to undermine the rights of man by reestablishing the rule of priests and nobles and kings. His opposition to John Adams and to Alexander Hamilton, to the British and to financial speculators, grew out of this fundamental concern.”
—Kindle location 5171

Conclusion

This biography did cover major events in his personal life, but it seemed to shift a bit around the time he became President and began to read more like a philosophical discussion on how his seemingly-contradictory decisions fit into his framework of wielding executive power to fit his purposes.

It’s definitely worth reading and will give you a perspective on how he made decisions, but personally, I would look elsewhere if you are reading just one book about him for a good biography. That said, it does have a 4.5 star rating (with 1464 reviews) on Amazon, so many other people definitely enjoyed it.

Buy the book on Amazon

Slanted Background Stripes

Why Eat Your Coffee? page
Sample effect

While working on a recent project, I needed to use angled background stripes on a number of pages.

Here are a couple of requirements that limited my options:

  • Angled stripes with text content and a background color and/or image
  • Angled stripes stacked on top of each other

Continue reading “Slanted Background Stripes”

WooCommerce Downloadable Products: Granting Permissions to Previous Customers

If you’re using WooCommerce to provide downloadable products and add a new download, previous customers do not automatically get access to it as of v3.x.

Here are a couple of options: Continue reading “WooCommerce Downloadable Products: Granting Permissions to Previous Customers”

John Adams by David McCullough

John Adams by David McCulloughFinally…back to the actual presidents. John Adams by David MucCullough was my pick for our second president, partly because we owned a copy of the book already, and partly because it’s one of the most-acclaimed biographies of this lesser-known founding father.

I took almost a year to finish this 752-page book. At times it seemed a bit slow, but I did keep getting sidetracked with other unrelated books, so it’s not this volume’s fault.

Overall, it was a good biography; I didn’t feel like McCullough tried to gloss over Adams’ foibles and character deficiencies. It seemed an accurate portrayal of an intelligent, sometimes-cranky politician who was self-aware enough to know that he was too ambitious.

Buy the book on Amazon

Post Type Search Form

Adds a shortcode you can use to show a post type-specific search form.

To use, add [post_type_search_form post_type="post_type_here"] where you want the search form to display.

Get the code at the GitHub repository. Continue reading “Post Type Search Form”

How to Use Backblaze B2 with Sermon Manager for WordPress

If you’re hosting a church website on shared webhosting, chances are they limit how much space and bandwidth you can use each month. Uploading sermons each week can eat into those limits very quickly.

Enter Backblaze B2, a cloud storage option costs less than a quarter of what Amazon S3 would cost for the same amount of storage. Backblaze has been around for years as a computer backup solution and has made their name by providing reliable storage at low cost.

In fact, the first 10GB of storage is free, so you might even be able to host your sermons at no cost at all. Continue reading “How to Use Backblaze B2 with Sermon Manager for WordPress”

WPForms: Force Async Scripts

This little plugin has one job: make WPForms’ Google Recaptcha script load asynchronously.

Get the plugin on GitHub.

Installation Instructions

  1. Copy the wpforms-recaptcha-async.php file to your wp-content/plugins/ directory (or compress to a zip file and upload in the WordPress backend “Plugins > Add New”
  2. Activate
  3. That’s it. All the merged scripts will be loaded with the async and defer attributes.

Merge + Minify + Refresh: Force Async Scripts

This little plugin has one job: make all merged scripts produced by the Merge + Minify + Refresh plugin load asynchronously.

Get the plugin on GitHub.

Installation Instructions

  1. Copy the merge-minify-refresh-async.php file to your wp-content/plugins/ directory (or compress to a zip file and upload in the WordPress backend “Plugins > Add New”
  2. Activate
  3. That’s it. All the merged scripts will be loaded with the async attribute.

Potential Issues

Note that if you have plugins or other code that adds inline Javascript, it probably will break if it’s depending on jQuery (for example) to be loaded and active already.

One workaround is to exclude /wp-includes/js/jquery/jquery.js from the Merge + Minify + Refresh cache, but you may have to exclude other scripts as well.