Welcome to WebmasterWorld Guest from 54.152.38.154

Forum Moderators: not2easy

Message Too Old, No Replies

Proper element for a sprite

     
7:13 am on Jul 27, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


I'm putting this in CSS since sprites are CSS, but this is really an HTML question.

What do you guys consider to be the "proper" element to use for a sprite? I typically use a DIV, like this:

.sprite {
background:url('//example.com/sprite_emoticon.png');
width: 19px;
height: 19px
}

.first { background-position: 0 0 }

// HTML
<div class="sprite first"></div>


But this isn't really right, because a DIV is a block element, where a usual IMG would be inline. But I don't know of other inline elements that support width and height.

So in my case, where I'm using the sprite for emojis, it's common for me to have something entered by the user like:

<span style="font-family: Arial; font-size: 140%"><div class="sprite first"></div> <div class="sprite first"></div> Hey!</span>


Obviously I can change the display to inline-block, which is what I've been doing, but that doesn't validate.

The most logical solution would seem to be the IMG element, but it requires SRC, which obviously isn't used here.

So what's the proper solution in order to validate?
6:34 pm on July 27, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


Have you tried putting the sprite in a span? Its height will be determined by the surrounding text, while its width is determined by its content--for an emoji, probably best to say &emsp; to make sure there's enough room.

There's no one appropriate element. The first place I ever used sprites was with <td> because the whole thing is laid out as a table (i.e. there's a relationship in two dimensions); before going to sprites, each cell had its own little image.
6:54 pm on July 27, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


Have you tried putting the sprite in a span?

I have, but since it's an inline element I usually change the display to inline-block, and then manually set the width and height. Changing the default display makes it seem like it's not the right choice, either; it validates, but only because it's sort of tricking the validator.

One sprites that are clickable I use <a>, which makes the most sense because it's clickable (even though I still have to change the display to block or inline-block). But since these emojis aren't clickable, and there will be millions of them throughout the site, I was hoping there might be a better option for them.
7:45 pm on July 27, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


it validates, but only because it's sort of tricking the validator.
Well, sometimes that’s what you have to do ;) If you weren't supposed to change default displays, never ever, the {display} CSS feature would not exist.
8:08 pm on July 27, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


True! And in all honesty, I don't understand why a block isn't supposed to be inside of an inline element, anyway... there's no real reason why this wouldn't be fine, other than "the powers that be don't like it"...

<font style="font-family: Arial">
<b>
<div>csdude55: Hey there!</div>
<div>lucy24: Hey there, yourself!</div>
</b>
</font>


By the same logic, though, using a DIV for the sprite emoji with the display changed to inline-block should be fine... but it doesn't validate.

Since I'm rebuilding everything anyway, I'm trying to make everything validate to see if it has any impact on Adsense value or search engine placement. It's probably a wasted effort, but it's just time and money...
2:25 am on July 28, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


There are some inline elements that I've never, ever used or seen, but it looks like they're standard. Can you see any reason why I couldn't/shouldn't use one of them instead of a SPAN and style it to always represent an emoji?

tt
abbr
acronym
cite
code
dfn
kbd
samp
var
bdo
q


I'm specifically looking at <q>, I just think I'd have to include this in the CSS to remove the " " from browsers that plug them in:

q { quotes: none }
q:before,q:after { content: '' }


But it would save 4-6 bytes per emoji, and on a page with hundreds of them that could add up to a fraction of a section on the load time...
4:22 am on July 28, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


Can you see any reason why I couldn't/shouldn't use one of them instead of a SPAN and style it to always represent an emoji?
I have a strong feeling this is Strictly Forbidden ...

... and I have done the exact same identical thing myself, so hey, why not. My current favorite is
u {text-decoration: none; padding-left: .16em;}
which I use when I want to reproduce the spaced abbreviations of an early book (I<u>’m</u>, there<u>’s</u>, you<u>’ve</u> = I ’m, there ’s, you ’ve and so on) but don’t want to clutter up the html with <span class = "space"> all over the place, and definitely don't want to use “real” spaces.

Stick with an element you're certain you will never use--at least not in the same document. (Do you really never use either <tt> or <kbd>? The latter is apparently the HTML5 name for the former, but why go to the extra byte.)

Psst! Here's an even niftier trick I discovered by accident. It’s useful for testing and preview purposes, though you can’t do it on a live site. Make up an element, like <f> or <sc>, and style it in your CSS. Most browsers, although not MSIE (duh), will happily display these nonexistent elements just the way you've told them to.
7:47 am on Aug 12, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


Well, I've found an interesting little glitch that's messing up my plan of using a <q> tag (or any other tag like it) for the sprite.

