Guest Essay

Some great stuff I’ve learnt from WordCamp US 2022

WordCamp Conference

MasterWP is sponsored by LearnDash. Your expertise makes you money doing what you do. Now let it make you money teaching what you do. Create a course with LearnDash. (Use coupon ‘MASTERWP25’ to save $25 on your purchase!)

WordCamp US 2022 took place just a few days ago in San Diego, California, drawing a crowd of 650 devotees. Usually attracting thousands of visitors, the number of participants was smaller-than-usual this year (for safety measures, as this has been the first WordCamp US to take place physically since the beginning of the pandemic), but the enthusiasm from the attendees was large indeed.

This event hosted 34 talks and 6 workshops, and it ended with the quintessential Q&A between WordPress creator Matt Mullenweg and the packed room of attendees.

I didn’t get to attend the conference (WordCamp Asia 2023, I’ll be there!), but thanks to the organizers and volunteers, I could enjoy the livestream of all the talks from my couch at home. And I made a summary for 5 of the talks that I enjoyed the most:

I found several of the other talks also pretty good, but they were difficult to make a readable summary of them, and experiencing them in video format is clearly the most sensible option (among my favorite ones are Blog to Video: Tapping into YouTube and Video SEO with Your Existing Content by Joey Daoud, and Content Creators Are Users, Too: The Crucial Importance of Carefully Crafted Editorial Experiences by Phil Crumm and Helen Hou-Sandí). So do check out all other talks too, there are many goodies out there.

These are my summaries. I hope you enjoy them!

Taming the Whirlwind – Growing Your WordPress Business While You’re Busy with Client Work

Nathan Ingram helps us understand why, when we are so busy with client work, we find it so difficult to have time to work on our own projects, and what we can do to overcome it. Here is the video.

Nathan mentions that we all face a common set of struggles when doing our work. After attending a WordCamp, he’d come up with 287 ideas of things he wants to do from all the ideas he got, to be implemented, he promises himself, by the end of the year. But as the end of the year approaches and then goes away, he would promise himself that he’d still implement these ideas, “one day”.

A Common Struggle
Me After WCUS
I have 287 ideas...
...I have them all written down...
...and I will do all of them...
...by the end of the year.
Ideas we get that never get implemented

We all face the challenge of wanting to implement all these good ideas we have, yet never finding the time and energy to make them come to fruition. It’s the struggle between strategy and execution.

Strategy is the things that we do that are working on our business, such as those things we need to do to grow our business, building products, building systems and processes, and taking care of the big picture. Execution is the things we do working in our business, such as answering client questions, building and managing websites, and answering tickets.

For many of us, execution may be natural (that’s how and why we started the business to begin with), but strategy is hard, feeling like a skill that we have to learn.

A Common Struggle
Strategy = working on the business
Execution = working in the business
Strategy is hard. Execution is natural.
(For Many of us)
Execution is natural, but strategy is hard

Why is it so hard to keep strategy in focus? Why are all the ideas we got from WordCamp not getting implemented? It’s because of the “whirlwind”, which is the energy and attention that is needed to run our businesses.

What Is the Whirlwind?
The energy and attention needed to run your business.
the Whirlwind is the urgent.
The whirlwind

The whirlwind is the 14 emails from clients that you find in your inbox when you hit the desk in the morning, all with demands for things that need to be done immediately. It is the customer call that happens right as you were about to start working on your own website. It is that meeting with a client that you expect to take 1 hour but ends up taking up half of your day. You come to your desk in the morning to work on your project, and then you make the mistake of opening your email and there’s a bunch of stuff sitting there that you have to handle right away.

The whirlwind can also happen when you find some new piece of technology that catches your interest, and you spend a whole day unpacking it which, while it may be fun, it won’t really help you grow your businesses.

All this urgent client work, or the distractions we find ourselves in on a daily basis, will force us to postpone our strategy work for a later date, and then those 287 ideas we got from WordCamp will remain unimplemented. Strategy is important (we know that), but the whirlwind is urgent, and when they clash, urgency wins every time.

The Problem with the Whirlwind
Strategy is important, The whirlwind is urgent.  when Urgency and importance clash, urgency wins every time. - Franklin Covey Co.
Urgency wins every time

We may tell ourselves that tomorrow will be better, but we will be fooling ourselves, because the whirlwind never goes away. So we need to tame the whirlwind and, to do so, we need a plan, because without a plan, the whirlwind always wins.

