XF 2.3 Image optimization, enhanced image resizing, and more!

We hope you're enjoying the "Have you seen...?" series for XenForo 2.3 so far. We still have quite a bit more to show you while we work on adding the last finishing touches before we unleash XenForo 2.3 on this very forum.

This week we're going to talk about various improvements we have made which are mostly focused around images.

Check out the index below to skip to a specific post:

• Image optimization with WebP support
• Enhanced image resizing
• Use any emoji for smilies and reactions
• Size variants for the admin asset uploader
• Tracking sizes for embedded images

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

While that is all for this week, we continue next week! We will be focusing on only a single new feature next week, it is a doozy and we're excited to hook you even further into the exciting world of XenForo 2.3

 

[Chris D]

We do report dimensions for all images - attachments, image proxy and those through `` tags. I'm not sure what you're expecting to see, but the images are stored in the embed_metadata field of each post and looks like this:

{"images":{"8e8f1c89fb4bb4ed4d65464f1853db07":{"url":"https:\/\/xenforo.com\/community\/data\/avatars\/l\/11\/11388.jpg?1701366656","width":192,"height":192}}}

The way to know that they've been recorded is by looking at the HTML source/Inspect element in your browser. The above image will have width and height attributes both being 192 in this case.

 

[Kirby]

I can reproduce the effect mentioned by @Chromaniac on a local 2.3.0 Beta 4; image proxy turned off

Within one post:

Image inserted via insert image dialog > URL
BB-Code
[IMG size="192x192"]https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656[/IMG]

HTML

<img src="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" data-url="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" class="bbImage" data-zoom-target="1" style="" alt="11388.jpg" title="" width="" height="" loading="lazy">

Image inserted manually
BB-Code
[img]https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656[/img]

HTML

<img src="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" data-url="https://xenforo.com/community/data/avatars/l/11/11388.jpg?1701366656" class="bbImage" data-zoom-target="1" style="" alt="11388.jpg" title="" width="" height="" loading="lazy">

So for images inserted via dialog the [img] tag has attribute size - a manually inserted [img] does not.

In both cases the generated HTML does not have width / height set; this happens because the analyzer code unconditionally sets $this->images[$hash], so if an image is used multiple times within the same post and a later usage does not have attribute size this overwrites the previous value.

If the order is switched (eg. [img] without size first followed by [img] with size both instances have width / height set in HTML).

IMHO width / height should always be recorded, no matter if the [img] has attribute size or not or if the image proxy is enabled or not.

 

[Chromaniac]

Can you check if enabling proxy would fetch and store dimensions of images inserted manually or past images that didn't have dimensions saved? It doesn't seem to be for me. Thanks!

I was hoping to enable proxy for all images for a month to have dimensions updated for bulk of the images accessed in posts

I also ran the post rebuild process but that didn't do this as well though I suppose it was too much to expect I suppose.

 

[Chris D]

We have the image proxy enabled here and clearly it works. But there does appear to be an issue if image proxy is disabled. We had this bug during development so there may have been a regression there.

If there's a bug here though, please post a bug report. Otherwise, let's move this to a support thread.

HYS threads should not be the first choice when it comes to these types of discussions, even if they do relate to the feature being discussed.

 

[ŽivaAkcija]

so far this is most cunning plan ever