I was wondering if anyone has done any tests with background images. We normally create a background that repeats at least in one direction (x or y or both).
Example
Let's say we have a gradient background that repeats in X direction. Gradient height is 400px. We have several possibilities. We can create as small image as possible (1 pixel width and 400 pixels high) or we can create a larger image with 400 pixels height.
Observation
Since gradient is 400 pixels high we probably won't choose GIF format, because it can only store 256 adaptive colours. Maybe that's enaough if our gradient is subtle, since it doesn't have that many, but otherwise we'll probably rather store image as a 24-bit PNG image to preserve complete gradient detail.
Dilemma
Should we create an image of 1×400 px size that will be repeated n times horizontally or should we create an image of 100×400 px size to speed up rendering in the browser and have a larger image file size.
So. Image size vs. rendering speed? Which one wins? Anyone cares to test this? With regards to browser rendering speed and possible small image redraw flickering...
The rendering speed is the bottleneck here, since bigger tiles can be put into the browser's cache.
I've actually tried this for the major browsers, and at least some of them rendered noticeably slow on very small tiles.
So if increasing the bitmap size does not result in ridiculously big file sizes, I would definately go with that. Test it yourself and see. (Remember to include IE6, as still many people are stuck with it).
You might be able to strike a good balance between bitmap size and file size, but in general I'd try 50x400, 100x400, 200x400 and even 400x400 pixels.
I found out that there may be a huge difference in the rendering performance of the browser, if you have a background-image with width of 1px and repeating it. It's better to have a background-image with slightly larger dimensions. So a image with a width of 100px performs much better in the browser. This especially comes into play when you use a repeated background-image in a draggable layer on your website. The drag-performance is pretty bad with an often-repeated background-image.
I'd like to point out that for the cost of sending down an extra few rows (1-2 only example here) .8k - 1.6kb (if you can get away with 8-bit) more like 2.4kb - 4.0kb for 24bit
2 pixel columns more means the required iterations required to blit the background in is cut down to 1/3 for up to 1.6kb (8-bit) or 4kb (24bit)
even 1 extra column halves the blitting required down to half the element width.
If the background's done in less than a second for a 56.6k modem I reckon it's lean enough.
If small dimensions of an image have a negative impact on rendering, I'm sure any decent browser would blit the image internally a few times before tiling.
That said, I tend not to use 1 pixel image dimensions, so I can see the image clearly without resizing it. PNG compression is good enough to handle this at very little cost to file size, in most situations.
I'd put money on the bottleneck being the image download rather than the rendering engine doing the tiling, so go for the 1 pixel wide option.
Also the 24-bit PNG is redundant since you're still only getting 8 bits per channel (red, green and blue).
I generally prefer to go in between, 1pixel wide will probably make your gradient seem a bit unclear but you can do something like 5pixel width which gives enough room to the gradient to maintain consistency and clarity across the page.. but I would suggest you can add more patterns and images to a single image and then use background positioning(css sprites) to position them because download a single image of say 50kb would take less time comapared to 5 40kb images since the browser makes fewer requests to the server...
I have not benchmarked this but I'd bet that on most modern computers the rendering won't be an issue whereas you always want to save on on the image download time. I often go for the 1px type of graphics.
Related
I've got a couple questions about the use of images in a html document that I couldn't find an answer for.
Why is the standard 12x12 / 24x24 / 48x48 / 96x96 /... and not 8x8 /
16x16 / 32x32 / 64x64 / ... ?
Why is a 130x130px image resized to 50x50px by the browser (by
setting its width/height in the html doc) going to be more blurry
than a 100x100 image resized to 50x50 ? (is it just easier for the
browser to divide the size by 2 ?)
Is there a specific resolution for images that is worth using over another to be
more 4k friendly ? For instance using 384x384px images instead of
96x96 for 4K screen owners ?
1. Why are there icon size standards?
First of all there are no "standard" sizes for icons but it is always a good idea to create icons with a equal ratio = square images. That does not mean you are not allowed to break the rules, but it depens for which medium you are creating the icons. Android using a differend base size then iOS, because they need to support different resolutions. For desktop it is always good to start from a scale of 16px as a base. reference for icon sizes
2. Why get images blurry when resizes?
Image you are the browser and you need to repaint your 120x120px pixel image into an 50x50 canvas. The problem you face right now is that you need to decides on several point which color to choose especially on edges? What the browser does ist to mix up colors for edges where he knows there is not more enoug space to display it crisp. This is causing the "blurry" effect. No think about resizing the 120x120 to the half. Thats a lot more easier because you dont need to mix colors anymore. Or in more technical term:
Well rastered images when scaled in either direction are going to have some anomalies. When you make them bigger, it’s obvious – things get pixelated quickly. When you shrink them down, whatever is rendering it has to guess on what pixel goes where. https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/#post-188194
3. Are there a specific resolution for images
Thats basicly a very good question and opens the topic of "responsive" Images. As you know the pixen density on 4k Monitors / Smartphones is a lot higher then on regular screen. The fact that images cannot scale the informations by themself makes them pixelated when enlarged and blurry when shrinked. Best case would be to use SVG as often as you can, icons are best usecase for icons. Normally just putting the bigges image online would do the task, but performancewise it would be catastrophical. If you want to master this topic I can give you some good links to dive in:
https://css-tricks.com/optimizing-large-scale-displays/
https://css-tricks.com/responsive-images-css/
Hope thats answers, at least, a bit of your worries :)
Does any one know which is going to be better for a browser loading time between these two options:
background-image:url('1by1px.png');
or
background-image:url('10by10px.png');
A 1px by 1px semi transparent png repeated for the div. Or a larger one say 10px by 10px.
There must be some kind of looping that has to be done to display the repeated image in the browser, and so I wondered if the image which is 1px by 1px causes alot of looping to get the image displayed that it may in fact be less speedy than a larger dimensioned image with less looping?
Of course the counter argument is image size is smaller for 1by1 compared to 10by10, but doesn't mean its better to be smaller because looping many times might not scale as good as looping a large image size slightly less often.
Does any know more about which would be better and how browsers handle situations like this?
When not repeating the background image, the time required to render depends on only the final scaled image, not the original one.
The image in a file is compressed as PNG format, but after being loaded by browser, it is in RGBA bitmap format (4 bytes for a pixel). When repeating a background, (let say on Intel x86), the native code of browser would use REP MOVSD to move the bitmap data from RAM to video memory (this is standard sequence, might be different on various implementations of graphics driver or specific GPU).
Assume that the dimensions of the HTML DIV which contains the background would be 100x100.
For the only-1 pixel image: the browser programme has to exec 10 thousand 'REP MOVSD' instructions.
For the 10x10 image: with each repeated image, the browser programme has to exec 'REP MOVSD' only 10 times (1 time calling to 'REP MOVSD' can render 1 pixel line (pixel row) of the image). So in this case, the number of 'REP MOVSD' instructions executed would be only 10x100 times (10 times in 1 image, 100 repeated images). This takes totally 1 thousand 'REP MOVSD'.
Therefore, the final background based on the bigger image would be rendered faster.
More notes:
The above explanation doesn't mean the performance is exactly 10 times better for the 10x10 image. A 'REP MOVSD' (with CX=9999 for example) is only 1 single CPU instruction but still requires 9999x4 bytes to be transfered through data bus. If using 9999 simple 'MOV's, that much of data still have to go thru' data bus, however, CPU has to execute 9998 instructions more. A more clever browser would create a pre-rendered bitmap for the background with replicated images; so each time it needs to transfer to video memory, it needs just only 100 'REP MOVSD' (100 is the number of pixel rows in the final background, assumed above) instead of 10 thousand or 1 thousand.
I agree with Paul answer.
I did few rough test with Google Chrome developer tool recently.
I used different size of semi-transparent png images on top of a background image and use page paint time to see how long do it take to refresh the screen.
Here is the result:
Time to refresh without -webkit-transform hack (rounded):
2x2 image : 65-160ms
10x10 image: 60-150ms
100x100 image: 55-135ms
1000x1000 image: 55-130ms
Time to refresh with -webkit-transform hack (rounded):
2x2 image : 40-120ms
10x10 image: 30-90ms
100x100 image: 30-90ms
1000x1000 image: 30-90ms
Just like what Paul said, bigger image is take shorter time to load(refresh), than smaller image.
But, it seem it is getting less effective after the image getting bigger than 10px. I don't see much difference between 100x100 and 1000x1000.
In my opinion, an huge image won't give you a noticeable result, and it might increase the loading time. So, I think any size around 10 - 100 is good enough for performance and loading time.
But still, different image might have different result, I think you should test your site with page paint time tool in Google Chrome developer tool for accurate result.
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.
What are the benefits to using an images real height and width when rendering HTML? That is if I have an image that 100x100 pixels but I want to display something that is 95x95 pixels, should I resize the image on the server or can I let the browser handle this? I'm really looking for a general rule along with the reason. Thanks.
<img src="image.jpg" style="width: 95px; height: 95px;" alt="an image" />
Browsers handle resampling/interpolation of bitmap images differently when they're the ones resizing the images, which may or may not be controllable with CSS. This is elaborated on in detail in this post on Flickr's dev blog. If you resize the image in an image editor or by using server technology, you'll get consistent results across browsers.
In your case, a difference of under 5 pixels around will probably not be too much (unless you're concerned about pixel perfection!), but if you're trying to squeeze dimensionally or binarily large images into small rectangles, it's best to resize them beforehand. The reduced image dimensions and file size will help with bandwidth savings.
If you're always going to use the same height, it would make sense to resize it once beforehand - in as nice a way as possible - rather than getting everyone's browser to do it. After all, you can verify the results, make any tweaks you need, use the best software you can find and not worry about how long it takes to perform the resize etc.
On the other hand, I wouldn't expect the results to be very different visually, and unless you're talking about really slow computers (or a lot of images) it's probably not going to take up that much client CPU time. You may want to check the render time on slow mobile phones though, particularly if you're targeting mobile users.
if the sizes are significantly different then you should have a large versin and a small version:
like in your example, 100px and 95px shouldnt be a big deal but lets say you have large images and you want to display thumbnails it will be better to create multiple versions of the images.
The advantage will be:
1 - faster download time when you just want to show thumbnails.
2 - More consistency on different browsers
3 - I am sure people can add at least another 100 advantages in here
Just re-size the image. Otherwise the full 100X100 image will be loaded (which weighs more than 95x95 - and difference in size gets bigger the more you're trying to scale it with html). So it'll take an unnecessary long time to load an image that will not be displayed in its full size. If you scale them down a lot using html and you have a lot of images on the page - that's a lot of wasted traffic and reduced speed.
The whole width/height thing was used when connection was very slow and everyone used phone lines with ancient modems - that way you could see the proper layout of the page before all images were loaded (and it took a while to see all images after seeing the page with all the text).
You should resize the images on the server when it makes sense. I doubt if resizing a 100x100px image to 95x95px will save you more than a couple of KBs so you're probably OK in this case.
If the difference (dimension-wise) is significant e.g. on master page you show a 100x100px thumbnails and on the detail page you have 640x480px image then you better create two versions of the image. This will make your thumbnails page load faster and you'll only serve the minimum amount of data.
On the other hand if the difference (dimension-wise) is not significant then serving two images will actually double the amount of data transferred.
Here is what Google's PageSpeed have to say about it: Serve scaled images
I created a black and white collage consisting of a number of images - but saved the file as 1280*1024 - ideally encompassing that rez of a screen.
The issue is, would it be wiser to have the background scale, and stretch the images in the case of a larger screen or should I have it repeat so as not to lose resolution, and have smaller screens cropped from some of the background?
Thanks for any insight!
I personally don't think scaling an image up is ever an option. It's incredibly noticeable, and it doesn't look good. I would recommend using a background image that at least works on 1920 x 1080, and gracefully fade out the image on the edges or tiles well so if someone sees the page on an even larger screen, there aren't strong lines on the edges of the background.
If you are concerned about the bandwidth involved in large images, check out CSS3 Media Queries. All mobile browsers support this CSS3 module, and it will allow you to target certain resolutions and send them smaller images (both in dimensions and file size).
If your image does tile well, I would recommend going with the smallest pattern, and letting css do the repetition for you. There's no point in pushing more pixels down the pipe than necessary.
It's up to the user really but they obviously can't make that decision. I'd scale it but that's not as easy as tiling it. I've never successfully scaled a background image.
It will also depend on your preference.
Are you okay with having a stretched image as a background, in case the user has a larger screen? If yes, then by all means set the background image to stretch. Or, are you more keen on preserving the integrity of the image? In the latter case, it's much better to have the image tile.
If you're interested in creating a full page background image, try one of these techniques found on CSS Tricks: "Perfect Full Page Background Image".