The Problem with the Whilrwind.  Delaying strategy doesn't work.  The Whirlwind never goes away.
The whirlwind never goes away

Here’s a plan that will help us get our goals moving forward even when we’re busy. It looks really simple, but it’s harder to execute:

  • Have a quarterly goal session, which is a meeting that you are going to have with yourself, to set goals for every quarter
  • Follow it with a weekly planning meeting, to be had once again with yourself, planning what tasks you will work on during that week
  • And finally book slots on your calendar, and execute those weekly goals
The Plan Quarterly goal setting, weekly planning, weekly execution
The plan

You can start small, just devoting a few hours each week, and as you gradually get it worked into your world and build momentum, you will discover that it becomes easier and easier to find more time to execute strategy.

For the quarterly goal setting, keep it as an appointment on your calendar. You should spend at least two hours unplugged (that means no screens, but old-fashioned pen and paper), go someplace where you can most easily concentrate (depending on your personality, that may be a quiet setting or a bustling coffee shop, during the morning, afternoon or night), and focus your thoughts, letting the whirlwind calm down in your brain.

You have 2 tasks to achieve (and write down):

  1. Identify the issues that you need to do to grow your business, prioritizing those issues that have a big impact
  2. Plan the necessary action items, with each action item taking between 2 to 4 hours to complete
Quartely Goal Setting 2 Hours - 2 Tasks 1. Identify the Issues 2. Plan action items
Quarterly goal setting

For the weekly planning meeting (with yourself), it generally takes around 30 minutes. You will figure out what you’ll be doing this week to advance your business, and you’ll book 2-4 hour blocks in your calendar to work on these items during the week. It’s important that you do the schedule before you start the week (maybe on Friday afternoon after the past workweek is finished, Sunday night, or Monday morning with the coffee just before starting your new workweek) so that you have prepared all the resources that you will need, and also because if by then you don’t have a clear plan, the whirlwind always wins.

Weekly Planning 30 mins Before you start your week Fri afternoon? Sunday Evening? Early Monday Morning?
Weekly planning

This is an example of how to plan your week, where every column/day contains slots for “morning”, “afternoon” and “evening”:

My weekly planning
(a schedule of what they are doing for the week)
Weekly planning example

Finally, during your weekly execution, do schedule your time and don’t compromise it (that is, unless a genuine emergency happens).

Weekly Execution 
2-4 hours
Schedule the time and don't compromise it (Okay, maybe for a real emergency)
Weekly execution

As final suggestions, you need to:

  1. Prioritize, as you will always have more goals than time
  2. Separate your roles (particularly if you’re working solo) as the CEO, who makes the strategy, and the employee, who executes it (even consider working in different locations if it makes a difference)
  3. Consider a sprint week, taking a bigger number of slots during one week, and try to achieve as many goals as possible, varying strategies to see what works best for you
  4. Give yourself a break, because taming the whirlwind takes time; so don’t rush, don’t fret, don’t panic, but do it steadily, taking the time that it requires

By taming the whirlwind, we will create margins of time that we can devote to those things that really matter in life.

Margin 
Family Hobbies
Vacation Reflection
Strategy Processes
Creating margins of time

Where is WordPress’ Place in the Creator Economy?

Ben May explores how WordPress fits into the evolving world of the creator economy, and attempts to answer if WordPress is the right platform for the job. Here is the video.

The “creator economy” is a broad term that involves people who create digital content and make a living from it, including the so-called influencers, bloggers, TikTok and Twitch streamers, and more.

It’s really hard to evaluate the size of the market of the creator economy, but some estimations place it at a u$d100 to 200 billion industry a year, and there’s no shortage of platforms and tech companies trying to build products to get a part of that market.

More relevant to WordPress is the “editorial creator”, where people at traditional media companies are leaving to go it alone, setting up their own newsletter, or subscription site, or something of the kind as enabled by some platform. As the available platforms’ capabilities become more and more powerful and easier to use, the barrier to starting an online publishing business is also becoming increasingly easy.

Let’s explore what motivates the editorial creators, what technology platforms they are using and how, and where does WordPress fit into that whole equation.

Let’s use personas to frame the conversation. The first persona, which is also the most common one we see, is the popular journalist who has a prestigious job, and then one day they leave their organization and set up their own Substack. They’ve usually got some sort of social following, and they can take that audience with them and start off on day one with an existing brand, reputation and credibility. An example is Casey Newton leaving The Verge for Substack.