Within the contenteditable, I insert it using document.execCommand('insertHTML', false, value). Which works great, except in Firefox. In FF, if the user inserts an emoji sprite, then blurs the contenteditable, then focuses back, the caret is inside the Q node and there's no way to get out of it.

Meaning, it goes like <div class="sprite first">|</div> (where | is the caret position). Then, when the user types or inserts another emoji, it ends up like <div class="sprite first">Test</div>, or <div class="sprite first"><div class="sprite first">Test</div></div>.

I had originally used a regex to fix this, but then after I re-insert the corrected HTML there's no apparent way to put the caret back where it was. So it's still confusing to the end user.

Which puts me back to the drawing board, with only 2 1/2 weeks wasted...

Now I'm thinking that the best solution is a void element; ie, one without an ending tag. Then, FF can't focus inside of the node, right?

Whiiiiiich... takes me back to using the IMG tag! LOL

After some playing around, I think that this might be the best option:


.sprite {
background:url('//example.com/sprite_emoticon.png');
width: 19px;
height: 19px
}

.first { background-position: 0 0 }

// HTML
<img src="xxxx" class="sprite first" alt="">


If you guys agree, then which do you think would be the best option for the src?

// This is 26 bytes, but I only got it to load once and now it won't load again...?
// from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

// This is a 1px transparent gif that does work
// from https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

// Or should I use a 1x1 gif on my server that can be cached?
https://example.com/spacer.gif
2:07 pm on Aug 12, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4297
votes: 288


Many years ago I was using a 1x1px clear .gif file where an element needed to have an image as part of a script. It was fine for its purpose but when I changed the pages to responsive layouts I looked at every resource used and switched to a 1x1px clear .png file because the difference was surprising. Slightly over 800 bytes for the .gif vs. just over 100 bytes for the ,png.

If at all possible, a self-hosted 1x1 .png file can make a difference when the potential usage may mean the image is used repeatedly on any page. Self hosted images will always load faster and as mentioned, can be cached at first load.

BTW, it is possible that the one that won't load for you again was blocked. No matter how tiny, usually only a tracking business would appreciate people using their hosted image. ;)

5:39 pm on Aug 12, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:762
votes: 153


data:image

This is what I use as soon as I can.

- Since it's embed into the page, or css (or js) , it avoids network round-trip.

- It benefits from the gz compression of the file in which it's embedded.

- If you have to embed several times the same data:image, keep in mind that the file in which it's embedded is gz compressed, a compression method which handles repeated blocks of characters/bytes. So if you embed 10 times the same data:image block, the first will be stored as it, but the 9 others will be stored on way less bytes.

- If embed into an external CSS or JS , then it's cached with the file too.

- I mention JS, because you can store your data:image into a js variable , and then use this variable to insert the image where you want into your page.
10:16 pm on Aug 12, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


@not2easy:

Many years ago I was using a 1x1px clear .gif file where an element needed to have an image as part of a script.

Same here... before CSS I had to make use of a spacer image, which was the way of the day back then! lol Kids today have no idea how easy they have it, do they?

It was fine for its purpose but when I changed the pages to responsive layouts I looked at every resource used and switched to a 1x1px clear .png file because the difference was surprising. Slightly over 800 bytes for the .gif vs. just over 100 bytes for the ,png.

Interesting! I had to test.

Using my trusty-dusty PSP 4.12 (which I still love and use more than anything else) I created a 1x1 transparent GIF with 2 colors, then saved it as a transparent PNG separately. Then I used OptiPNG to compress the PNG to a level of 9.

The 1x1 GIF is 42 bytes, and the 1x1 PNG is 67 bytes.

It's also notable that when I checked the Performance in Chrome Dev Tools, the first load of the 42 byte GIF had 287B transferred, where the 67 byte PNG had 312B transferred (I'm guessing those are bits, not bytes). The second load on both was 0B.

If at all possible, a self-hosted 1x1 .png file can make a difference when the potential usage may mean the image is used repeatedly on any page. Self hosted images will always load faster and as mentioned, can be cached at first load.

I'm going to expand on this a little in a second when I reply to Dimitri...

BTW, it is possible that the one that won't load for you again was blocked. No matter how tiny, usually only a tracking business would appreciate people using their hosted image. ;)

Is that how the data:image usage works? I thought that no HTTP connection was made at all, so it wouldn't be loaded from anyone's server?


@Dimitri:

- Since it's embed into the page, or css (or js) , it avoids network round-trip.

- It benefits from the gz compression of the file in which it's embedded.

- If you have to embed several times the same data:image, keep in mind that the file in which it's embedded is gz compressed, a compression method which handles repeated blocks of characters/bytes. So if you embed 10 times the same data:image block, the first will be stored as it, but the 9 others will be stored on way less bytes.

In my case, this is an emoji on a message board. Each page has 20 posts, so it's easily possible that the image will be loaded over 100 times on a single page.

