Why CSS Text Makes Your Website Load Faster Than Using Images

Better to style your website with CSS than overload it with images

A web page full of images no doubt takes longer to load than one that doesn't have a lot of images, which is why learning to optimize your images is a critical skill for building web pages. However, even if you do reduce the size of all of your images, another problem arises when web designers use pictures for every styled text when CSS would be much more appropriate.

CSS styling lets you manipulate the appearance of text without having to send image files to the user's device.

Not only does this let them see your web pages more quickly, but it reduces the load on the server side, which could be cheaper over time as less bandwidth is used.

CSS Example

This example code shows what the HTML code would look like on a web page that styles the heading using CSS instead of loading an image.


 

<style> h1 {     text-align: center;     text-transform: uppercase;     color: #beab72; } </style>

ThoughtCo.com

Granted, it's not as pretty as an image logo since it's just using uppercase letters and a goldish color (#beab72), but every single user who loads this particular page would not have to download a header image but instead just this text, which their browser would render as a gold heading.

Other elements could be added to the CSS to make it pop even more, such as an underline:

text-decoration: underline;

That line could be placed under the "color" attribute within the​