Persona One: The Popular Journalist
Well known and well established via an existing brand/career 
Has existing social following
Goes out solo
Writes a paid newsletter
Persona one

The second persona is the small collective, an evolution of the first persona where a group of people work for some well-known institution, enjoying a big audience, and they leave to set up their own venture, in the process attempting to figure out how to make money with media and publishing in today’s age, and moving a lot faster than the institution they left behind. For instance, a group of reporters left Politico to create Punchbowl.

There are several avenues creators can employ to become successful, including publishing content (written, audio, video, etc), selling and managing subscriptions, running advertising for sponsors, selling digital products like eBooks and courses, and building and supporting a community.

What Do creators Need to do 
Publish content (written, audio, video, etc.)
Sell and manage subscriptions
Run advertising for sponsors /commercial partners
Sell digital products (ebooks, courses, etc)
Build & support a community (comments, forums, discords etc)
What do creators need to do

The trendy platforms empowering independent creators and publishers include:

  • Substack and Beehiiv for creating websites, newsletters, podcasts, and more
  • Memberful and Patreon for creating memberships and monetizing them
  • Ghost as an open source Content Management System with built-in membership features
  • Webflow and Squarespace as no/low-code platforms to effortlessly build custom websites

The biggest advantages of these platforms is that their entire user experience was designed for the editorial person, doing only what they need to do to to make it very easy for their users to build their own products.

The disadvantage of these platforms is that, in a lot of cases, they will inhibit growth at some point down the road (maybe less than 1 month for creators with millions of followers, or some years for anyone doing a part-time side hustle). These platforms usually involve a revenue share model, in which they take a percentage of the money earned by the creator. On day 0, the creator will get a lot of value from the platform, paying possibly nothing for its services, so it’s a great trade-off; but eventually, if the creator becomes successful, the amount of money paid to the platform will become more considerable, or possibly the platform’s restrictions are going to be felt, making the experience more frustrating and not so worth-it any more.

Chart of the lifecycle of a SaaS platform
Lifecycle of SaaS platforms

Setting up one of these products is pretty simple, requiring very few steps, as can be seen in this screenshot:

Steps to set up a Substack/Ghost/Beehiiv etc
Steps to get started with SaaS platforms

Using WordPress, in comparison, has a lot more steps involved:

Steps to set up a WordPress site to be a creator
Steps to get started with WordPress

So there is a lot of extra friction to work with WordPress (especially if we think back to the personas defined earlier one, who are not developers, and they don’t have an engineering background). So then, why would you bother with WordPress?

The reason why is that WordPress also offers multiple advantages, in particular the freedom and flexibility it grants to create your own product the way you want it, and keeping full ownership of your data.

Why WordPress
Flexibility
Customisation
Ownership
Access to your own data
Platforms changing direction
censorship
Interoperability
Why WordPress

How can we overcome the difficulties of getting started using WordPress? An idea is to produce a WordPress “Lite” distribution that lets creators spin something up really quickly, leading them through a journey that takes as few steps as possible, similar to the SaaS platforms. Indeed, it is in general a good idea/compromise to make WordPress feel and behave more like a platform:

Make WordPress more like a platform
No/low code mindset
Leaning into page builders/ full site editing
Move most of the control into the browser
Less bespoke development
Less ideal but a good compromise
Make WordPress more like a platform

In the same vein, the WordPress admin, instead of presenting a mess of information (with plugins competing with each other for attention via notifications, widgets and menus), could be clean, presenting solely the information needed by the user and nothing else.

Easy access to common things, hide the rest
Easy access to common things, hide the rest

Plugins could also feel more native, having all of them share the styling so that users don’t get confused, and even functionality too, such as needing a single step to configure a blog post as free or paid that works across different plugins.

Avoiding duplication of steps 
Selected is segment paid subscribers.
Avoiding duplication of steps

Our solution can also be a hybrid of WordPress and SaaS products. For instance, considering a subscription engine, it makes sense to rely on a SaaS service such as Memberful as it can seamlessly deal with security, scaling, reporting and integrations (which is mission critical when running financial systems), and then invoke these functionalities from a WordPress site via an API.

It is worth noting that migrating a website from a SaaS platform such as Substack, to WordPress, is doable but difficult, because these platforms don’t want their users to leave, so they only provide the bare basics, such as exporting a zip file with HTML contents that then we need to parse and interpret to somehow recover the data, all by ourselves, as to import it to WordPress.

