Often times significant visual effects conveyed using images during mockup phase of design are transferred into final front-end code as binary image representation of the effect.
While it is usually the simplest way to achieve the result, it makes it hard to deliver this experience in a speedy manner because pixel-based image formats are quite heavy and take time to transfer over the network.
Instead of requiring pixel-perfect binary image representation of the effect, it is better to plan for styling of the elements using CSS whose expressive power is quite significant and can help accomplish quite amazing results.
Examples start with shadows and rounded corners (staple of post-IE6 world) all the way to animations and even user-interactions based on hover state and more.
Mixed Heroes
One common anti-pattern that can be fixed using this technique is large "hero" elements that contain both a photographic image and text that is required to be crisp and well readable. Due to nature of image formats achieving both is impossible within the same image file with reasonable quality settings: PNG format is great for linear art, but would be too bulky for photographic portion of the image while JPEG can compress photographic part, but will inevitably cause significant artifacts around text.
A solution would be to split photographic element to be rendered using JPEG image with low-enough quality setting while rendering regular text styled to match the design. This also helps accomplish responsive design needs and allows making containers more flexible to implement.
WebPageTest report for pages following and not following the pattern:
Existing blog posts, articles, videos
Links to successful implementations
Often times significant visual effects conveyed using images during mockup phase of design are transferred into final front-end code as binary image representation of the effect.
While it is usually the simplest way to achieve the result, it makes it hard to deliver this experience in a speedy manner because pixel-based image formats are quite heavy and take time to transfer over the network.
Instead of requiring pixel-perfect binary image representation of the effect, it is better to plan for styling of the elements using CSS whose expressive power is quite significant and can help accomplish quite amazing results.
Examples start with shadows and rounded corners (staple of post-IE6 world) all the way to animations and even user-interactions based on hover state and more.
Mixed Heroes
One common anti-pattern that can be fixed using this technique is large "hero" elements that contain both a photographic image and text that is required to be crisp and well readable. Due to nature of image formats achieving both is impossible within the same image file with reasonable quality settings: PNG format is great for linear art, but would be too bulky for photographic portion of the image while JPEG can compress photographic part, but will inevitably cause significant artifacts around text.
A solution would be to split photographic element to be rendered using JPEG image with low-enough quality setting while rendering regular text styled to match the design. This also helps accomplish responsive design needs and allows making containers more flexible to implement.
WebPageTest report for pages following and not following the pattern:
Existing blog posts, articles, videos
Links to successful implementations