Would this slow down my page loading time if I use background image to fill the body of my page.
body {
padding:0;
margin:0 auto;
background-image: url("../images/tile.jpg");
}
Size of tile.jpg is 17KB. Its image 4x4 pixels
4x4 pixels and 17K ??? Why? What is its payload?
I have a background jpg that is 200x200. It is less than 4K and could be far less.
Why would a 4x4 jpg be 17K ???
No, it will not noticably increase the loading time. It’s only downloaded once.
its actually 11.7KB. I mistyped it. Its currently JPEG should I change it to PNG?
I saved it for the web in photoshop as png and now its 152 bytes
2 Likes
Hi Stribor45, is there any particular reason that you went with the png format rather than the jpeg?
Even though, 152 bytes won’t crunch your performance budget, it’s a good practice to optimize your images as much as possible.
So, instead of using a png, you may want to consider converting your png to a WebP format. The good thing about WebP is that it retains transparency and will often cut your file size down quite substantially.
Here’s a good article that ought to give you the low down on WebP Images: Article about the WebP Image Format
1 Like
I’d be tempted to say that going from 11.7KB to 152b is optimized.
Still seems a bit much for a 4x4 pixel image, but it’s better than it was.
IMHO WebP images are more a “keep an eye on progress, not ready for prime time yet” thing. At least until when / if browser support improves
3 Likes
Great link, Mittineague. You’re right, WebP still has a way!
Actually, when I’ve converted jpeg files to the WebP format, I didn’t end up saving a bit. I’ve heard that it is very good at reducing png file sizes though.
Stribor45, I assume that you are using the 8 bit png rather than the 24 bit standard. Is that correct?
There is not one image format that is the right choice in all cases, some formats are better suited to some images than others.
Jpeg lends itself to photo-like images, with lots of detail. PNG is very efficient for images with areas with flat uniform colour like logo graphics or cell-shaded cartoons. It supports alpha and a variety of bit depths. But SVG is taking over as the choice for this type of image.
The png can be quite inefficient for photo-like images, the domain of the jpeg, producing large files.
So a problem comes when you have a photo image that needs an alpha channel.
WebP was created to deal with this, but does not yet have sufficient browser support.
But there is another answer to this, in the form of svg again, where an svg can contain lossy jpeg-like images with a mask for trasparency.
In the case of the OP, we never saw the image in question, we don’t know how many colours, how much detail or if alpha is required, so could only guess at the best format.
I would guess that since it originally existed as jpeg that there is no alpha channel, so WebP is not a requirement. At 4x4 it only has 16 pixels, so could be indexed colour rather than a high bit depth. The fact it came out smaller as png than jpeg tells that lossless not lossy compression is more efficient for this image.
2 Likes
Something not yet mentioned is that the browser is going to have to work very hard to tile the page with a 4 x 4 image. Admittedly browsers are more efficient at this these days but it used to be a big issue.
For a large screen the image will need to be repeated about 100,000 times to paint the whole screen. So although the small image loads quicker the browser gets held up actually drawing the page.
This will also have an effect on the feel of the page whenever a re-paint is required as on a hover effect, animation or scrolling as the whole page will need to be repainted.
Therefore I generally try to keep tiled body background images to around 25 x 25 minimum to cut down on thousands of repeats.
As I said above it is not such a big issue these days but I always try and make it easier for the browser where possible 
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.