Why unicode emojis in wordpress displayed with <img> tag?

Question

In wordpress when I use a unicode emoji like "😑" or others, wordpress convert emoji character to <img> tag with src="emoji.svg" and alt="😑" like this:

<img draggable="false" class="emoji" alt="😑" src="https://s.w.org/images/core/emoji/11/svg/1f611.svg">

Imagine I want to use 50 emoji in a text, this is very bad in SEO and for site performance. Is there a way to keep the emoji as unicode? Like here on Stack Overflow and other websites?

Thanks a lot!

Tova

Are you sure it's WordPress that's doing this, and it's not the theme or a plugin? – Cameroncameroon

yes absolutely. – Tova

Answer 1

There is a great answer here on wordpress development that tells you how to disable the svg styled icons, its this line:

add_filter( 'emoji_svg_url', '__return_false' );

Also check out the other hooks that you might need to fully disable emojis.

Wordpress uses svg emojis for two reasons I think:

1. Their emojis are more "flat" and therefore look more modern
2. When being used as images, emojis can have different sizes than the text sourrounding them.

Disbursement

The plugin from the answer showed a significant performance boost with Google PageSpeed, since my site contains many emojis. The downside is that the plugin has not been updated for 9 months, so I might use the code instead. – Spinescent

Answer 2

You can try to check this settings - wordpress dashboard > settings > writing > Convert emoticons to graphics

Inkwell

just in older WP versions this option is available and there is no problem in both modes . i think this option just convert ":-|" => "😐" – Tova

Yeah ignore this answer it does not help. – Silvasilvain

Answer 3

I have no idea how to undo this in WP.

As for 'why' they do it: I would think it has to do with unicode support: it's pretty good right now, but I imagine it wasn't always that way. Images are universally supported by browsers.

Cameroncameroon

Answer 4

Seriously, I’d rather keep the way Wordpress handle emojis, the reason below:

Windows 7 or below doesn’t have built in emoji fonts, so if it comes to an emoji Unicode, it will show as a black white square or weird plain text in any browser.

This problem is related with operating system, it has nothing to do with browser version.

The worst thing is, you can’t control what operating system your visitors use, and you can’t just block them out.

Wordpress makes emojis to svg images so the low end user will see emojis normally, not perfect, but it does the job.

Trilobite

You are right, but it depends on the target audience and the designer's decision. I mean, they're just smileys and such, so maybe designer can say "I'm fine with users with Win 7 seeing squares, idc" :P Not all scenarios will need that. And they do not show properly when strike-through – Dismuke

Thank you @JuanmaGuerrero for your reply, for some designers, this may not be important, but as an "amateur designer" LOL , I very much don't want my users to see a confusing, inconsistent, and error-like appearance. Blame it on Microsoft, pushing system upgrades shouldn’t be indecisive. – Trilobite

Answer 5

<img draggable="false" class="emoji" alt="💪‍" src="https://s.w.org/images/core/emoji/11/svg/1f611.svg">

Toponym

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Cestus