Can I make the img tag use the background-image properties? Like for example, I have these two pages here one has img and the other one has background-image tag. Notice in responsive version the img one squeezes the image, while the background-image one adjusts the image according to the size.
Page with IMG tag
Page with background-image tag
You can find both img and background-image in sub-header div ..
This'll sound a bit pedantic, but there are a few reasons for it.
An <img> element represents content on the page, something intrinsically important to see and understand. Background images are fluffy stuff to make the site look pretty but their removal would not impact the message.
You are mixing your use-cases. You should go with a background-imaged header in this case because the image isn't intrinsic to the message or content of the page.
Use an <img> element when you're displaying a graph, a photo someone took, etc.
Why?
The browser intentionally treats them differently, as you've noticed, placing a higher priority on showing the content of an <img> tag for example. It'll attempt to stretch the image to fit by default, while a background will simply be clipped.
When the user goes to print the page, it's much easier to remove background images via CSS media queries then it is to hide (the correct) IMG tags.
Background images also don't take up space in the DOM and cause fewer conflicts with other elements. IMG tags flow in the document and can easily get dislodged from their intended position (creating a lot of extra work to make them stay put).
Right-clicking a background image doesn't do much. Right-clicking an image gives you image related options, such as downloading or opening the image. This goes along with the theme of the <img> tag as content.
There are other reasons, but this all boils down to semantics. This may not seem like a big deal to you, but that's probably because you don't have a vision impairment (so you don't regularly use a screen reader) and aren't really thinking about web crawlers and the many other systems that attempt to extract meaning from the tags you've used.
You will be far better off for many, many reasons if you stop fighting the system and use it the way it was intended. Or, at least, know why you're bucking convention before doing so.
I've got a tough one. I work for a company that uses a sharepoint that is 100% text based due to varying network performace issues accross the world. It provides the option to input HTML for styling but scrubs any javascript. I do not have access to code CSS and I'm assuming jquery is not available.
I would like to embed images into the sharepoint as a proof of concept by taking advantage of a floating div (or iframe) that displays with an href to display a png file stored on a server. I don't want the div (or the image) to load unless the user clicks a link or a button.
I'm pretty amature at anything other than basic HTML formating. I'm not even sure it's possible to do something like this with only html.
Thank you in advance to anyone willing to take a stab at this.
You could do it with this HTML, which is ugly and unmaintainable.
Use an iframe with scrolling="none". Use width and height attributes to give it dimensions.
Inside the iframe have your img elements with an id attribute. Ensure they're spaced with enough vertical space so they can't be seen by default, and appear isolated when viewed later.
Link your links to those id attributes, e.g. link
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.
Why do images defined in CSS (like backgrounds, lists marker, ...etc.) not behave in the same way in the browser as HTML images? For example, they can't be selected by the mouse, and you can't right click on them.
Images are generally used in CSS for one thing, backgrounds. Which means they aren't used for the same things HTML images are being used for (displaying the actual image as part of the content).
When an image is part of the content, it can be saved and copied etc, because it
is likely to be considered interesting by the reader. Backgrounds (or list-markers etc) however, are less likely (unless the reader is a developer) to interest the reader enough to want to copy them. Instead, the focus is on the actual content of the element (which the background was applied to).
I guess it is a question for browser vendors why they allow certain behavior only when dealing with <img> tag.
However, you can use dev tools/Firebug/whatever and you can download the image file.
When building web pages, one of my colleagues displays any logo using the CSS background-image property, rather than embedding the image using an HTML <img> tag. The colleague reported it was to reduce the number of HTTP requests. He also showed me an image sprite and said that Google displays its logo with sprite images.
I don't agree with his approach and showed him that the main Google.com page loads their logo in an <img> tag.
Which is a better practice?
EDIT:
Facebook also do the same thing on their homepage, loading the logo in an img tag while on their profile pages they display their logo using a CSS sprite.
From this my conclusion was that perhaps you should load your main logo in an img tag while for the other logos such as in a footer or subpage you might want to load them in the background using CSS sprites.
UPDATED: I am routinely loading logos with img tags and also know why we might use sprites. My main question is: if you have three or more logos on a page, what is the better way to load them?
When an image has semantical meaning, so it is considered to be content, use an IMG tag, without sprites, and a correctly set up ALT.
When an image is just decoration, like the background of a box, background of a button, background of a menu option, etc., it has no semantical meaning, so you can just use it as a background of a SPAN, DIV, etc. from CSS. You can use sprites in this case.
The reason Image Sprite is a best practice is because of how the HTTP protocol works, and because we want to minimize the time a webpage takes to load (there are many reasons why you should want to make your site load faster, one of them is because Google incorporated a while ago site speed in it’s ranking algorithm) HTTP is a non-connection based protocol, this means that for every request the browser does a new connection has to be done and the route to the server has to be recalculated. So, if every image was in the same file, the browser saves multiple requests.
Every request the browser does is divided in steps: DNS lookup, connecting, sending, waiting, receiving. We can use firebug to see all of the requests done during the loading of a webpage.
I took a WordPress theme and measured the time taken for every image resource at each step (ok, Firebug did that, not me) and calculated that 38.8% of the time corresponds to latency (in this case latency = DNS lookup + connecting + sending), while only 14.4% corresponds to downloading data (the 46.7% remaining corresponds to waiting for the server to respond). Latency time should be minimized, since it’s not time invested in actually downloading the resources the browser needs to show.
Steps DNS lookup, connecting and sending are redundant for every static image request on the same server. So, how can we cut them off? Guess what? Using image sprites! Every image request will be grouped in only one, resulting in only one set of latency time for all the image kilobytes the browser is going to download.
A logo is content and should therefore be represented by an <img> element (despite the trend to optimise performance at the cost of semantics).
A logo is part of the content of your site, therefore it should be in an img tag, not as a background image. It will help to increase SEO (adding a title and alt attribute will too) and the reason companies like Google, Facebook, et al put their image in a sprite is for load times - not SEO enhancement.
Does your company have the same SE rank as Google or Facebook? No. Until then, keep putting the logo in an img tag where it belongs. When your site is consistently the most viewed site on the internet, then you can start thinking about performance more than SEO.
Also, as an aside, if the logo ever had a tweak (size, color, etc), the sprite would have to be recreated as well as the CSS. If it was just an img tag, this hassle is nonexistent.
A logo is content - that is correct. And you would probably happy when a search bot grabs it.
But some websites like to apply a :hover style on their logos. Now, you're trapped.
But you can do the following, which is semantically correct. If you want to learn more about that you can read a great article about this issue by Harry Roberts.
HTML
<body>
<div id="head">
<a id="header-logo" href="http://www.example.com/" title="Example Inc. - Your slogan">
<img src="/img/assets/header-logo.png" alt="Example Inc. - Your slogan"/>
</a>
<h1>Welcome to Example Inc.</h1>
</div>
</body>
CSS
body > #head a#header-logo {
background-image: url(/img/assets/logo-header-sprite.png);
background-position: left top;
}
body > #head a#header-logo:hover {
background-position: left -50%;
}
body > #head a#header-logo img {
visibility: hidden;
}
I'd hazard a guess, though this is just a guess, that if your site's logo image is contained within a heading element, such as h1, then it seems likely that a semantic relationship would be made between that image and the site's identity. Also, typically, the logo would be considered meaningful content for the purposes of the brand, being the company's, or the brand's, visual identity.
Using a sprite for this purpose would seem to diminish the importance of that branding, since it would, in effect, be no more, or less, important than any other image included in that site (as, effectively all images are the same image).
If bandwidth is so important then I'd suggest putting all other images together into a sprite, but to maintain the independence/identity of the logo.
There is no reason not to use sprites for optimization, even if the image logo is semantic information. The overall meaning (sēmantikós) of the page is not lost if the use of sprites is done adeptly, namely by use of the image within a properly identified container. There is no universally agreed upon semantic web – semantics is a philosophical art, and open to heavy interpretation.
Perhaps arguably, more appropriate than an image for a logo is a heading (h1, by its very definition) set as a block element with visibility hidden. The text becomes searchable, carries semantic meaning for the page (allowing a proper replacement of content in text-based browsers and screen readers), and the background of the h1 set to the positioning of the sprite as necessary.
There are arguments for both sides, at least from the SEO point of view – each image is a searchable object, and an opportunity for inbound traffic; but each http request takes up bandwidth and slows the load time of the page, making it less optimized and thus lower-ranking.
edit:
When you have 3 or more logos, the point of http requests is moot; subsequent logos would presumably be the same image, even if resized. If not, reconsider why you're using the logo thusly.
If they are 3 different logos for the same company, they are no longer semantic, and no longer affect the meaning of the page. This is akin to saying a page about ABC Company is also about their DBA (Registered business name, "Doing Business As") XYZ Corporation, which is poor practice. Having a page for the company, and then another for the DBA is best practice in this situation. Either the page is for the main company, or for its subsidiary LLC. Even when you're saying "ABC Company is:" then list each DBA with their respective logos, the page's meaning is the description of ABC Company, which should have the h1 or h2 carrying the ABC Company logo, with lower level headings carrying the other logos; at this point, reducing the load time is priority, and not granting meaning to the other logos. Creating searchable content for the DBAs should be relegated to h3 and lower headings.
I want people to be able to download/link my logo. Therefor I will not include it in the sprite map.
I generally prefer defining logos in an IMG tag. A simple, practical advantage is that if someone prints your page, the logo will show up, if the logo was set as a background sprite, it would not.
Viewing a site with CSS disabled is helpful when making decisions like this. It gives you a good idea about the lowest common denominator viewing experience of your site. If your site make sense under those circumstances, it's like having your house built on rock.
I think you should stick with the <img> tag until Google invents "Background Image Search" -- a service that searches background images, breaks sprites into individual images and intelligently distinguishes between decorative and meaningful images by analyzing CSS.
Edit: Ask yourself this question: is your logo something you want to emphasize upon; or is it just another decoration. Answer and implement accordingly.
Situation: your company decides to update/change logo, but wait your logo in sprite. So you have recreate sprite again. My suggestion, keep logo in img tag.
When in rome, do what the romans do.
About logo in IMG tag, official words from Google..
http://www.youtube.com/watch?v=fBLvn_WkDJ4
Reason for keeping in tag:
To have good search engine visibility, and when someone google's for ur company name, logo should come up in image results.
Reason for keeping in css-sprites [background image]:
Faster load time
Big Brands:
All big brands have a media section on their website, also a press section where they keep all their logos in downloadable format.
Sprites allow you to reduce the number of requests.
This will only work however if it's all in one stylesheet.
Ex: the first tag that requires the sprite is called as a background image, and then is called again in a different tag in the same stylesheet. If they are in separate stylesheets, they will be requested more than once.
Little article: http://webmasterformat.com/blog/css-sprites
you can use a sprite in an img element via the css clip: property. using sprites correctly is always a good thing for optimization. sometimes it's not practical. that is a judgement call you have to make for each different circumstance (site) that you come across.
I would recommend using the IMG tag for the logo with an alt text and combining all other images as a spritesheet. I believe using spritesheets is only truly useful when you have more than 3 images. Read Rohan Patil's answer above for why thats the case.
My main question is if you have 3 or more logos like LOGO in footer, subpage etc. So, what is a better way?
In that case, yes, add the main logo with an IMG tag and use sprites for the rest.