In summary, WordPress is a smart choice to power the creator economy, but a lot of manual work is needed to make it feel simple.

Embracing Minds of All Kinds: Making Digital Content Usable for People with Cognitive Disabilities

Christina Deemer teaches us about the challenges people cognitive disabilities experience on the web, and how to make our digital work more accessible to them. Here is the video, and here are the slides.

This talk has three objectives:

  1. Identify access barriers that people with cognitive disabilities experience online
  2. Expose 12 practical solutions recommended by the W3C that make content usable by people with cognitive disabilities
  3. Explore ways to get buy-in from your stakeholders so you can put some of those solutions in place

We will be using the terms “disability” and “disabled”, which are not shameful or dirty words, and they’re preferred over other terms such as handy capable, diverse ability, or special needs. This is because research has shown that people who are described as having special needs are viewed more negatively than those who are described as having a disability, making the term “special needs” a particularly ineffective euphemism.

Cognitive disabilities encompasses a wide variety of things, including the following clinical terms:

  • ADHD
  • Anxiety
  • Aphasia
  • Autism
  • Dementia
  • Depression
  • Down syndrome
  • Dysgraphia
  • Dyscalculia
  • Dyspraxia
  • Epilepsy
  • OCD
  • PTSD
  • TBI
  • Tourette syndrome

However we won’t be using these clinical terms (which can be helpful for individuals in terms of getting support or treatment) because not everyone with a cognitive disability has a clinical diagnosis or has only one diagnosis, and not everyone with the same disability experiences it the same way. Also, many people who experience cognitive disabilities may not be aware of their condition (such as someone with reading comprehension problems not knowing these are due to dyslexia), as they may not be able to get diagnosed due to a variety of systemic barriers.

Instead, we will use their equivalent functional terms, which can better express the barriers that people with cognitive disabilities face online. Then, instead of ADHD, we will use “struggles with focus”, instead of dementia we will use “has memory impairments”, and instead of traumatic brain injury we will use “difficulty concentrating”.

By using these functional terms, we can better focus on the cognitive skills that affect online behaviors, which includes:

  • Memory
  • Problem solving
  • Decision making
  • Attention & focus
  • Time Management
  • Processing speed
  • Math comprehension
  • Reading comprehension
  • Language comprehension
  • Impulse Control

They also include executive function, defined as “mental processes that enable us to plan, focus attention, remember instructions, and juggle multiple tasks successfully.”

Concerning the barriers that people with cognitive disabilities face online, we find:

  • Sites with complex or overwhelming interfaces
  • Sites with complex or unusual words
  • Long passages of text or visual walls of text
  • Animations or media that autoplay
  • Blinking, flashing, flickering, or moving content
  • Lack of help

To experience a complex interface we can go to eBay and try to buy a shirt. In the screen there’s no single clear call to action. There are four buttons in the middle of the page with three different designs, and there isn’t much white space at all. There’s a lot of information and it’s all crowded in the middle of the page.

screen shot of an ebay bid for a t shirt
Example of a website with a complex or overwhelming interface

This interface isn’t great for people with cognitive disabilities. Those who struggle with focus will not know where to look; those who struggle with decision making are going to agonize over those buttons; and those with memory impairments are not going to remember what button they pushed last time.

So let’s explore 12 solutions or design patterns that help make digital content usable by people with cognitive disabilities. These solutions, which were taken from the W3C’s April 2021 Working Group Note, cannot be identified or remediated with automated tools alone (at least not currently; ongoing developments may change that soon).

The 12 solutions are:

1. Make it easy to find the most important tasks: Users with impaired executive function and memory may have difficulty determining what they can do on a site with a lot of noise and distractions. By drawing attention to the most important tasks and features, a user can quickly determine whether or not the site will meet their needs, and how to do so.

2. Provide a friendly search: Users with short-term memory impairments, who get distracted easily, or struggle with executive function may rely on search more than menus, categories, or browsing. A search mechanism that includes features like autocomplete and spell check will make it easier to reach the intended information.

Search Tip #1
Search is most useful when it corrects spelling errors and suggest auto-corrected versions of search terms
Search with autocomplete and spell check

3. Use clear and understandable content: Users with impaired language skills may not be able to understand complex language; those with memory impairments may not be able to learn new words; those who struggle with non-literal language may not understand jokes and metaphors.