If I use a 1x1 image, am I correct that the first load would have an HTTP connection, but that's all? Versus using data:image would have no HTTP connections, ever? That's how it appears in the Chrome Dev Tools.

I'm doing some testing, and the first load of the 1x1 GIF is loading from disk cache in 287ms, the 1x1 PNG is loading from "disk cache" in 312ms, and the data:image is loading from "memory cache" but just says "Pending" for time. The second load is 13ms for both of the 1x1 images.

Then I created an HTML page that just loaded the GIF, and a second HTML page that just loaded the data:image.

The first load of the page with the 1x1 GIF (using a Ctrl-F5 hard refresh) was 612B, and the second load was 325B.

Both the first and second load of the page with the data:image was 350B.

So it looks like the first load with the data:image is significantly faster than the 1x1, but subsequent loads are slightly slower.

- If embed into an external CSS or JS , then it's cached with the file too.

This is interesting... I'm assuming that you mean something like:

// CSS
img .sprite {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
}

// HTML
<img class="sprite first" alt="">


But would that validate? I don't actually "need" the image at all, I'm just plugging it in so that it will validate. But if having it in the CSS will validate then that's definitely the best route!
9:19 am on Aug 16, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:762
votes: 153


emoji

Didn't you try to simply use the unicode character ?

For example:
&#x1F642;

is a smile.

[unicode.org...]
6:29 pm on Aug 16, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


Hmph. Where you were about a month ago? LOL
6:55 pm on Aug 16, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


Well, ###. I'd assumed all along that you'd chosen not to display them as text because of variable font support among different devices, requiring a graphic fallback. (And just try making a human understand that just because I can see something, doesn’t mean you can.)
7:38 pm on Aug 16, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


Nope, I had no idea they were more or less universally recognized... I remember posting awhile back about emojis from a phone showing up as 😊, and I never really could find a resolution so I thought maybe that was just how they were encoded.

It's one of those things where, if you don't know it exists or don't know what it's called, then you can't really Google it! lol

I'm not sure if I'll change everything now, though; I've spent way too much time on this relatively small part of the project, so while this opens up a lot more options I just don't know if it's worth scrapping everything and starting over. It might just have to be something that I'll come back to after I finish everything else.
10:22 pm on Aug 16, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


I thought maybe that was just how they were encoded
In a sense it is how they’re encoded, but it only gets messy if the device and/or database and/or page switches encodings in transit. Picturesque strings like the ones you quoted are almost always the result of something in UTF-8 being reinterpreted as some variant of Latin-1.
8:28 am on Aug 17, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:762
votes: 153


Hmph. Where you were about a month ago? LOL

Sorry, I might not have understood correctly what you were really trying to achieve.
6:53 pm on Aug 17, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


In a sense it is how they’re encoded, but it only gets messy if the device and/or database and/or page switches encodings in transit. Picturesque strings like the ones you quoted are almost always the result of something in UTF-8 being reinterpreted as some variant of Latin-1.

I gotcha, and I do think this is the problem... I'm just not sure where. I remember having to change encoding on something a long time ago to iso-8859-1 because the news feed I was importing was messing up, but that would have been 5+ years ago and it was just on that one section... still, it's entirely possible that I changed it somewhere else, too, and don't remember. I'm going to have to go over everything with a fine-toothed comb to figure it out.


Sorry, I might not have understood correctly what you were really trying to achieve.

No worries, my friend, I was just joking with you :-) I've learned quite a bit based on the original topic, and I still think the "proper" method for a sprite is to use an IMG tag with either a spacer or data:image as the src. But for the emojis, using the Unicode info you posted is definitely the smarter move. I hate it, but I'm going to have to rebuild that direction now that I know it exists... lol
8:04 am on Aug 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


After doing some research, Dimitri, I don't think Unicode emojis are going to work for me, after all... am I correct in reading that they require Windows 8+? I checked, and 30.54% of my traffic is using Windows 7... in fact, 1.17% is still using XP! lol

I'm using the latest Chrome on Win7, and this just give me an empty square:

[jsfiddle.net...]

If it doesn't at least work on Win7 then I'm probably 3-4 years from being able to go that route :'-(

Unless you guys can suggest a way to test for compatibility, and then showing an image if the browser doesn't recognize the unicode?
4:28 pm on Aug 18, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15640
votes: 796


It is possible to test if the user has a given font, or one of a listed set of fonts, installed. (And therefore it should be possible to test whether the user has any font that displays a given character, since the “no character available” glyph is always the same size, though I haven’t personally tried this.) But the test requires javascript. So now you’re on your third can of worms.
7:31 pm on Aug 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1095
votes: 103


Well, in retrospect... if I'm going to have to build a complete back up with images, then I might as well just use that and not worry about using the Unicode emojis yet :-(
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members