CodeVoyager

Responsive Images: Deep Dive

Edit Page

Responsive Images: Deep Dive

About srcset and important sizes companion

Read more details explaining the srcset and the sizes attributes in the article Responsive Images the Simple Way, Srcset and sizes, Responsive Images in CSS and here Smarter, Lighter, Better Images: A Guide to Optimization.

How WordPress works with srvset/sizes attributes

Older articles on using srcset/sizes in WordPress are explained in Using Responsive Images in WordPress and The Ultimate Guide to Responsive Images in WordPress.

WordPress will always serve all images in srcset and generate sizes as follows (max-width: {{image-width}}px) 100vw, {{image-width}}px, which means that for all resolutions smaller than the size of the image, it will use the full width, and for desktop, it will use the image dimension. If this value needs to be changed, the hook wp_calculate_image_sizes is used. You can find more information about this in the article Responsive Images in WordPress 4.4.

In this article, the process of composing an img tag either as a whole or divided into parts is explained. Refer to the Improve page speed in WordPress with srcset article for more information.

Razni a odlični izvori su:

Art-Directed responsive images design is the concept where the crop or composition of an image changes at breakpoints. This concept is explained in the ancient text WordPress Responsive Images With Art Direction.

The plugin that supports this concept is Enable Responsive Image sa repo na t-hamano/enable-responsive-image: WordPress plugin that adds settings to the Image block to display different images depending on the width of the screen.

image-set: CSS have his srcset counterpart

The srcset attribute is supported on img tags, but it is not supported on CSS background images. However, there is an alternative support for srcset in CSS background images called image-set().

Here are a few examples of how it looks:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


.box {
  background-image: url("large-balloons.jpg"); /* For browsers that do not support image-set */
  background-image: image-set(
    url("large-balloons.webp") type("image/webp"),
    url("large-balloons.jpg")  type("image/jpeg"));
}

.img {
  background-image: url(examples/images/image-384.jpg);
  background-image: 
    -webkit-image-set(
      url(examples/images/image-384.jpg) 1x,
      url(examples/images/image-768.jpg) 2x,
    );
  background-image: 
    image-set(
      url(examples/images/image-384.jpg) 1x,
      url(examples/images/image-768.jpg) 2x,
    );
}

Safari will simply ignore image-set.

We can pair CSS image-set() with type() and this is explained in Notes on CSS image-set() with type().

In this article, everything is nicely explained, and there is also an SCSS mixin that will generate CSS backgrounds with image-set. Additionally, it explains how to use .avif and .webp, so read about it in CSS Background Progressive Enhanced with image-set. There is an illustrative demo available on the Avif/Webp Support Demo Page.

The plugin that can automatically generate additional CSS rules with image-set optimized images is paper-leaf/waldo: A Dynamic Responsive CSS Background Images Extension for WordPress and Other PHP-Based Applications.

What I’ve learned?

  1. In Wordpress using the srcset function, there is no need to use the_post_thumbnail() as we always offer all the images, and the browser will automatically choose which one to use.

  2. Wordpress makes images only within the text automatically responsive, while other images for theme or plugins should be coded by developers using the responsive image functions and filters.

  3. Correct srcset is easy, the hard one is sizes attribute, and that one is crutial.

  4. When the size of the actual file exceeds the expected size by 4kb or more, Google Lighthouse/Pagespeed Insights triggers an improperly sized image.

Problem sa fabričim setovanjem za Wordpress je na mobile a ne na desktop. Naime, slika ima neograničeno srcset veličina, i ako se kaže da je size “medium”, dobićemo sizes atribut sizes="(max-width: 300px) 100vw, 300px". To znači da je na deskopu oko 300px, što je ok na na mobile ne treba da bude to, pošto praktično nikada nije ta veličina?

Ma znaš šta mislim - idealno je birati uvek large, jer to paše za oba, jer se generiše “(max-width: 1024px) 100vw, 1024px” koji za oba radi dovoljno dobro

Device Pixel Ratio (DPR) is the ratio of the hardware and software pixels

Za sve je kriv Pixel Density koji je na Macbook 2x. I to se može setovati, ali ja neću, nego ću testirati na browseru “responsive” i podesiti density na 1. I sve je postalo logično sad i mislim da je ok stalno koristiti large jer pokriva većinu stvari. Međutim, mene nenorlano nervita što u toj situaciji na mobilnom, gde je ponekada density 4, on učitava ubedljivo ogromne fotografije.

