Dumb question time- CSS Sprites

[scottkoz20]

Ok, as much as I have learned over the last several years running my site, I cannot figure out for the life of me what a CSS Sprite does... I'm sorry if sound ignorant about this, but I am trying to figure this out (and how this can help with improving my site speed)

Thanks,
Scott

[In Omnibus]

In short sprites allow for countless images to be on one "sprite sheet" which saves bandwith and loading time. Since sprites are typically also not raster images but vector images they can be displayed at any size or any color using CSS.

Having said that they are considerably more complex to design and code. Fortunately there are free programs that do this for you. Or take png or gif images and transform them for you.

[scottkoz20]

In short sprites allow for countless images to be on one "sprite sheet" which saves bandwith and loading time. Since sprites are typically also not raster images but vector images they can be displayed at any size or any color using CSS.

Having said that they are considerably more complex to design and code. Fortunately there are free programs that do this for you. Or take png or gif images and transform them for you.

so I could take the forum images, put them on a single file and then have css call in the images as an image map?

[In Omnibus]

so I could take the forum images, put them on a single file and then have css call in the images as an image map?

Technically you could but sprite sheets work best with smaller images since you have to map the coordinates for each image. They also work best with images that load with every page load since the idea is to save the amount of data required to load with each page.

vBulletin 5 makes good use of sprites for their default images. One complaint has been that it's a lot harder to change the default forum icons because they are now sprites instead of individual png images.

Like everything, there are always positives and negatives. With so much use being on mobile devices now most things are designed with "mobile first" in mind, meaning saving data whenever and wherever possible. But mobile devices have advanced so rapidly that saving data isn't as big an issue as it once was. 5G loads pages from a phone just as quickly as it loads them from a desktop with a cable connection.

I've only glanced at your forums once or twice and only specifically in relation to questions you've asked but if I recall correctly you have a sports card forum, meaning you have thousands of images. You wouldn't want to to try to convert them all to sprites. The time and effort involved in that would far outweigh any potential benefits.

[scottkoz20]

something that I did do already is shrink the png file sizes that are used on the site at this point based on something I read from Final Kaoss (hat tip). But I am really getting into lighthouse to see how I can work on the performance of the site.

Thanks for the information. Good knowledge to have.

[In Omnibus]

something that I did do already is shrink the png file sizes that are used on the site at this point based on something I read from Final Kaoss (hat tip). But I am really getting into lighthouse to see how I can work on the performance of the site.

Thanks for the information. Good knowledge to have.

To me the biggest issue with using something less than a good DPI png or TIFF image on your site is that it would be hard to tell the grades of the cards. Obviously, the higher quality the image the easier it is to tell if a card has any kind of visible damage. Maybe no one is selling a Honus Wagner or a Mantle rookie but people are still paying good money for what they can see. If they get something different from what they can see it's not good.

[scottkoz20]

Something that I know we have done on the non-vBulletin elements is lazy loading of images... I need to see if a mod exists for lazy loading of images on the forums...

Thank you much

[final kaoss]

Something that I know we have done on the non-vBulletin elements is lazy loading of images... I need to see if a mod exists for lazy loading of images on the forums...

Thank you much

Yep there is one, here
https://vborg.vbsupport.ru/showthread.php?t=259302

[scottkoz20]

Yep there is one, here
https://vborg.vbsupport.ru/showthread.php?t=259302

I saw this but in reading, I saw comments that this is not needed? I'll try it out regardless


edit: with different sources of where the images are coming from, I doubt this is going to do what I thought

[final kaoss]

It looks like the developer said that it can lazy load external images.

Lazy Load will delay the loading of images outside of viewpoint to make the page load faster.

This should help you decide if you want to incorporate it or not.

Why lazy load images or video instead of just loading them?
Because it's possible you're loading stuff the user may never see. This is problematic for a couple reasons:

It wastes data. On unmetered connections, this isn't the worst thing that could happen (although you could be using that precious bandwidth for downloading other resources that are indeed going to be seen by the user). On limited data plans, however, loading stuff the user never sees could effectively be a waste of their money.
It wastes processing time, battery, and other system resources. After a media resource is downloaded, the browser must decode it and render its content in the viewport.
When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance. In this guide, we'll cover some techniques and offer guidance for lazy loading images and video, as well as a short list of some commonly used libraries.
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

[MarkFL]

On one of the math help forums I help admin, I created an element that allows the user to choose from a vast array of LaTeX symbols, organized via a drop-down menu into symbols which they can click to add the code associated with those symbols into whichever editable element on the page has focus. I use sprites for all those little images.