Dumb question time- CSS Sprites
 

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 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?

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.

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.

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

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

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

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

https://developers.google.com/web/fu...ges-and-video/