All geek questions in one place

CSS - Optimizing Rounded Corners for Speed

I am trying to optimize my site for speed. I used to use images for rounded corners, but now I changed them using the css-radius and -moz-border-radius css rules. Which method is best for speed? I used to think css rules were faster, but I saw a lot of sites talking about css sprites, and now I'm a bit confused. Oh, and I don't care about IE compatibility, so you can offer any method you want.

+3
source share
4 answers

The speed goes as follows: CSS> sprites> individual images. Springs is that instead of having separate images for corners, you use one image and slice / position it using CSS. This is fatser because you only upload one image. CSS is the fastest because it doesn't need to load anything.

+4
source

For browsers that support CSS properties radius, use them. They are certainly faster because the image does not need to be downloaded, and they can be displayed in the browser’s own engine.

For those (old) browsers that don't, use an image-based workaround.

. , , , .

+1

, , , CSS3 , Mozilla border-radius -moz-. , -webkit- - Webkit (Chrome, Safari) Mozilla (Firefox).

... , . , , ( , IE)

0

I would recommend CSS Sprites. This is a good tutorial: http://bavotasan.com/tutorials/simple-rounded-corners-with-a-css-sprite/

0
source

Source: https://habr.com/ru/post/1761538/

More articles:


All Articles