As others have said, early versions of HTML and CSS were much more limited that what you are used today.
Consider, just taking into account Internet Explorer, which was predominant or at least a major player at the time (remember that Chrome only appeared in 2008, and only reached the 10% threshold in 2010):
border-radius used for rounded corners were introduced in IE9 (released 2011).
gradients were introduced in IE10 (2012)
SVG support was introduced in IE9.
So just to make a button with rounded corners, you needed to use an image!
Also remember that at the time, upgrades were a lot slower than they are now. When a new version of IE was released, you could still have waaaaay earlier versions representing a significant share of the traffic for many years: IE8 alone was still at over 10% in April 2013 (not counting earlier versions).
And that's not even taking into account the fact that, even when they all supported a feature, each browser had its own quirks (they still do, but not so much on the more basic HTML/CSS features). It was sometimes easier to drop an image which would work anywhere that to try to adjust CSSS to make it work in all browsers.
At the time, there was also less the issue of high-resolution displays (Retina and the like). Having an UI elements as an image didn't raise issue with pixelated text or buttons, one CSS pixel was nearly always one actual screen pixel.
Using images for UI elements was so ubiquitous that some techniques were developed especially for that (to reduce loading time), like sprites (having all the elements on a single image, and "cutting" pieces of that image using CSS for individual UI elements.
Note that nowadays, we still face similar issues with e-mail. HTML/CSS support in e-mail clients is often a lot more limited, and you often need to use creative alternative techniques to get a decent result. However in that case images are no longer a viable choice, as many e-mail readers block external image loading for privacy reasons, and embedded images raise other issues.