If an image is 200px by 200px and you give that image a class in css with the same dimensions, will the browser still resize that image via css?
Ive been looking frequently into reducing page load time and one of the things that comes up is resizing via css slowing down page load time.
If you apply a class to your image with some fixed dimensions, then it will stuck to the defined dimensions.
Unless you define "max/min-width" and "max/min-height" instead of width and height.
The loading time is not about the dimension of the image but more about the size (octets) of the file (here an image). The performance are poorly influenced by the dimension of it.
No, because image will be same size (as downloaded from server). Also, since width/height of class is same as image, image will not be resized. And I don't think that resizing such images has any impact on page load times.
We can resize image propertionally from css but can't reduce load time from css
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colours. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program. For basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks.
Source Link
Edit:
Check this link to get more idea about speeding up page loading time
Related
I have an image that I use many times. In several cases I want to shrink its size, but obviously it loses sharpness when I do this in HTML.
Is there a way to fix this? The image is located elsewhere and I can’t save it locally.
Thanks
As dheerosaur states, SVG graphics can be used when you need to have the same image in multiple sizes but don't want to compromise quality.
Another thing to do is use an online service, such as Resize.co. You pass them the URL for your image file, the attributes and they take care of everything else.
You cannot control the way the browser renders images when they are resized. Images will look better when being passed through Photoshop's filters (or those in another tool) upon resize.
There is three way that I know to reduce an image file size in bytes :
Convert the file into a format using lossy compression algorithm such as JPG. Obviously the image will lose sharpness
Convert the file into a format using lossless compression algorithm, like PNG. Only works if the image contains lots of region with flat colors
Resize/resample the image using Photoshop or GIMP. If the new image dimension (width x height) is exactly the same as the displayed image's dimension in HTML, then web users will still see a sharp image
Firefox and Internet Explorer actually do have CSS properties that adjust the way images are rendered when resized via HTML attributes or CSS properties:
Firefox: image-rendering
Internet Explorer: -ms-interpolation-mode
These won’t work in other browsers, and may not work great in all (or any) versions of IE and Firefox.
But it might be worth experimenting with them as a fallback in case resizer.co causes any issues.
I want to put images of the 1024x768 as backgrounds and load quickly using css. I could use
background(url....)
in the CSS, but will that solve the issue, of downloading images quickl?
Thanks
Jean
If you have to use this technique, then remember to compress and cache the image, this will speed it up somewhat, but try and be creative with alternative solutions.
For example can the background repeat on the x-axis? If it can you'll be able to create a 1px wide version that you can repeat across the page.
Try searching for this. It helps cutting off a few KB of data. PNG Gauntlet is also a free software for PNG compression that also cuts Gama correction that causes problems with IE6 and IE7.
Body background images are usually saved with lower quality, thus reducing size.
If your backgrounds are changeable, preload them. It is done by putting divs of zero height at the beginning of the page, and assigning background-image style to each. The images are loaded at the beginning, so when the background of the body gets changed the user doesn't notice the lag.
Google started to count the load time already, so classic preloading causes problems with SEO. Loading with JS, after the page fully loads is an option, or even assigning styles with JS after certain actions are made is also a solution.
remember you can't change the user dsl speed. so css background would be good. Maybe start with take a higher JPEG compression to minimize the file
(btw. i hate (full size) background images at websites with my dsl light)
I want to know when not to use CSS sprites. CSS sprites works great, but are there any occasions when they create a lot of headaches?
Like all things, there are times when it is useful, and there are times when it is harmful.
Many developers like to use CSS sprites because it saves on request time -- the browser makes one request, downloads the image, and all the various sprites are now automatically cached and blazing fast.
So how can it hurt?
Because download size != memory size.
That PNG or GIF that's only 10kb might actually be much, much greater in size once the browser loads it in memory. The issue is that while something like GIF will compress solid areas of color, the browser expands it out to a bitmap, where all images of equal dimensions use equal memory.
And it loads a new bitmap every time you use that image somewhere.
So everything in moderation.
See: http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/ for more info.
Maintainability of your site will suffer from using them. Only combine images that belong to the same logical unit and are unlikely to be updated separately. Keep images that are likely to change separate to begin with.
CSS sprites works bad for <input type="text"> where the user can enter more than fits in the box, as the background then scrolls in some versions of IE.
They also works bad if you want to repeat the pattern.
They can cause headache for your users if they want to download a particular image. First they won't get the "Save image as" option. If they figure out to use "View background image" they'll get a huge image with lots of other images on there too.
This is why sprites are best saved for "utility" (i.e. buttons) or design images.
We had a tough time when we wanted to position the image dynamically.
background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: left bottom;
This is tricky (if not impossible) to do using a sprite.
Sprites should never be used when the size of images are very different.
Because in that case the size of sprite is quite huge.
Recently I converted 3.5MB pictures to a sprite, and size shooted up to 17MB!
Using larger pic might be a headache...
When pics are combined in smaller size, and neighbouring pics are just 1 or 2 px between each other, then CSS sprites can be a good solution.
In our case, http://www.nbhuntop.com, we just use it for menu components including: Home, About, Products. And all the pics are in gif format, and no one will download these pics at all.
Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?
I should think the steps would be:
walk an images directory
create a single sprite file from all the images in that directory
for each image
find any css classes using that image
update the css class to use the new sprite file
I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.
You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)
An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:
Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.
You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.
If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.
Is the only benefit of using css image sprites that there is less http requests?
Or is there other benefits?
Also is there an easy way of detiming which area of a sprite to show?
Like you said, one of the main advantage is to reduce the number of requests to the server, improving the response time (especially if you're loading a large amount of small images). But this is not the only reasons people use sprites.
If you don't use sprites for a "mouse over" display, the user will see the image disappear for a second... and it looks really bad. This is because if you change the image instead of just moving the sprite around it will load a new image and the loading time can be visible to the end user.
.bad{
background:url(abc.jpg);
}
.bad:hover{
background:url(abcHover.jpg);
}
.good{
background:url(abc.jpg) 0px 0px;
}
.good:hover{
background-position:15px 0px;
}
Another advantage of sprites is that you can keep all your images in one location and in some cases it makes more sense (for menus and so on).
To determine which area of a sprite to show, just use photoshop or any other image editing software.
The primary benefit is your pages load faster, mainly because of reduced HTTP requests.
You could generate your sprite using a tool.
Disclaimer - I wrote this tool.
It is much easier to get image placement (especially next to text) the same cross-browser. You can adjust images up/down/left/right with out using vertical-align and padding.
I find it easier to keep track of all the images if they are in a single file. Especially since I usually have a transparent png images and and then use gif images for ie6. I save my png sprite map as a gif and add one line with background-image in my ie6 css and my images are switched.
I use photoshop or gimp to get approximate locations in the sprite map and then use firefox to fine-tune the placement.
Yes, there is another benefit. Every image file has his own headers, describing image type, colors etc. So when you combine images to a single sprite, you win some kb.
But as you said before, mostly you win by reducing HTTP requests count.
In terms of determining the area to show, I will typically place my elements on pixels that are multiples of 100. So if there's a sprite with a bunch of 64x64 pixel icons, I'll typically have them at (0, 100), (0, 200), (0, 300), etc.
This way, I don't have to type in an exact measurement (or any other developer for that matter) and save keystrokes when setting all my background-position properties.