Say an Image of 1px width and 20px height of size 1kb is repeated in an unordered list item of with 10px.
Then will the page size in terms of kb is increased by 10kb (width of listitem* Size of Image) or it will be 1kb only.?
You are only making one request to the server for that one background image once, so no, it won't increase the page size.
Images such as the one you suggest are an ideal way to reduce page size.
If you want to go further you could consider using CSS sprites to further cut down on page size and loading time.
The downloaded page size will not change (that is, of the HTML and images).
Since it is the same image, it will be reused from the single download.
In memory, however, there will be an increase as the background needs to be rendered. It is not possible to determine what kind of memory increase this will cause.
The image gets loaded into the browser's cache only once. So the loaded amount will only be 1kb. This is why spritesheets are such a good idea.
No not at all it's not increase the loading page time. Image is loaded only onces.
absolutely not
when browser download the background,it repeat the background with the downloaded background image and never download multiple times,you can check it with firebug
No it will not increase the size. It will remain 1kb in size.
"Basically, Image slicing is useful for breaking up huge images so that the individual pieces will load more quickly than the whole large one."
Related
I have a website where people can upload images. I have seen that a lot of sites scale down images to thumbnail size and show that on a search page for example, until the user actually clicks on one to view it in full size.
Why is it good practice to generate a thumbnail version of an uploaded image? Why not just use img tag with set height and width?
[EDIT]: After reading a few answers, I realised that I have probably phrased my question poorly. So, what I mean is, are the images downloaded in full size, even if they have a size specified in CSS? Are they scaled down at rendering after the page has finsihed loading?
Thanks!
Larger images have larger file sizes. If you have 1MB images but only need to show thumbnails that might be 10KB in size, you'll be saving 99% of your bandwidth by only showing the full images when required.
In addition to bandwidth, clients often have limited memory... think of mobile devices. Plus, the CPU required to handle them during scrolling and what not.
If you use the img tag with width and height, that picture is still the original, the data size does not change (it only looks smaller in your browser).
If you have thumbnails, those thumbnails are smaller in data size but usually somewhere on your page you link them to the original with bigger data size.
If the user downloads the thumbnail, he'll get the small sized picture, if he downloads the original, he gets the big sized.
Note: A thumbnail is a different picture than the original.
Are the images downloaded in full size, even if they have a size specified in CSS?
Yes images will be downloaded in origin size (full size). CSS only changes view of image not main image file.
Are they scaled down at rendering after the page has finsihed loading?
No, except when there is a script to do such job.
Smaller image has smaller size = faster loading.
When user actually want to see image, you open actual image and it may wait for load.
If you have several posts on search and each has image, thumbnails will be much faster to load than original images.
If you scale down original image with css (set width and height) it will still need to load original image first.
I have img background in my angular app, in slow connections the image loads slow and shows partially during the loading.
Is there a way to wait until the image fully loads and then to show it? and not to show it in loading progress?
Most likely it is caused by the size and resolution of the image.
To make it load faster reduce image sizes using either GIF, PNG-8. or JPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images. The image result might look fine on screen but the file size will be the same. To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly. Also play around with different image compressions.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.
If I have a logo image, and I want to use it on another page where I require it to be a smaller size, it is my instinct to create a new image, resized with a graphics editor. However, I am hearing that it is better for the user if I instead refer to the original image and resize it with the browser by changing the height and width in the image tag.
So I ask the crowd, what is the best practice here?
Thank you for your time,
-- Henry
My default response would be "Resize it in a graphics application", but it depends on how you're using it.
When you leave image resizing to the browser, the original (full-size) image has to be downloaded before the browser can display it at a smaller scale. This means that you use more bandwidth and your webpage takes longer to load. However, if you mainly use the larger image throughout your site, then it will be faster to always use this image, since the browser can cache it.
If you're concerned about image quality, you would get better results and would have more control over the downsampling process using a dedicated graphics application to resize the image.
It's fine to resize images with CSS or the height and width tags. The only thing you want to be careful of is making really large images small because it obviously doesn't decrease the download size.
Doing this would work best when you're effectively caching your images so it doesn't get downloaded a second time. Then you will be getting a tangible benefit from doing so. I usually just append the last modified time of the image to the URL, eg:
<img src="/images/log.png?1233454568">
and then set the Expires header to a year from now. If the image changes, the mtime changes and it will force the browser to reload it.
That's suggested for images, Javascript and CSS files.
If the browser resizes the image for you by using height/width tag, you might end with a lesser quality image, really depends on the image type (like photo vs. simple graphics), so try it out in some common browsers. But resizing the image in a graphics editor is the only way to ensure a high-quality resize operation.
Create the smaller image in a graphics editor, for several reasons:
If users have not already cached the larger image, they will be downloading the larger file unnecessarily.
Resizing the image client-side results in some unpredictable scaling quality.
Doing it in HTML is ill-advised anyway, for presentational issues (such as element sizes) you should do it via CSS.