SRCSET with Relative Image Sizing as additional Responsive Image method
-
The Responsive Images mechanism of WordPress, to which Better Images can add extra retina dimensions, works by resizing the arbitrary dimensioned source image to certain target pixel dimensions like:
150x150 (thumbnail)
,1024x1024 (large)
, etc.
I propose an extra alternative mechanism: Relative Image Resizing, intended for screenshots and screendesigns, which would work like this:(1) During upload if an image provides a certain signal — such as a filename ending in
@\d(.\d)*x
like@4x
@3x
@1.5x
or the image metadata contains PPI information and that is in a certain density range (e.g. 200-220 PPI is interpreted as@3x
) — then Better Image which hooks into the upload analysis procedure of WordPress decides that this image goes into the relative image resizing processing pipe.(2) Instead of resizing to a fixed target size it resizes to all the smaller multiples from the relative image set (e.g. if the source is
@4x
itself then so all the smaller multiples in the set like@3x
@2.5x
@2x
@1.5x
@1x)
. That relative image set can be managed/customized in a similar fashion like the fixed image size set.(3) For delivery the plugin creates the
srcset
with the\d+w
notation. If the original is e.g.[email protected] 4000w
then the rest of thesrcset
is[email protected] 3000w, [email protected] 2500w, [email protected] 2000w, [email protected] 1000w
.
- The topic ‘SRCSET with Relative Image Sizing as additional Responsive Image method’ is closed to new replies.