Editing sprite file

[durangod]

I would like to edit this file but i have no clue how to work with sprites.. Is it just a normal png file and i can just change out the little images inside to what i want?

https://github.com/SimpleMachines/SMF/blob/release-2.1/Themes/default/images/icons/editor_sprite.png

hey i did it....   i changed the code icon...  well aint that just some cool beans... learned stuff already..

[durangod]

I wonder how these work to load.  Does it use the empty space between them as the delimiter?

[Jason Knight]

To implement the horrifically inaccurately named CSS sprites (they're tile sheets, not sprites), all that's done is to slide the background around.

Take those tiny (now near useless) icons. They're all 16x16 in a 16x728 file.

<span class="icon_underscore"></span>

Code: [Select]

[class*="icon_"] {
  display:inline-block;
  width:16px;
  height:16px;
  background:url(images/buttons.png);
}

icon_underscore {
  background-position:0 -48px;
}

only the top 16x16px would be shown normally, the other 702px of height is cut off. By sliding the background positon negative you reveal just the icon you want to show. Kind of like a reel of film in a projector.

Usually a 2px gap is placed between the tiles because image scaling -- if the images are enlarged or shrunk -- often blurs or smooths stuff together in a way that would make the next or previous icon's top/bottom show up as a single px of "junk".

It's a powerful technique for using only one handshake for a bunch of small icons, but one that's largely being supplanted by SVG in CSS or font icons. Raster images for controls don't dynamically scale well, and with 4k displays now the norm, you're seeing it used less and less.

Converting all the icons to SVG in a icons.screen.css file is on my to-do list for these forums. Sadly it's been there since the site launched as i've had bigger fish to fry.

[durangod]

So you have not edited your images at all then.. I thought you did because of the # for code and the sub and sup  images.  If those are out of the box then i wonder why they changed them, they changed them for the worse.

So if that is the case and they dont load sequentially then each image must have a -px value beginning and end to be able to pull the image requested at any given time.  Nevermind i see you just said that in your reply.... ooops   comprehension is a real thing...

Thanks for explaining, thats an interesting process but i cant imagine its really any faster than individual images.  I mean how long can it take to load a 16x16 image.  Sounds to me like someone pretty much said "hey look what i can do"  and it was different and caught on as proper.     Sorry to see things so simplistic but that is how my brain works and has for a long time.

As you said an i agree its a slick way, kinda cool the way that works.  But i dont think its any better that individual images, thats just my opinion.

[Jason Knight]

Thanks for explaining, thats an interesting process but i cant imagine its really any faster than individual images.  I mean how long can it take to load a 16x16 image.

Remember that EVERY file request has the overhead of handshaking. The browser asking "do you have this file?", the server saying "yes, I have that file, it's dated blah blah blah", the browser going "ok, that's newer than my cache (if any), send me it", then "ok it's on it's way" -- all before a single blasted byte of actual data is transferred.

The above is a gross oversimplification.

EACH of those steps can basically take the same amount of time as a "ping". So if ping time to the server is 300ms, you're lookiing at 1.2 SECONDS of overhead per file.

Thanks to HTTP parallelism the real world average is close to 200ms in total. Partly due to real-world ping being 30 to 50mhs, partly because of browser and server's ability to send multiple files in parallel -- beneficial when the data packets can take multiple different routes between server and client.

It is thus the raw total number of files you have can induce massive overhead to your page load time irregardless of how large the files are!

In fact, a dozen 10k files can take many times longer to transfer than a single 100k file. The faster the connection, the more pronounced that speed penalty for "more files" is.

That's why icons as fonts is popular, it's one file. It's why CSS sprites came into existence. If you're throttled by connection limits, or not living in the magical fantasy-land of fiber connections, a page using 40 or 50 separate files to do the job of seven or eight can take 30 seconds or more extra overhead JUST because it's all a bunch of separate files!

That's why HTTP parallelism matters. That's why sharting endless <img> or <script> into the markup for presentation is dumbass. It's why breaking up your CSS into a half dozen separate files is dumbass. It's why things like "preload" or HTTP 2 "push" can serve benefits bypassing the handshake mechanism and allowing control of the load order.

My article on push/preload touches on a lot of this.

https://medium.com/codex/http-parallelism-push-preload-and-why-markup-bloat-is-the-enemy-ec043ed0733e

It's why I use the formula (total # of files - / 5 == seconds for my load time estimates. Because "but it's fast for me" means dick shit. You basically get 8 files "free" in the same overlapping handshake, then each file past the first eight averages 200ms. Might be faster than that for you or I, but for normal people on cheap throttled shared connections? That's what you should be counting.

Bottom line? If those were all separate images, it could add as much as a minute to the load time for many users. EVEN if they're tiny little files.

File size often has less to do with load times than the sheer number of separate files.

It's also why keeping the HTML small as possible pays benefits. No secondary files -- EVER, not even with preload or push -- can start until the HTML has finished downloading AND being parsed. EVER! So if you shit presentation and static scripting into the markup, you're not just missing a caching opportunity on subpages that share that same style, you're also taking a steaming dump on the start of parallel downloads of those sub-media.

[durangod]

I will read the article now but question before hand.  If it is such a great system then why this

Converting all the icons to SVG in a icons.screen.css file is on my to-do list for these forums. Sadly it's been there since the site launched as i've had bigger fish to fry.

Is it just because its the next great thing to save resources.  And what if the image files were zipped all together, would  that not save resource time?  The offset being unzipping them each time.

[Jason Knight]

Is it just because its the next great thing to save resources.

SVG is a vector format, it's fully scaleable to ANY size. Rasters look like shit when you resize them. Unlike font icons, SVG is also able to do colours, where multi-color font support in browsers is still in its infancy.

  And what if the image files were zipped all together, would  that not save resource time?  The offset being unzipping them each time.

And how exactly would a BROWSER unpack them to use them? Much less most image formats are already compressed by their own algo's, so adding another layer atop them is a waste of time. That's why you don't set your server up to gzip .jpeg, .png, .webp, etc, etm.

Also vector formats like fonts and SVG can also result in smaller images with better results if dealing with line art... whilst being scalable to ANY size without pixelization or blurring.

[Jason Knight]

Here's a great example for you. What's more useful for people on 4k displays running 3x scaling, that 16x16 scaled to 48x48?



or a font icon that can scale to any size without loss?



And I mean to ANY size without loss:



That's why fonts and SVG are good for your line-art, and dicking around with rasters is a relic of the past best left for photographs and "real artwork"

[durangod]

Thats impressive, i also fight myself with images losing clarity. I would love to use that for my product visual displays on my webstore software.   Does SVG require special software, can it be done with  and old version of photoshop?  I am thinking its just a file ext,  is that correct example.svg.

Here are my save menus for my version of photoshop, i dont see it on there so i probably cant make SVG.

[Jason Knight]

Photoshop is a raster image program. Thus it is completely unsuited for drawing vector images.

But you're in luck. Inkscape is one of the best SVG manipulation programs, and it's FREE!

https://inkscape.org

The Adobe equivalent is Illustrator. In fact that's what separates illustrator from Photopshop. One is for vector images, one is for rasters.

Beware that working with vectors -- point to point drawing of layered polygons and Beziers -- is utterly unlike working with raster images. You have no brushes, you aren't drawing pixels. It's just like making a font or working in CAD, just each of your "layers" (actually called "contours" when it's vector) can have its own colour, gradients, shadows, and so forth.

[Jason Knight]

Oh, you could also draw very high resolution images -- we're talking 1024x1024 or larger -- of your shape and use a raster to SVG conversion program. There are free online ones... but beware that the resultant files are often inaccurate, inefficient, bloated, and require a good deal of editing for "practical" use.

[durangod]

Thanks for the info and the tips, i have installed inkscape