The Publishing Project

When I first looked at responsive images I thought that srcset and sizes would be enough to handle most of my responsive images needs. See Concepts and examples of responsive images and How To Use Responsive Images for reference but notice that I barely touched on <picture> at all in either of those articles. When researching how to leverage new image formats in the context of HEIF and AVIF, I discovered that we needed to leverage the other part of the responsive images specification: the picture element. The picture element has more applications that srcset and sizes. We will explore

Web Performance is very important but at times it can be very frustrating. WordPress introduces additional complexities to performance analysis and troubleshooting. Performance issues in a WordPress generated page can come from many sources: HTML built into PHP templates HTML generated by a plugin’s PHP code Scripts loaded by the current theme Scripts loaded by plugins The way the WordPress accomplishes a task Knowing these differences we’ll look at ways to improve the site’s performance, how they work with WordPress, and address questions that may or may not be performance-related. Some of these solutions require PHP code to implement and

I’ve been working on troubleshooting WordPress performance issues for a while and one of the things that I found is that the version of jQuery used in WordPress is not secure and is far from the latest version. Normally this would be a nonissue. WordPress updates jQuery to the latest 3.x version and we are set, right? Well, with a project as large as WordPress is not as easy to do so. There are hundreds if not thousands of plugins and themes using the version of jQuery currently installed with WordPress so just updating will likely break a lot of

After researching image sizes (Revisiting images formats for the web and Image formats for the web: HEIC and AVIF) and how to add new mime types to WordPress there is one final question to ask. How do we leverage responsive images and new image formats? Background We have four image formats to experiment with: Format Extension Notes JPEG jpg Default where no other formats are supported We still need the format becauseSupported in all browsers WebP webp Smaller file sizes than JPG. Supported in all modern browsers. (caniuse entry) HEIF heif Part of HEVC MPEG family of specifications. Supported in

I was surprised when the WordPress media uploader blocked uploading WebP images. These are not like SVG graphics that have all sorts of security problems so I’m surprised that WordPress supports the video format (WebM) but not the image format (WebP). Even if we fix the problem for WebP we will face it again and again when we want to add new image formats like HEIC and AVIF or other media formats like epub ebooks and others. It is true that we could host them elsewhere and just link to them from WordPress but it’s hard to manage and coordinate