Yes, You Need To Size CSS Background Images Correctly

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive affiliate commission.

Designer's, please size CSS background image's correctly. This tutorial goes hand in hand with a website I worked on recently. The client hired me to improve their website's performance. The website used the Divi theme, but lacked performance minded design.

Cue, extra challenges for me. Performance is important people.

This website had 4 boxes each. Each box's dimensions were  around 350px by 300 px. However, in these boxes the designer had stuck giant 4000px images in the background. The actual images were 6,000 px x 4,000 px. Then they had selected a small subsection of that image, using the options in the Divi page builder (center right) to select a small corner.

Even after using my favorite image compression plugin, Imagify, to compress the images as much as possible without visible quality loss, the images were still 500 KB to 900 KB in size. Too big for a performance-obsessed developer like me. This is because the 4 images were about 2.5 MB of the page's total 3.5 MB page weight. (Before I did any work, the page weight was over 17 MB. Yikes)

Most users who do performance testing, may not have caught this issue because most testings sites like GTmetrix, Pingdom, or Web Page Test don't typically flag CSS background images. However, designers, please don't be lazy when designing a website. CSS background images need to be sized correctly, just like any other image. If you are going to use gigantic images, do it on your own demo server and then re-size them correctly BEFORE publishing the design.