Help users understand your content by using:

  • Easy to understand words
  • Short sentences
  • Simple tense
  • Short blocks of text
  • Concrete content & examples
  • Generous white space

4. Use clear formatting and punctuation: Users with communication difficulties may use screen readers to understand content, and when the content is formatted or punctuated incorrectly, the screen reader will fail to pronounce it correctly, and the user may not able to understand it.

Some examples of correct formatting are:

  • Writing out the month in dates: Nov. 8, 2019 (instead of 11/08/2019)
  • Avoiding Roman numerals: Chapter 4 (instead of Chapter IV)
  • Using language-appropriate separators for long numbers: 1,234 visitors (instead of 1234 visitors)

5. Use clear step-by-step instructions: Clear and easy-to-understand instructions help a variety of disabled folks; without instructions, users may make multiple mistakes, spend a lot of extra energy, and abandon their task.

Providing instructions must be done at the start of a process, not just when there are errors, they must be placed before, or next to, the field or activity, and they may be hidden behind a familiar icon (such as an “info” icon next to the label, displaying instructions via a tooltip).

6. Make short critical paths: Streamlining processes reduces fatigue, distractions, and mistakes and increases the chances that users with cognitive disabilities will successfully complete a task.

You can accomplish this by providing short navigation to key features, and requiring only the necessary steps to achieve some goal (for instance, avoid asking for non-mandatory information, such as the birth date, when creating a user account; that can be done later on).

7. Provide a login that doesn’t rely on memory: People with any impairment that affects memory or language can find it difficult or impossible to overcome memory barriers when logging in.

Good options include:

  • Single Sign-on (SSO)
  • Magic links
  • Quick Response Codes (QR Code)

8. Don’t ask users to memorize or calculate data: Users with impaired working memory can’t remember a lot of details at the same time; those with impaired executive function may struggle to remember instructions.

9. Provide alternative content for complex tasks and information: People with cognitive disabilities may struggle to make sense of complex information and data formats, but may understand when supplementary content is included.

Supplementary content could be:

  • Charts and graphs to support text
  • Video clips to support instructions
  • Flow charts to visualize processes
  • Linking keywords to a glossary

10. Provide human help: When a user gets stuck or confused for any reason, getting help from a real person is usually the most effective solution.

Some ways to provide help are via:

  • Phone number
  • Text
  • Email address
  • Live chat

11. Let users control when content changes: Unexpected changes in content (such as launching pop-ups automatically, submitting forms through a mechanism other than a submit button, or opening of new content) can result in loss of focus, anxiety, or confusion for a variety of disabled users.

12. Enable APIs and extensions: When add-ons and extensions are blocked or not supported, disabled users with may not be able to use a site at all. So avoid code and designs that stop browser extensions and other personalization tools (such as browser-based password managers, spell checkers, and others) from working.

Let’s explore next how to get buy-in from our company, particularly when there’s tension between accessibility needs and business goals.

We can make a business case that poor accessibility means fewer users, or that when we make a site more accessible to disabled people it makes it more accessible to everyone. We can also frame it as an ethical choice, where accessibility is the right thing to do.

But sometimes these broad arguments aren’t sufficiently persuasive, so here are a few tips for resolving that tension between accessibility goals and business goals.

The first tip is to perform A/B testing or any other kind of user testing and have the results speak for themselves in terms of conversions revenue or whatever KPIs matter to your company. Testing with real users often gives us guidance about the path forward.

The second tip is to prioritize. Identify the accessibility changes that will have the greatest impact on users, and may have a positive impact on business goals, and apply those win-wins first. For instance, removing unnecessary steps to reach important pages on the site, ensuring that the content is clear and understandable, and using shorter sentences and proper punctuation can all improve your website’s SEO, which will then translate into increased conversions and revenue.

The third tip is to do research, collecting data to understand the long-term impact of your decisions. With this data, you can analyze if accessibility features are better for your product over the long run and, conversely, if a non-accessible feature makes it worse. For instance, adding a huge overlay that takes over the entire screen to force newsletter sign ups may be successful in the short term, but it may do nothing for long term conversions or upgrades, and may also result in the visitor spending less time on the site, all while making the site less accessible.

Build Your Social Media Posting Application with WordPress and Zapier

George Woodard shares how to use Zapier to save time by automating marketing and business workflows. Here is the video.

