title: Is it better to use images or CSS to keep performance of a webpage or application as high as possible?
body: <p>My project's creative designer and I have had some amicable disagreements as far as whether it is better to use slices of his comp or rely on the browser's rendering engine to create certain aspects of the user experience.</p>
  
  <p>One specific example is with a horizontal "bar" that runs the entire width of the widget. He created a really snazzy gradient that involves several stops of different colors and opacities, and he feels that the small size of the image is preferable or at least comparable to the added lines of CSS code needed to generate the gradient natively.</p>
  
  <p>We're already using CSS sprite technique to reduce the number of return trips from the server so that's not an issue for us. Right now it's simply the pro's and con's of using sliced up imagery versus rendering with CSS and HTML.</p>
  
  <p>Is there a definitive rule as to how large an image needs to be to be the "worse" option of the two?</p>
  
  <p><strong>UPDATE:</strong> Since a few people have mentioned the complexity of the gradient as a factor I'm going to present it here:</p>
  
  <pre><code>-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));
  </code></pre>
  
  <p>Very complex! ;-)</p>