I've just started using CSS spritesheets to significantly reduce the number of requests a user makes on our webserver (previously I had designed a page with 200 thumbnails, each linked separately, so that was 200 requests just for those and didn't know it was an issue until someone told me about it)
After going through w3schools I have figured out how to use it and have downloaded spritesheetpacker to help me make the spritesheet as well as give me the dimensions and offsets.
Now I have a CSS file that's extremely long, and am not looking forward to tagging 200 HTML elements manually. Is there a different way to deal with this situation? Here are some details:
I am familiar with javascript (not much JQuery though)
I have all of the dimensions and offsets for the images from the packer.
The page contains a table with a column for thumbnails, and another column with a link to the file associated with it, so people can quickly scroll through the page and pick what they want. You can also click on the thumbnail to see a full-size picture
I am currently displaying the image using the img tag and wrapping them with anchors, where the img class is just the picture filename (since it is also included with the output from the packer)
You can save a bit of CSS by grouping things together with similar dimensions and then just coding the background images.
<a class="buttonA Image5"></a>
.buttonA {
width:100px;
height:30px;
display:block;
}
.image5 {
background-image:url(...);
background-position:....
}
If you use display:block on your anchors, you can use a CSS background on it and eliminate the image tag completely.
Related
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 am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.
I look at the techniques used, and see that:
you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
you need to make the foreground element to somehow disappear with css tricks.
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer
(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.
As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
The main difference is that in the img tag the image is hardcoded.
With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.
As #Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.
Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:
The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).
However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.
If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).
One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.
This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.
I am placing a large, non-repeating background image on my website using the CSS background property. Since the image is so large, it takes a long time for some connections to render the image.
Here is my CSS:
#wrapper {
background: url('large-image.jpg) no-repeat center center;
}
I have already done the following to optimize the image for the web:
Reduced it to the lowest possible resolution that does not compromise quality
Changed the image type from a PNG to a JPEG
Styled the page so that the content is readable even without the background image
My question: To further optimize the image loading time, would it make a difference if I put the background tag at the bottom of my style sheet? Or would the effect of this be negligible?
I tend to order my CSS by the hierarchy of my HTML, so the #wrapper styles are at the top of my style sheet. Does the order of properties in a style sheet make a noticeable impact on load time when the user has a slower connection?
Location in the stylesheet will not affect the load time.
What you can do though is prevent it loading in some cases, such as on a cellphone.
For reference:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Those media queries aren't fail-proof, but they'll catch alot of the slower cases, which would generally be mobile devices. On the other hand, if somebody is on a 56k modem with their desktop, I just don't know what to do about it (maybe they're used to it).
You can use Jquery and waitforimages to ensure it loads after all other images, if you wish.
What could affect perceived loading time is initial #wrapper availability - i.e. if at the time of the initial load it is not part of the page and is added with JS, the background image will not begin loading - but I doubt this would be a common scenario.
Background image loading does not affect domready handlers, however if you want to speed up background availability you could try the following:
#wrapper {
background: url(large-image.png) no-repeat center center,
url(small-image.png) no-repeat center center;
}
From mdn:
With CSS3, you can apply multiple backgrounds to elements. These are
layered atop one another with the first background you provide on top
and the last background listed in the back. Only the last background
can include a background color.
What this does is effectively allows you to load a lower-res image as the bottom layer of the background, while the expensive hi-res image is still loading. Remember the good old times of lowsrc? That's the behaviour we're simulating. Note that both the low- and the hi-res image downloads begin simultaneously, so use this only if the large image is truly unbearably large.
Also: you're saying you've optimized the image; I still suggest you try Yahoo SmushIt, you'd be surprised how muich redundant data can be stripped from a PNG witout loss of quality (I currently have intermittent problems using their service, but it works after a few attempts, alternatively you could use OptiPNG but imo it would be too much effort to set it up and configure for a single image)
Update:
It has been suggested you wait for domready to fire and add your style using $("#wrapper").css(...);. What that does is add inline styling to an element, which would 1) interfere with selector specificity 2) only apply to this particular instance of #wrapper (bad if, say, it is part of ajax content coming from the server).
You could alternatively add a new css rule at runtime:
$('head').append('<style type="text/css">#wrapper {background: url(large-image.jpg) no-repeat center center;}</style>');
This would be organically added to document stylesheets and apply to all future instances of #wrapper, as well as not interfere with selector specificity. You still end up with a brief flash of unstyled content (before the handler is fired and the style is applied) so I don't advocate this approach.
See this previous question. The CSS stylesheet will be fully loaded and evaluated before the page is shown, so the location of your background-image CSS does not matter in the stylesheet.
If you want the image to only load once the rest of the content is displayed you could use jQuery:
$(window).load(function(){
$("#wrapper").css({'background-image':'url("large-image.jpg")', 'background-repeat':'no-repeat', 'background-position':'center center'});
});
I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html.
Is their any rule of thumb for this ?
As one of the answers pointed out, you need to make the difference between content and actual page style.
Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.
It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.
So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.
The question is it Content or Styling is a good place to draw the line on images.
Will this image be reused? etc.
Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.
If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.
Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").
I have a seperator li which has a background image, in an expanded tree menu, it may appear several times using the css:
.simpleTree .line {
background:url("/images/Css/gridLine.gif") no-repeat 0 0;
Even tho it is cached (from previous instances), there is still a slight delay in IE7 (~500 - 1sec) before all the background images fires up. Is there a better way to do this or make it quicker?
As far as I can tell the delay shouldn't be because of a single gif image. Check your site with YSlow or PageSpeed. Maybe some other content is blocking your image to appear fast (like javascript execution).
There are some things that you can try. You can try to reduce the size of your image and than in the CSS use the TAG "repeat-x" or "repeat-y".
In some cases, .gif's are not the best type to display images, you can try saving your image in diferent formats and see if they get smaller.
Best Regards