For folks who write content every day (whether it’s for your own blogs, or if you’re writing, producing or publishing content for clients) and then share it on different social media platforms, the sharing process might take a bit of time. But there’s no need to do the sharing manually: we can automate this process and, as a result, save this bit of time.

This presentation will explain how to automate sharing content from a WordPress site by using Zapier, which is a SaaS product to automate workflows across web applications, and the Advanced Custom Fields plugin (or ACF), which allows us to create relationships across data entities in WordPress.

This process is easy, cheap (or even free, since Zapier has a free tier, and the basic version of ACF is good enough), and gives us the flexibility to be able to publish the content whenever we want, to whatever platforms we choose to, and in however way it should be displayed.

In the ACF plugin, we must create the required fields to input the content and meta data that will be shared on the social media platforms, for the corresponding content type we wish to share content for.

For instance, in this screenshot, the custom fields are “SM Post Summary”, to input the content or the actual message that will be posted to social media; “Hashtags”, to define what topics the content is about; and “Personal Page LinkedIn Post Summary”, to use a more specific voice when posting to LinkedIn. And the ACF field group is attached to the “post” content type, which is typically used for blog posts:

ACF Fields
Creating custom fields with ACF

The following screenshot shows how these ACF fields were filled for a blog post:

Post Fields
Filling the custom fields for a new blog post

We must now hook Zapier, which is where the magic happens. There are 2 pieces of information to configure:

  1. The trigger
  2. The action to execute

The trigger refers to the event that triggers the automation to start working. In our case, we define it to be: whenever a new blog post is created in our WordPress site. We can also configure it with more detailed information, defining the content type to be “post”, so that we share our blog posts only, and the post status to be “publish”, so that no draft posts will get shared.

Zapier Trigger
Zapier trigger

The action is what should be done once the automation is triggered. In our case, to automatically share our blog post to LinkedIn, we define the app to be LinkedIn, and the event to be “Create Share Update”. We must also indicate where to get the data from, which is from the custom fields created earlier on via ACF; the “Content URL” field must point to the blog post’s URL, so that visitors clicking on the shared post on LinkedIn will be directed to the blog post on our site; and the visibility settings allows us to share it with everyone or a subset of people.

Zapier Action
Zapier action

This demonstrates the flexibility of this method, allowing us to maybe create a single hashtag field (or any other piece of content) for all social media platforms, or maybe create independent fields for every platform, and then we map the fields accordingly in Zapier. Likewise, we can define different content image URL fields, so we are able to display a funny thumbnail on Twitter and a serious one on LinkedIn for the same blog post, to better target the audience from each platform.

The set-up is now ready! Now, after creating a new blog post, the Zapier automation comes alive, and this is how the previous content will get shared on LinkedIn:

Zapier automation form example
Post shared on LinkedIn

Images on the Web — past present and future

Adam Silverstein provides a master class on current and upcoming image formats for the web, and how they came to be. Here is the video, and here are the slides.

Adam gives us a great account of the image formats for the web. He starts describing the historical or legacy formats, which we are all familiar with: GIF, JPEG, SVG and PNG. He also explains what are the benefits and drawbacks for each format, and what problem they were created to solve.

Adam then introduces us to the modern image formats, which we must certainly have heard about but not necessarily have used in our sites: WebP (support for which may or may not land in WordPress 6.1), Avif and, most recently, JPEG XL. He also describes the benefits and drawbacks from each of these newer formats.

A brief history of images on the web
A brief history of images on the web

This is the summary for the historical image formats for the web:

FormatAgeAdvantagesDisadvantages
GIF🎂 35 years old✅ Supported Everywhere
✅ Animation
✅ Transparency
✅ Lossless compression
❌ Limited palette (256 colors!)
❌ Compression issues
❌ Uncertain pronunciation (is it “gif” or “jif”? 🤣)
❌ Animation? (All those flashy animations, were they really good for the web?)
JPEG🎂 30 years old✅ Supported everywhere
✅ Lossy compression
✅ Variable compression
✅ 10x size reduction
✅ Full and accurate color
✅ Progressive decoding (but this is not supported in WordPress)
❌ 30 years old, lossy compression has improved!
SVG🎂 21 years old✅ Very widely supported
✅ Images scale sharply to any resolution
✅ Very efficient for illustrations
✅ Styleable with CSS
✅ Scriptable & interactive
❌ Scriptable = security concerns (this is why it is not supported out-of-the-box in WordPress)
❌ Only suitable for certain images (vector images are OK, raster images are not)
PNG🎂 15 years old✅ Supported everywhere
✅ Successor to GIF without license issues
✅ Alpha channel transparency
✅ Full and accurate color
❌ Animation not supported
❌ Only lossless compression

