Skip to content

Commit

Permalink
Add note on subjectivity
Browse files Browse the repository at this point in the history
  • Loading branch information
csswizardry committed Sep 29, 2023
1 parent b49ef99 commit d13131b
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 1 deletion.
28 changes: 27 additions & 1 deletion _posts/2023-09-28-the-ultimate-lqip-lcp-technique.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ against the spirit of web performance. Ensure that your LQIP is still of
sufficient quality to be useful, and follow it up immediately with your
full-quality image. Poor quality images, particularly where ecommerce is
concerned, are <a
href="https://www.businesswire.com/news/home/20230517005168/en/Cloudinary-Global-E-Commerce-Survey-Reveals-Visual-Content-Can-Help-Reduce-Returns-by-One-Third">particularly
href="https://www.businesswire.com/news/home/20230517005168/en/Cloudinary-Global-E-Commerce-Survey-Reveals-Visual-Content-Can-Help-Reduce-Returns-by-One-Third">especially
harmful</a>.</p>

## Don’t Upscale Your LQIP
Expand Down Expand Up @@ -521,6 +521,32 @@ a _really_ small number. Play around with numerous different images from your
site to ensure whatever quality setting you choose doesn’t ever take you _below_
0.05BPP.

### Use Your Judgement

If you do manage to get your image all the way down to your target filesize,
there’s every chance it will be _too_ low quality to be visually acceptable,
even if it does satisfy LCP’s technical requirements.

Here’s a current client’s product image compressed down to 4KB (their target was
actually 3.015KB, but even the most aggressive settings couldn’t get me all the
way):

<figure>
<img src="/wp-content/uploads/2023/09/too-far.jpg" width="760" height="577" alt="" loading="lazy">
</figure>

This is visually unacceptable as an LCP candidate, even though it ticks every
box in the spec. My advice here—and it’s very subjective—is that you shouldn’t
accept an LQIP–LCP that you wouldn’t be happy for a user to look at for any
period of time.

In this particular instance, I bumped the quality up to 10, which came in at
12KB, was still super fast, but was visually much more acceptable.

<figure>
<img src="/wp-content/uploads/2023/09/just-right.jpg" width="760" height="577" alt="" loading="lazy">
</figure>

## Summary

In their attempts to prevent people gaming the system, spec writers have had to
Expand Down
Binary file added wp-content/uploads/2023/09/just-right.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wp-content/uploads/2023/09/too-far.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d13131b

Please sign in to comment.