Purpose of Topic thumbnail image data-ratio and width settings

[Clover13]

What is the purpose of these and what is the impact of removing them from the forums_posts.post data?

They are contained within the forums_posts.post data, and then used for the HTML rendered in the image display of an attachment in a forum Topic.  These data-ratio and width values appear to be created during thumbnail creation process and correlate to the AdminCP Posting settings for image sizing at the time of the thumbnail creation, however I am not sure what their purpose is.  These reflect what the original image was resized into as a thumbnail, but the image itself already has those preferred size settings intrinsically.  Why does it also need to be statically embedded within the HTML itself (and also statically stored in the DB)?

The reason I ask is because in the event you want to revise your image sizing and rebuild your thumbnails, all of those forums_posts.post rows will need to also be recalculated and updated.  If not and you resize (downsize) the thumbnails but leave the DB as-is, per what I've observed, then the rendered size of the image will be larger than the intrinsic size of the image and forced to display that rendered sizing (i.e. enlarged) based on the IMG width property.  Without the IMG width property (being in the forums_posts.post HTML), it would display the image's intrinsic value which matches the configured value in the AdminCP settings.

[Marc Stridgen]

Ive moved this to our developer connect forum for you, which is better placed for responding to this

[Clover13]

FWIW, my current solution to this is to drive intrinsic sizing via custom CSS, while leaving the DB data alone.  So the original width of a resized thumbnail may be stored in the DB with a larger value as part of the IMG element in the HTML, but once I resize (downsize) the actual image, I can force a max-content width and it will display correctly.  One would probably never upsize an existing image due to pixelation.

Original image before resizing is 900x1200.  It is stored in the DB with a width="900" (as seen in the code example below).

Resized image is 720x960 which is done via an external process, but the DB has not been updated (and may not need to be).

Custom CSS:

/* Override the original thumbnail image sizing to use the intrinsic sizing due to the static width defined and stored in the DB as HTML during the thumbnailing process */
.ipsType_richText img.ipsImage.ipsImage_thumbnailed {
  width: max-content !important;
}

Original IMG element generated from thumbnailing process and stored as HTML in the DB:

<img class="ipsImage ipsImage_thumbnailed" data-fileid="11639" data-ratio="133.33" width="900" alt="IMG_7522.thumb.jpeg.2519c5354c6b4b35301e60eadcf52944.jpeg" data-src="//cdn.domain.com/monthly_2023_07/IMG_7522.thumb.jpeg.2519c5354c6b4b35301e60eadcf52944.jpeg" src="//cdn.domain.com/monthly_2023_07/IMG_7522.thumb.jpeg.2519c5354c6b4b35301e60eadcf52944.jpeg" style="height: auto;" data-loaded="true">

Without the CSS, the image will have an intrinsic size of 720x960 but display with a rendered size of 900x1200.
With the CSS, the image displays as 720x960.

[Stuart Silvester]

They are used for lazy loading to reduce the page jumping around as the images load in. It's not possible to rebuild attachment thumbnails for previous content though.

[Clover13]

8 minutes ago, Stuart Silvester said:

They are used for lazy loading to reduce the page jumping around as the images load in. It's not possible to rebuild attachment thumbnails for previous content though.

Not possible via IPS, but an external process can be used.  I'm just trying to figure out what else has to change to get things working as they should.  I'll test out the lazy loading and page jumping impact to CLS with my current solution.

[Stuart Silvester]

3 minutes ago, Clover13 said:

Not possible via IPS, but an external process can be used.  I'm just trying to figure out what else has to change to get things working as they should.  I'll test out the lazy loading and page jumping impact to CLS with my current solution.

I wouldn't resize images outside of the software, the dimensions etc are stored and may cause issues.

One thing you can look at is losslessly optimizing the images whilst keeping them the same size, there are many tools available for this.

[Clover13]

1 hour ago, Stuart Silvester said:

I wouldn't resize images outside of the software, the dimensions etc are stored and may cause issues.

One thing you can look at is losslessly optimizing the images whilst keeping them the same size, there are many tools available for this.

Too late! 😬

Images just weren't presenting well on desktop even though they fit, it wasn't a very fluid viewing experience because they were too big.  Many also had a max quality setting, which was impacting page load times too much.   So downsizing them to a better size and quality was needed.

I'll just have to address any issues that may come up.  Worst case I guess will be scripting something to query posts, parse images, read image properties, calc width/height and ratios, then update the forums_posts.post data.  Not something I want to do if I don't have to though 🙂

Moving forward things should be all good on new uploads.

CLS seems OK after the resizing and custom CSS, testing against a Topic page that had many resized images.

Desktop CLS:  0.045
Mobile CLS:  0.022

FWIW, I used ImageMagick's mogrify to do the resizing and quality changes, which is the same as I have configured in IPS now.