Trebalo bi servirati nekako… ali ne može oba,

Serve responsive images  |  Articles  |  web.dev

pa probaj sa device-pixel-ratio odnosno sa -webkit-device-pixel-ratio, oba unutar sizes

Pluginovi koji se bave su svi dosta stari, a ovo je možda plugin koji to može da reši: Responsify WP koji je još i najnoviji, ali ni on ne radi dobro, dok su ostali još stariji. Inače, hookuje se na klasične content filtere, kao “the_content” i ‘post_thumbnail_html"

Time se bavi i SrcSet Responsive Images for WordPress, kao i Just Responsive Images sa repo na justcoded/just-responsive-images: WordPress Plugin to support better responsive images with tag, backgrounds, retina support etc.

Meni je najbitniji parametra - to je “min-resolution: 2dppx” … i normalno u kombinaciji sa min-width i slično. To je moj način da na mobile ne serv-uje retina slike! Jeeeee! Serve responsive images  |  Articles  |  web.dev

Ovaj bookmarklet je linter koji proverava images na strani ausi/respimagelint: Linter for Responsive Images - https://ausi.github.io/respimagelint/

Ne podržava samo Safari ovaj dppx unit, dok svi podržavaju min-resolution: High DPI images for variable pixel densities  |  Articles  |  web.dev

Regardless of what devices you ultimately add to your list, you must not forget about the most important of them – Motorola Moto G Power. That’s right, tools like Lighthouse or PageSpeed Insights always test mobile apps based on this phone’s screen. Google, the creator of those testing tools, used to own Motorola, so that explains why this particular device was chosen.

We have noticed that a new device is being used for the Lighthouse mobile test. It used to be the Moto G4 and now it’s the Moto G Power. That means the new size width of the device is 412px x 823px.

What’s New in Lighthouse 6.0  |  Articles  |  web.dev Update mobile device preset to match newer devices · Issue #14256 · GoogleChrome/lighthouse Lighthouse 10 Update (2023) - Mobile device size changed

U odličnom tekstu o responsive images ali i o Google Lighthouse Come on, load faster! How to make images responsive? | TSH.io sam pronašao zanimljice varke, a jedna od njih je i da se CSS-attached images kao backgrounds uopšte ne proveravaju.

Responsive images causes performance issues on high-resolution devices

Mnogi se bave ovim problemom. Čak je i Wordpress mnogo diskutovao o tome, ali nije nigde stiglo. Add additional default image sizes (by default and account for 2x/3x/retina/hidpi displays). Ma ima gomila otvorenih i nikada ne završenih diskusija.

Jedna od boljih diskusija Enhancement: images handling · Issue #6177 · WordPress/gutenberg

Inače, moje rešenje je i offical WP primenio još WordPress/wp-content/themes/twentynineteen/inc/template-functions.php at f6fc8025c48509cba63982daae3c99901056840a · WordPress/WordPress 2019 godine.

Controlling Responsive Image Sizes in WordPress objašnjava kako iskoristii hooks da promeniš šta generiše Wordpress.

Neki od korisnik hookova su max_srcset_image_width i wp_image_add_srcset_and_sizes

Interesing hooks: wp_calculate_image_srcset

In file wp-includes/class-wp-image-editor.php

function generate_filename
# return trailingslashit( $dir ) . "{$name}-{$suffix}.{$new_ext}";
return apply_filters( 'image_editor_generate_filename', trailingslashit( $dir ) . "{$name}-{$suffix}.{$new_ext}" );

WebP Express se hookuje na:

add_filter( 'the_content', 'webPExpressAlterHtml', 10000 ); // priority big, so it will be executed last
add_filter( 'the_excerpt', 'webPExpressAlterHtml', 10000 );
add_filter( 'post_thumbnail_html', 'webPExpressAlterHtml');

EWWW je super jer može da konvertje JPEG sa jpegtran ali možda mi je samo WebP potreban - a ima i service podršku

  • srcset dodaje sam WP

  • webp radi i EWWW i WebP-EX, ali samo gde je sve pravilno

  • CSS nigde ne radi, ni srcset ni slično

date 04. Aug 2023 | modified 17. Aug 2024
filename: Plugins » Uploads » Images » Srcset & Sizes » Deep Dive
Article Content