-1

Firstly, when using CSS with normal image, we set width:50px and this applies OK on both desktop and mobile devices (of course the image quality and natural size is high enough).

However when using CSS sprite with a simple trick with background-position, with that same size (width of 50px), the displayed image will be blurry (due to scaling or something like that).

I know that we must provide a better spritesheet image (with larger size of course). But in that case the width:50px will not work, I mean it must be some larger value as well. I don't know how to determine that value. Because as I said at first, any box/element having width of 50px will be dealt by the mobile devices somehow automatically. If I set a larger value, the result image may have a larger size unexpectedly (although the quality may be as desired).

.item {
    background: url(/sprites.png) 0px 0px;
    width: 50px;
    ...
}

How could you deal with this problem?

Hopeless
  • 4,397
  • 5
  • 37
  • 64
  • My question is why are you using sprite for 50px images? This is not me slamming on you just looking what problem you are trying to solve with it :) – Dejan.S Apr 29 '20 at 10:25
  • @Dejan.S you might misunderstand my info here, 50px is the size for an item (or an icon rendered in the spritesheet). So the spritesheet's size may be 1000px – Hopeless Apr 29 '20 at 10:27
  • I know. Still, what problem are you trying to solve with having icons AND images in a spritesheet? What I'm getting at is that there are far better ways to do icons then pngs in a sprite, not to mention regular images you have should defenetly not be in any sprite. I could point you to a better direction if you are willing to share more info on the problem you are trying to solve and why the sprite solution. – Dejan.S Apr 29 '20 at 10:39
  • @Dejan.S I'm assuming that icons and images are the same one I mean here (a rendered image or something like that). You know the purpose of using spritesheet? that's just what I want (saving requests, loaded data, ...) – Hopeless Apr 29 '20 at 10:42
  • 1
    Sure I do, I just haven used them in about 6 years. There are SVG for icons and lazy load for images. With svg icons if you use them in your markup and not as an image they don't become a request. There are tons of pros of using svg over both sprite and font icons. They are vector based so they dont take up much size either. – Dejan.S Apr 29 '20 at 10:44
  • using spritesheet is a must (actually), I don't have my own choice. I prefer separate images really because nowadays the internet speed is high, we have caching ...However some search engine may evaluate a lower SEO point for website having multiple requests loading images. – Hopeless Apr 29 '20 at 10:47
  • There are no search engine that will give you that for images, if so please refer to that documentation. – Dejan.S Apr 29 '20 at 10:48
  • @Dejan.S thank you for your suggestion about using SVG, but as I said above, using spritesheet is a requirement out of my control. – Hopeless Apr 29 '20 at 10:48
  • just do add, if you really want help with this. Upload your sprite to a service and post so people can try it out. Give a working example. Not gone get much traffic to this one else. – Dejan.S Apr 29 '20 at 10:52
  • @Dejan.S I must admit that using SVGs or font-icons still requires a larger data than using sprites. For simple (mono-chrome, low-bit color, ...) icons SVG or font-icons may be the best solution. But we have rich color icons. Sorry that I cannot public the spritesheet here. If you have a general solution with spritesheet, we don't need a specic one to solve with. – Hopeless Apr 29 '20 at 11:38
  • @Dejan.S for a page containing just several icons, it would be fine to go with SVG and font-icons but for a page containing about 50 icons, using spritesheet actually can save some data. But as I said, what we can take benefit of here are caching, ... which make spritesheet no longer needed. – Hopeless Apr 29 '20 at 11:40
  • I can't be convinced that even with 200 icons a regular png sprite is better then a svg sprite. There are no benefits compared to SVG no matter color, bit ect. Not to mention to serve a screen that has x2-x3 pixels, you need to serve a 100px for a 50px image to be crisp, Vector graphics just scale to exactly what size you want, without gaining size. I remain my opinion to read upon web dev in 2020. Just to be clear, I'm not trying to be rude, just saying web has evolved a lot from the times of png sprites :) – Dejan.S Apr 29 '20 at 13:47
  • @Dejan.S well you mentioned about SVG sprites, actually I meant about multiple SVGs vs png sprites (not SVG sprites vs png sprites). Of course, SVG sprites would be better, but it's not easy and convenient for me to combine multiple SVGs into a spritesheet (at least with PNG I've already done my code to do that). As the result of combining process, we have the spritesheet together with all coordinates of the sub icons (which will be saved in some DB for later querying and showing the icons correctly). – Hopeless May 02 '20 at 13:17
  • 1
    I does not matter how you put it, what you guys are doing is not ranked better by google, does not make life easier as a dev either, svg sprite require an unique id and that is it. There are already tools/npm packages that merge them for you that are easy to use, else it's not harder then creating a sprite.svg file and pasing the code from each svg file you want manually also into that file, attach the sprite.svg to your site use it by calling the id. You asked me if I knew what a sprite is but seems as you don't. A svg sprite is the same as you do, if you do corrdiantes its a sprite. – Dejan.S May 03 '20 at 13:07
  • well I think using SVG sprite may be very promising (I've heard about it the first time). I will try it out when having enough time. Actually there are a lot of other things in our project so that I do not have plan to do any consuming time. Even this issue we may have to accept it for a short time (before fixing it). I'm not a lazy guy at all, for building the (png) sprites, I can use some already-built tool to generate & import the coordinates … However that way is not very convenient, so I decided to code all my own and now I can change every single icon via an UI and all are built/mapped – Hopeless May 03 '20 at 17:58

1 Answers1

0

For anyone caring about a solution that uses PNG sprites, this is exactly what you can do. To help render the sprites smoothly on mobile (as well as high DPI screen) devices we need a larger image (about x2 the sizes, e.g: the normal screen requires a spritesheet width of 500px, you need at least another one with width of 1000px).

All the background-position and background-size are the same on all devices (mobiles & desktop pcs), the only difference here is the background-image. On desktop pcs you can use the normal (small) spritesheet whereas on mobiles you can use the larger one (as mentioned above).

Here are the 2 snippets of CSS code applied for desktop pcs & mobiles:

This is the common CSS:

.item {
   background-position: 0px 0px;
   background-size: 500px 300px;
   background-repeat: no-repeat;
}

This is applied for desktop pcs:

.item {
   background-image: url(your_normal_sprites_500.png);
}

This is applied for mobiles:

.item {
   background-image: url(your_large_sprites_1000.png);
}

To switch the style/css programmatically for desktop/mobiles, we can take the benefit of window.devicePixelRatio. This is not supported on some old browsers, but it should be available on most popular modern browsers now.

var isHiResScreen = (window.devicePixelRatio || 1) > 1;
if(isHiResScreen){
   //pick style for mobile
}
else {
   //pick style for desktop pc
}

Of course you should consider using SVG spritesheet instead if possible as @Dejan.S has mentioned in his comments (and of course I've known about this thanks to him). It's very promising :)

Hopeless
  • 4,397
  • 5
  • 37
  • 64