Lighthouse report on Flarum (Do not have explicit width and height)

rdn

Image elements do not have explicit width and height
Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

Learn moreCLS
https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions

Image with issue is the Logo.

CyberGene

I think this might be the reason why Flarum behaves very badly on Safari and the auto-scroll doesn’t work correctly most of the time.

clarkwinkelmann

We are aware of this, but it's not considered a bug.

The problem is, for external image links, which are the only available image types built into Flarum, we can't know the height of the image without fetching it server-side when the post is saved. That's something an extension could implement. Even if we wanted to make this feature standard, there isn't any good place to put the code, since both the bbcode and markdown extensions add an image tag. This would be best as a separate extension in any case.

Extensions that implement image upload should add those attributes to every images. I'm not sure whether FoF Upload has this feature implemented though. The image preview template in FoF Upload probably isn't impacted since its height is fixed with CSS. The markdown template definitely doesn't have it.

CyberGene

clarkwinkelmann how should this be implemented by an extension? As far as I can see the template I use for the upload plugin just creates IMG tag surrounded with URL tag. What functionality in Flarum turns this into proper HTML and do you mean there can be an extension that replaces this functionality by its own renderer which can insert the image dimensions into the HTML? So, I guess it’s possible to write my own FoF Upload template which will generate something custom, e.g.:
[extimg width=X height=Y]https://mydomain.com/image.jpg[/extimg]

and then the other extension will recognize those custom tags, read the stored dimensions and generate the HTML img tags containing those dimensions. Is that the idea? As I have stated many times, I’d love to implement that but I’m a Java devloper and PHP looks almost like Chinese to me 😀 But I will have to start experimenting sooner or later…

rdn

Hoping at-least in the next Flarum version the logo CLS issue is fixed.

Thanks @clarkwinkelmann

clarkwinkelmann

Oh I missed the part about the logo... I've never seen any issue with the logo since its height is defined with CSS, but I can understand some analysis tools prefer to have the height pre-loaded. I'm not sure if we get any real gain to implement this for the logo since the height is in the CSS, and without the CSS the forum is pretty much broken anyway.

rdn

The only gain I think is CLS Score from Google.

clarkwinkelmann

CyberGene unfortunately I don't think it's part of the attributes that FoF Upload provides to its templates, so additional code would be needed to open the file path given by FoF Upload to extract the size. Unless you enable the image resize option I'm not even sure FoF Upload reads all files, it just copies them to the correct location. It shouldn't require too much work to add an option to read all image files and extract their width/height and save it to a new database column. But if you have a mix of images and other files I'm not sure how FoF Upload could know which files are images for sure before trying to decode their width/height. It could hurt performance if it tries to open some very large files that look like images but aren't.

The bbcode [img] seems to already support width and height parameters https://s9etextformatter.readthedocs.io/Plugins/BBCodes/Add_from_the_repository/#img

I'm not sure about the Markdown tag, I don't think there's a way to provide width/height https://s9etextformatter.readthedocs.io/Plugins/Litedown/Syntax/#images

CyberGene

Another idea I have is to have an extension that would work with the regular Markdown or BBcode image tags and will get the image dimensions server side and store them in the database with the image URL as primary key. This will also work for existing images, so whenever one opens an old post with an image for which there is no DB record, the dimensions will be obtained server-side and stored for future usage. There might be some expiration, so that once a week image dimensions would be re-read server-side, in case the external image is replaced. Is this possible through an extension?

P.S. There should also be a table that stores which image is used by which post. If a post is deleted, that table will also be updated and once an image is no longer used by any post, the record in the dimension table will also be deleted, so that the table doesn’t contain orphan image records.