Before describing the modern formats, let’s explore how an image compressed for some image quality will produce a lower image size, and under what situations we can afford to keep reducing the image quality.

If you look at these two images from some distance most likely you can’t really tell the difference between them. Now, the one on the left is one megabyte, and the one on the right is 70% smaller:

Comparing image quality
Comparing quality

You can’t tell the difference because you’re looking at them from far away, but if you get closer to the images, you will notice the pixelation of the one on the right. In other words: context matters. The quality that you need to use for your image depends on where the image is going to be seen, and at what size.

For instance, it’s OK if a tiny thumbnail has some pixelation, but if you’re a photographer and you want your portfolio to be displayed on all its glory at full screen on a desktop computer, then you need to use high quality for your images.

There are 2 methods to find out how suitable is the quality of an image:

  • Via algorithms, such as SSIM (Structural Similarity Index Measure) and PSNR (Peak Signal-to-Noise Ratio)
  • Human based tests, such as using Amazon’s Mechanical Turk to ask thousands people if the compressed image looks as good as the original one

After running these tests over and over again, the resulting data can be plotted as a chart showing how efficient a compression format is for some quality for the image, and we can compare how modern formats do against legacy formats for the same image quality. For instance, the chart below shows that WebP works generally better than JPEG (but not necessarily always, and not for every single image):

Understanding image quality
Understanding image quality

This is the summary for the modern image formats for the web:

FormatAgeAdvantagesDisadvantages
WebP🎂 12 years old✅ Very widely supported (all modern browsers support it)
✅ Lossless and Lossy compression
✅ Animation and Alpha transparency
✅ Full and accurate color
✅ Fast decoding
❌ Slower encoding
❌ Some support coverage gaps (older Safari versions and Outlook on Windows do not support it)
Avif🎂 3 years old✅ Well supported, growing
✅ Lossless and Lossy compression
✅ Animation and Alpha transparency
✅ Full and accurate color
✅ Very high compression
❌ Expensive encoding and decoding
❌ Some support coverage gaps (Safari will support it soon, Edge hopefully too; also, it is not supported until PHP 8.1, and WordPress doesn’t still play well with PHP 8.0)
JPEG XL🎂 1 year old✅ Lossless and Lossy compression
✅ Animation and Alpha transparency
✅ Full and accurate color
✅ Efficient encoding & decoding
✅ Very high compression
✅ Losslessly re-encode JPEGs (but WordPress will not benefit from this feature)
✅ Advanced progressive decoding
❌ Supported nowhere (and possibly this will not change)

Until the newer image formats become available to WordPress, our best strategy to serve images is to use an image CDN, which can negotiate directly with the browser about what’s the best format it can accept, and the CDN will automatically generate the most suitable version of the image, using the most optimal format and even resizing the image to fit the viewport.

And then there’s a bunch of other things that affect image loading that we can consider right now:

  • Do you have blocking CSS in your header? (in which case the browser can’t get to load the image)
  • Do you defer your scripts? (same as above)
  • Are you using an upgraded version of PHP and fast servers? (to improve the time to first byte)
  • Do you “prefetch” important images? (a new feature under exploration at the performance lab plugin)

Conclusion

All the talks from WordCamp US 2022 are online, so go check them out.

Now that WordCamp US 2022 is over, it’s time to start planning for the next big event: WordCamp Asia 2023! The first continent-level WordCamp to ever take place in Asia, it will happen between 17th and 19th February in Bangkok, Thailand. (Btw, their call for speakers is still open for just over 1 week more.) See you there!?


Author Profile Image

Leonardo Losoviz is an open source developer and technical writer, working on integrating innovative paradigms (including Serverless PHP, server-side components, and GraphQL) into WordPress.

Subscribe & Share

If you liked this article, join the conversation on Twitter and subscribe to our free weekly newsletter for more 🙂

MasterWP contains no affiliate links. We’re entirely funded by the sponsors highlighted in blue on each article. In addition to MasterWP, we own WP Wallet, Understrap and Howard Development & Consulting.

Latest Posts