Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 22 Aug 2019, 18:26
scottkoz20 scottkoz20 is offline
 
Join Date: Jan 2016
Real name: Scott
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
Reply With Quote
  #2  
Old 22 Aug 2019, 18:39
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
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.
Reply With Quote
  #3  
Old 22 Aug 2019, 20:31
scottkoz20 scottkoz20 is offline
 
Join Date: Jan 2016
Real name: Scott
Originally Posted by In Omnibus View Post
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?
Reply With Quote
  #4  
Old 22 Aug 2019, 21:07
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by scottkoz20 View Post
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.
Reply With Quote
  #5  
Old 23 Aug 2019, 03:18
scottkoz20 scottkoz20 is offline
 
Join Date: Jan 2016
Real name: Scott
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.
Reply With Quote
  #6  
Old 23 Aug 2019, 08:00
In Omnibus's Avatar
In Omnibus In Omnibus is offline
 
Join Date: Apr 2010
Real name: Kris
Originally Posted by scottkoz20 View Post
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.
Reply With Quote
  #7  
Old 23 Aug 2019, 12:49
scottkoz20 scottkoz20 is offline
 
Join Date: Jan 2016
Real name: Scott
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
Reply With Quote
  #8  
Old 23 Aug 2019, 17:33
final kaoss final kaoss is offline
 
Join Date: Apr 2006
Originally Posted by scottkoz20 View Post
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://www.vbulletin.org/forum/showthread.php?t=259302

Last edited by final kaoss; 23 Aug 2019 at 17:34. Reason: added a link
Reply With Quote
  #9  
Old 23 Aug 2019, 17:56
scottkoz20 scottkoz20 is offline
 
Join Date: Jan 2016
Real name: Scott
Originally Posted by final kaoss View Post
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

Last edited by scottkoz20; 23 Aug 2019 at 20:16.
Reply With Quote
  #10  
Old 23 Aug 2019, 22:10
final kaoss final kaoss is offline
 
Join Date: Apr 2006
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/fu...ges-and-video/
Reply With Quote
  #11  
Old 24 Aug 2019, 02:29
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Real name: Mark
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.
__________________
Former vBulletin.org Staff Member



Support for my products (as well as updates/new product publishing) has been moved to MHB - vBulletin Products and TAZ - Add-ons
Reply With Quote
Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Board Optimization United-Forum CSS Sprites - ludicrous speed - NOW! Osbes vBulletin 4.x Add-ons 650 16 Aug 2018 22:46



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 07:33.

Layout Options | Width: Wide Color: