Don’t we all want to develop fast websites? WordPress fastest page speeds using background images <srcset>, <img>, <picture>, @media, @2x retina

ChrisP

Member
Joined
Apr 27, 2020
Messages
8
Hi WordPress developers,

This topic has been covered numerous times in many places. However, there has never been a clear-cut answer with real website EXAMPLES in one single page. I hope to change that here with your help 😊

We all know images are a resource hog. Our developer has used many tricks to make the website load as fast as possible (@media, srcset, picture element, Imagify, removing all metadata before uploading, WP Rocket lazy loading, CDN etc.). However, there are still unanswered questions as to “are we doing the right thing? Are we using the correct tools?

When answering these questions, please keep in mind that this is for page speed and fixing errors using GTMetrix, Pages Speed Insights, Pingdom etc. Errors like, “the following images are resized in HTML or CSS. Serving scaled images could save 14.8KiB (92% reduction)…” “example.png is resized in HTML or CSS from 1000x1000 to 280x280. Serving a scaled image could save 14.8KiB (92% reduction).

Video tutorials would be ideal!

Background Images

When developing a site, how do you code responsive background images? Can you provide examples on a live website?

Recently, we’ve been using the <picture> element for background images so we can take advantage of the various thumbnail sizes.

How to properly code the <picture> element so the browsers know which image to choose from the source set?

Katie from Use WebP images states:

Page speed gotcha - image tag as last.PNG


Our developer CANNOT make the default WP setting to show the image tag as the last element in the source set.


Page speed srcset code example.png


Retina Display

How do you deal with retina images to display properly on the website?



Thank you,

Chris
 

Weekly Digest

Weekly Digest
Subscribe/Unsubscribe

Trending: Most Viewed

  Promoted Posts

New advertising option: A review of your product or service posted by a Sterling Sky employee. This will also be shared on the Sterling Sky & LSF Twitter accounts, our Facebook group, LinkedIn, and both newsletters. More...

  Local University Guide

Google Product Exert


Top