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

Viewed 2167

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!

5 Answers

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.

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

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.

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.

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

Related