Make WordPress Core

Opened 6 years ago

Last modified 17 months ago

#12134 reviewing enhancement

Add image dimensions to smiley img element

Reported by: niallkennedy Owned by: nacin
Milestone: Future Release Priority: normal
Severity: normal Version: 3.0
Component: Formatting Keywords: dev-feedback
Focuses: Cc:


All smileys are 15x15. Add dimensions to the img element to avoid a double paint by web browsers during page load.

Attachments (1)

formatting.diff (468 bytes) - added by niallkennedy 6 years ago.
img width and height for smileys

Download all attachments as: .zip

Change History (9)

@niallkennedy6 years ago

img width and height for smileys

comment:1 @scribu6 years ago

  • Keywords reporter-feedback added

Why would this be useful, again?

Can't you set the width through CSS?

comment:2 @nacin6 years ago

  • Keywords needs-patch added; has-patch removed

Since the smiley URL passes through a filter, a theme can implement their own, and those may not be 15 x 15.

By specifying image dimensions in HTML, you prevent the browser from reflowing and repainting once the images are loaded.

For reference, here's a quick write-up on it from Page Speed:

comment:3 @nacin6 years ago

  • Keywords reporter-feedback removed

comment:4 @nacin5 years ago

  • Owner set to nacin
  • Status changed from new to reviewing

comment:5 @nacin5 years ago

  • Milestone changed from Unassigned to Future Release

Future for now.

comment:6 @nacin5 years ago

There's a filter on the smiley src URL. Can't say we will be able to do this.

comment:7 @solarissmoke5 years ago

  • Keywords dev-feedback added; needs-patch removed

Could we add a filter for the image dimensions?

$dims = apply_filters( 'smiley_dimensions', array( 15, 15 ) );
return " <img src='$srcurl' alt='$smiley_masked' class='wp-smiley' width='{$dims[0]}' height='{$dims[1]}' /> ";

comment:8 @miqrogroove17 months ago

It would make sense to offer a filter that does nothing by default. I think that would be the most useful way for theme developers to modify smilies output.

Note: See TracTickets for help on using tickets.