Is there a way to use sprites without using the
background: url();
property?
For example, is there a way to use sprites with
<img>
tags instead?
The reason I ask is because I am trying to use CSS sprites in a fluid grid system and I need to be able to control the max-width of the image.
So you're wondering if you can crop an image various times in different spots?
Yes it is possible. Here are a few posts explaining these techniques:
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
Related
We are using the background-image style for one component in our application. we need to make it responsive with different resolution images. I have seen that we can make use of image-set to achieve it and implemented it as below and working as expected.
Please see the below code snippet I have implemented.
<div style="width: 50%;height: 50%;background-repeat: no-repeat; background-image: -webkit-image-set(
url(smallCat.jpg) 1x,
url(BigCat.jpg) 2x)">
</div>
Now, I would like to give a specific resolution of the screen in place of 1x,2x.
Since it is possible in srcset with sizes, do we have any way to set sizes for image-set?
Please let me know your thoughts.
Thanks.
Nah, there is no syntax for this. But:
Another difference, is that unlike with the srcset attribute, where you can also give image options based on the width of the browser (when art direction is required), you cannot do that with the image-set. However, art direction can still be achieved in CSS using media queries!
Source: Creating responsive images with image-set
So, if you want to rule all the images using CSS only, use media queries.
Ref: https://github.com/twbs/bootstrap/pull/28072
It looks like the img-retina() mixin has been deprecated with the suggestion that we should use responsive image tags (I assume this is pictures with source sets?) and object-fit for background images?
Is there a standard/accepted way to replace/replicate the old retina background approach?
This blog post indicates that we should use position:absolute; images with source sets?
https://jasonyingling.me/better-performing-background-images-with-object-fit/
However I'm not sure this is suited for a tiled/repeating background image?
For e.g. I have 4 thumbnails and 1 large image. When I click on a thumbnail, the larger image changes to that thumbnail picture.
I thought there might be a value to place inside target=""?
I was hoping to use only html/css as I don't know other languages well but any solution would be great I've tried looking everywhere.
A couple of possible solutions:
Pure HTML: Use an <iframe> with a name to contain the larger image, and embed the thumbnail images in <a>s with the appropriate target and href
Pure CSS: Include all 4 pictures, with display: none set, and display: block within a rule with the :target pseudo class, and each with an id. Embed the thumbnail images in <a>s with href=#id.
Then there are of course the Javascript/jQuery solutions.
This will give you the answer you need. There is some JavaScript but it's very basic.
Simple Image Swap
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
Is there any advantage to this?
How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
Change the css property background-position.
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.
I would like to use a technique called CSS Sprites where you have a single image and you take advantage of width, height and background-position in CSS to display only parts of the image which combines a lot of smaller images. Do you know any good automated tool for this process?
(Not tested) Can you use a XINCLUDE processor to import your svg-icons as a nested svg element ?