: How much effort should I put in to optimizing (cutting up) images for the web? I often get designs from our artists which contain large complicated images that can be turned into a background-color,

@Vandalay110

I think the example code in the jsfiddle above is overly complex in the HTML. Much of the effects that you're looking for can be achieved with class-based css on one element. This approach would allow you to use one (semantic) element and style it appropriately...

from what i can see, you could use one or maybe 2 elements with added css and css pseudo elements to acheieve almost the exact same thing.

see example i quickly created: codepen.io/peterSalvato/pen/kDvra
this is as close as i can get while at work w/o an image editor to create transparent images to place in the design. once you have transparent images to add to the button in place of the text (you'd place them in the css:pseudoElements where it says 'content'... here is some reading on pseudo elements: www.w3schools.com/css/css_pseudo_elements.asp
one added benefit of this approach is it allows the text in your button to be HTML text. This is good for both SEO and accessibility (screen readers and such)...

hope this helps.

Vote Up Vote Down

@Turnbaugh909

Not sure I understand the issue.

... 23.6k using "high" jpg settings.



and using Sliding doors CSS......

jsFiddle demo

23k is certainly acceptable. It could probably be reduced further.

I realize that 10 buttons this size may total the 200k you mention. But without knowing the entire layout and site purpose it's difficult to determine if that's aceptable. For example, larger image downloads are more acceptable on e-commerce or entertainment-based sites.

Vote Up Vote Down

@Ravi4787994

I would ask the designer to work with you to rethink the button in terms of code rather than exportable graphics. It is absolutely worth the effort to make the button graphics lighter (in size). To your point, there is a lot more that will load on the page: the remainder of the graphics, CSS, HTML, javascript, and who knows what else. Why waste space because of a careless design process.

The gradients and background color could all be done in CSS, making the button lighter on load and easier to update. It also means you have one style that can be applied (with tweaks as necessary) across a range of buttons without consistency concerns.

At the most you have two graphics:


The type and white line art (with a CSS color overlay on the latter prior to hover)
The photographic trash can


You could slim that down by using live type for the labels.

Vote Up Vote Down