I'm on the fence about coding about 8 social media icons on a site as either img tags or anchors with CSS background images that use sprites.
I wish I could do a poll here, but I'm interested in hearing from you all what you think is best and why?
Here's a link that addresses when it is best to use img tags versus CSS background images that use sprites:
When to use IMG vs. CSS background-image?
It specifically gives the instances when CSS with sprites are better, because CSS with sprites
are faster loading and
can be used when you only want to partially display the image.
The link I gave provides a much more complete answer (my two points were off the top of my head, I bookmarked the link above and often use it for reference).
I think, in terms of my preference, I like to use sprites. Primarily because you can put all your icons in one image file, css-move the background image to the location(s) and then the user only has to download (cache) the one file. This means less requests on your server, less files to wait for AND you can preload just the one file. And updating is easier, IMO.
Hope this helps.
Related
I am optimizing a site. As suggested in this CSS-tricks article, I am planning to <use> SVG icons. I am a bit skeptical due to my use case.
Most of the icons are placed once(or twice) in a page for which SVG <use> is fine.
But there are two icons which has to be placed at multiple places(approx. 20-50 times each) in a single page. For this particular page, is it better to use PNG because PNG method will benefit browser caching?
Will SVG method bloat the HTML document with the same icons being repeated, say 50 times?
Please answer even if this sounds like a premature optimization. I am refactoring the existing site's code. I have already checked this similar thread.
Asking again because:
My particular use case.
Hoping things have changed in 2022.
I have the following images/slides on the home page of my website;
Home page: https://www.atlasestateagents.co.uk/
Images:
https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png
https://www.atlasestateagents.co.uk/img/Landlord-Slide.png
https://www.atlasestateagents.co.uk/img/Vendor-Slide.png
Having used some online SEO tools I can see they are considerably adding to the page load time which apparently can have a negative affect on SEO performance.
The images have to be large in size as the site uses the Bootstrap framework and scales up/down depending on screen size.
Is there anything I can do to reduce the file size and/or load time?
File Types
The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.
Sprites and Preloaders
A helpful practice for reducing load time is the use of CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often employed for mouse-over states on buttons. For example, with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over it.
Though sprites are frequently used for interactive menus and buttons, they can also be used to display multiple site images from a single image file. This would require the browser to only download one image instead of, say, three or four.
In addition to sprites, images can be preloaded using JavaScript, jQuery, Ajax, or CSS. When an image is preloaded, the browser downloads or “preloads” the image and then instantly displays it when the user goes to access it. Preloading can greatly decrease load times with image heavy websites, especially sites with photo galleries.
Using CSS Instead of Images
Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS. Be warned, every browser won’t always support these techniques and browser compatibility should be carefully considered before replacing an image with CSS.
Suggesting some good reads on image optimization and reducing load time if using images.
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
Do Images Load Faster in HTML or CSS?
I merged a set of icons into one .png file and use css background-position to show these icons on a page, because img tags make a lot more http requests.
However, I need to show every icon in 2 different sizes: 20x20, 60x60. How can I do this without creating 2 separate .png files (20x400 and 60x1200)?
I am aware of the background-size property to scale the background image, but it is introduced in css3 and IE doesn't support it before 9.0.
Is it possible without using background-size?
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup retina compatible
Since you cannot use background-size for compatibility reasons you could try having both small and large versions of the icons in the same image. How you group them is up to you, but you should do some testing whether the increased size of the image still results in an acceptable load time for your pages.
+1 for icon fonts. You can do some pretty fancy things with them e.g. http://forecastfont.iconvau.lt/
I think that you could use "background:size" property. With it, you can "visually re-scale" background image.
Please look here
I'm trying to create a gallery for a mobile site where I have different stylesheets for different sized devices. Within these stylesheets I have several classes which simply set a background url property to each image I want in the gallery.
Only one of these will be displayed at a time. And I will be cycling through the classes using Javascript to display them in a slideshow type presentation.
I am wondering is this method more bandwidth efficient than having all the images as individual img tags within the DOM? By setting these url properties do they get downloaded to the user's browser when they first load the site or are they only downloaded when the class gets set on a div in the DOM?
Simply I am trying to avoid having to download all the different images to the user's device at once. If you know any alternate methods which are better for this sort of thing I am also interested.
You are right, When you set the image backround, the image will only be downloaded if it is used, By this I mean, used as a style on some dom element.
Alternatively, you could 'change' the background-image css property using javascript. This way, you don't even have the image url in your CSS.
If bandwidth is your biggest concern, I would urge you to have a look at the inspector in webkit browsers like Chrome or safari, or with firebug on Firefox to see the 'network' tab, there you have a clear overview of what is loaded, how ( what order ) and how to optimize things. You can also make some stupid mistakes clear like downloading multiple times the same library from different locations and so.
If you just declare the class in css it shouldn't download anything before it is set. however it is a round question and the answer could take a lot of different shapes.
So I would say that yes it is a good way to do it, and it should be more bandwidth efficient (if you don't know that all the images will be loaded eventually anyhow, since you will typically have asynchronous image-loading either way it shouldn't matter much. I guess that if you only load one image initially the other images (i.e. the mentioned img tags) will not interfere making the load a bit more smooth?).
I find it to be a cleaner solution at least if you aren't sure which images will be viewed (which is likely to believe) to use your css-approach. also it's easier to maintain and provide a better design.
That you will be using javascript indicate that you are also doing the client side. And that give you control to choose what to do which is great :)
One alternative could be to have a local cache of the images as well, but that really depends on the problem at hand, if you will have different images and no real possibility to know in advance which images you will need (and perhaps not even how many of them?) then I think that the cleanest way is the way you purpose.
i.e. set up (or dynamically create) css-classes for images and handle all the logic in javascript.
after logging in to facebook, if you right-click on the image meant to show friend requests just beside the facebook logo at the top left side of the page, and inspect the result in google chrome, you find the css rules as #fbRequestsJewel.hasNew a.jewelButton. This is the background image url there.
Number of images inside it and i think those individual images are used in different places in FB,
How is that done? Is it image mapping or what? Why to do in that way instead of using separate images? What are the advantages?
It's called a CSS sprite and is basically an element that uses background-image and background-position to reuse a single image to show many different smaller images.
It's done to speed up the time taken for a page load load, as each resource the browser requests adds an overhead of an additional HTTP request.
A List Apart has a great article on the usage of CSS sprites.
It's called Sprite may be you have to check this answer
How to make a single image, treated as three different images?
check this article for more http://css-tricks.com/158-css-sprites/
hi this is called css sprite on images
Basically when we have individual images on server we have to load each images seperatly.
this will load the image in one single server trip and using css background-position we can displayed the image which we want where ever we need.
You can refer this website for simple and complete understanding of css sprites.
CSS SPRITES