CSS and Image
Optimization




Stoyan Stefanov, @stoyanstefanov
May 12, 2010
Web Optimization Summit
Agenda
1.  Reducing CSS file sizes
2.  Rendering
3.  Reducing HTTP requests
4.  Optimizing image file sizes
Reducing CSS file sizes
CSS recipe for disaster
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}
CSS recipe for disaster
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}	


     ...
CSS recipe for disaster
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}	


     ...
CSS recipe for disaster
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}	


  Wha...
CSS recipe for disaster
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}	


     ...
CSS recipe for disaster
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}	



    ...
Crockford on CSS:



 “Long, fragile lists of
  self-contradictory
         rules”
So?
#sidebar #menu ul li.blogroll	
{	
    color: green !important;	
    font-weight: bold;	
}	

Legend:
• easy stuff • tou...
So?



 Make the tough stuff
        easy
Reusable CSS
.linklist {color: green; ...}	

/* widgets */	
.module {...}	
.gallery {...}	

/* utilities */ 	
.clearfix {....
Mixin pattern
<ul class="module linklist">	
…
Reusable CSS

1.  Strong foundation:
    reset, grids
2.  Library styles:
    .class not #id
Object-Oriented CSS
•  Nicole Sullivan
•  oocss.org
Minifying CSS
•  Strip white space, comments
•  Some micro-optimizations
•  ~30% savings
•  can’t rename
•  YUICompressor,...
Browser-specific CSS
•  IE6,7 vs. others
•  -webkit-, -moz-, -o-
•  -ms-, _, *, zoom
•  automated
•  savings? 3-5%, mileag...
CSS and rendering
Filters
•  AlphaImageLoader is bad
•  Verdict is out on the others
Expressions
•  Executed too often
•  Avoid
•  JavaScript or self-rewrite
Behaviors
•  Be careful with the shims
•  ie-css3.htc, pngfix.htc,…
Scrollbars trick
•  Prevent a reflow when you
expect a long page

body {overflow-y: scroll;}
Reducing HTTP requests
CSS blocks rendering
•  The worst component type
•  Place way at the top
•  Inline all @media print, etc



http://www.php...
Same domain
•  If you split across domains,
keep CSS on the same
domain as HTML
Inline CSS
•  Google search
•  Bing.com: inline + postload
Inline + postload
•  First visit:


1. Inline
2. Lazy-load the external file
3. Write a cookie
Inline + postload
•  Later visits:


1. Read cookie
2. Refer to the external file
Web Fonts
•  Don’t go overboard!
•  Subset
•  Gzip!


      http://snook.ca/archives/html_and_css/
                screenc...
Fewer HTTP requests
•  Inline images:
   in CSS sprites
   with data: URI scheme


                http://csssprites.com
 ...
Fewer HTTP requests
•  data: URI scheme

$ php ‐r "echo base64_encode(file_get_contents('my.png'));” 
iVBORw0KGgoAAAANSUhE...
Fewer HTTP requests
•  data: URI scheme

background‐image: url("data:image/
png;base64,iVBORw0KG..."); 
Fewer HTTP requests
•  data: URI scheme

<img src="data:image/png;base64,iVBOR..." /> 
Fewer HTTP requests
•  data: URI scheme
•  works in IE!...
Fewer HTTP requests
•  data: URI scheme
•  works in IE8!
Fewer HTTP requests
•  data: URI scheme
•  MHTML for IE < 8
MHTML
•  MIME HTML
•  Works in IE 6,7
•  Indeed it actually absolutely
does work in IE7/Vista too
MHTML - one part
Content-Location: myimage	
Content-Transfer-Encoding: base64	

iVBORw0KGgoAAAANSU....U5ErkJggg==
MHTML - multi parts
Content-Type: multipart/related; boundary="MYSEPARATOR"	

--MYSEPARATOR	

[here comes part one]	      ...
MHTML – all together
/*	
Content-Type: multipart/related; boundary="MYSEPARATOR"	

--MYSEPARATOR	
Content-Location: myimag...
MHTML + data URI
•  drawback: repeats the
same encoded image
•  solution: browser-specific
CSS
•  or… an ingenious hack
MHTML + data URI
•  image header + css + data
/9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0


Reality:
...
No-image UI
•  a.k.a. CSS3
Rounded corners
.module {	
  -moz-border-radius: 9px;	
  -webkit-border-radius: 9px;	
  border-radius: 9px;	
}
Rounded corners
            All

            vs. 	
             IE
Gradients
.hd {	
  background-image: -moz-linear-gradient(top, #641d1c, #f00);	
  background-image: -webkit-gradient(linea...
No-image UI
•  rounded corners
•  gradients
•  glows, shadows
•  rgba
                  http://www.phpied.com/
     css-pe...
Multi-purpose “mask” images
•  one image on top of
different solid colors
•  for themes, social profiles…
1px wide “mask”
•  Top:
somewhat
transparent
•  Bottom:
Fully
transparent
Multi-purpose mask
Gradient mask
•  the data URI smaller that all
the CSS –moz, -webkit, filter...
A glossy mask
Optimizing image file sizes
Rule #1: No GIFs




$ optipng *.gif
PNG-8
•  Palette image (like GIF)
•  256 colors (like GIF)
•  Smaller than GIF (GIF++)
•  Alpha transparency (GIF++)
Rarely PNG-24
•  Truecolor
PNGSlim
                  	
OptiPNG	        DeflOpt	

           PNGOut	
      PNGOptimizer	

PNGCrush	
                 A...
JPEG
•  The format for photos
•  Run through JPEGTran
Study of the images on the top
1000 sites
Q: How many GIFs are out
there?
Q: What if we make them PNG?
Q: Are PNGs optimiz...
Top 1000 – how?
•  URLs from Alexa top sites
•  open Fiddler
•  php script that opens/closes
Explorer with each URL
•  enj...
Top 1000 – GIF vs. PNG?

                 Animated
                    GIF
                    3%

                       ...
Top 1000 – GIF vs. PNG vs.
JPG?

                            GIF
                            40%
       JPEG
        46%

...
Top 1000 – GIF to PNG
$ optipng *.gif	
$ pngoptimizercl –
file:"*.png”	
(1 min/1000 files)	

                 23.79%
     ...
Top 1000 – Optimizing PNG
$ pngoptimizercl –
file:"*.png"	




                 16.90%
                 savings
Top 1000 – Optimizing JPG
$ jpegtran –copy none -optimize	




                   13.08%
                   savings
Take-home
1.  Think reusable CSS
2.  Reduce HTTP requests:
     - sprites, data URIs
     - CSS3, reusable images
3.  Smus...
Thank you!


Stoyan Stefanov
@stoyanstefanov
http://www.phpied.com
CSS and image optimization
CSS and image optimization
CSS and image optimization
Upcoming SlideShare
Loading in...5
×

CSS and image optimization

9,012

Published on

Slides from Web Optimization Summit 2010

Published in: Technology
2 Comments
22 Likes
Statistics
Notes
  • @Andreas - to avoid an extra DNS lookup and load CSS asap helping the progressive rendering of the page. Otherwise nothing gets rendered until all the CSS arrives
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Can you explain why css need to be on the same domain as html.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,012
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
357
Comments
2
Likes
22
Embeds 0
No embeds

No notes for slide

Transcript of "CSS and image optimization"

  1. 1. CSS and Image Optimization Stoyan Stefanov, @stoyanstefanov May 12, 2010 Web Optimization Summit
  2. 2. Agenda 1.  Reducing CSS file sizes 2.  Rendering 3.  Reducing HTTP requests 4.  Optimizing image file sizes
  3. 3. Reducing CSS file sizes
  4. 4. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; }
  5. 5. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } Long selectors
  6. 6. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } C-style indented declarations
  7. 7. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } What? Not unique enough?
  8. 8. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } One is probably enough
  9. 9. CSS recipe for disaster #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } Lame
  10. 10. Crockford on CSS: “Long, fragile lists of self-contradictory rules”
  11. 11. So? #sidebar #menu ul li.blogroll { color: green !important; font-weight: bold; } Legend: • easy stuff • tough stuff
  12. 12. So? Make the tough stuff easy
  13. 13. Reusable CSS .linklist {color: green; ...} /* widgets */ .module {...} .gallery {...} /* utilities */ .clearfix {...}; .flip {...}
  14. 14. Mixin pattern <ul class="module linklist"> …
  15. 15. Reusable CSS 1.  Strong foundation: reset, grids 2.  Library styles: .class not #id
  16. 16. Object-Oriented CSS •  Nicole Sullivan •  oocss.org
  17. 17. Minifying CSS •  Strip white space, comments •  Some micro-optimizations •  ~30% savings •  can’t rename •  YUICompressor, CSSTidy •  Inline code too! http://tools.w3clubs.com/cssmin/
  18. 18. Browser-specific CSS •  IE6,7 vs. others •  -webkit-, -moz-, -o- •  -ms-, _, *, zoom •  automated •  savings? 3-5%, mileage vary http://phpied.com/files/css-parse/css-strip.html
  19. 19. CSS and rendering
  20. 20. Filters •  AlphaImageLoader is bad •  Verdict is out on the others
  21. 21. Expressions •  Executed too often •  Avoid •  JavaScript or self-rewrite
  22. 22. Behaviors •  Be careful with the shims •  ie-css3.htc, pngfix.htc,…
  23. 23. Scrollbars trick •  Prevent a reflow when you expect a long page body {overflow-y: scroll;}
  24. 24. Reducing HTTP requests
  25. 25. CSS blocks rendering •  The worst component type •  Place way at the top •  Inline all @media print, etc http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/
  26. 26. Same domain •  If you split across domains, keep CSS on the same domain as HTML
  27. 27. Inline CSS •  Google search •  Bing.com: inline + postload
  28. 28. Inline + postload •  First visit: 1. Inline 2. Lazy-load the external file 3. Write a cookie
  29. 29. Inline + postload •  Later visits: 1. Read cookie 2. Refer to the external file
  30. 30. Web Fonts •  Don’t go overboard! •  Subset •  Gzip! http://snook.ca/archives/html_and_css/ screencast-converting-ttf2eot
  31. 31. Fewer HTTP requests •  Inline images: in CSS sprites with data: URI scheme http://csssprites.com http://spriteme.org
  32. 32. Fewer HTTP requests •  data: URI scheme $ php ‐r "echo base64_encode(file_get_contents('my.png'));”  iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P 4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC 
  33. 33. Fewer HTTP requests •  data: URI scheme background‐image: url("data:image/ png;base64,iVBORw0KG..."); 
  34. 34. Fewer HTTP requests •  data: URI scheme <img src="data:image/png;base64,iVBOR..." /> 
  35. 35. Fewer HTTP requests •  data: URI scheme •  works in IE!...
  36. 36. Fewer HTTP requests •  data: URI scheme •  works in IE8!
  37. 37. Fewer HTTP requests •  data: URI scheme •  MHTML for IE < 8
  38. 38. MHTML •  MIME HTML •  Works in IE 6,7 •  Indeed it actually absolutely does work in IE7/Vista too
  39. 39. MHTML - one part Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSU....U5ErkJggg==
  40. 40. MHTML - multi parts Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR [here comes part one] The double- --MYSEPARATOR dash of doom [here's part two] --MYSEPARATOR--
  41. 41. MHTML – all together /* Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg== --MYSEPARATOR Content-Location: another Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg== --MYSEPARATOR-- */ .myclass { background-image:url(mhtml:http://example.org/styles.css!myimage); } .myotherclass { background-image:url(mhtml:http://example.org/styles.css!another); }
  42. 42. MHTML + data URI •  drawback: repeats the same encoded image •  solution: browser-specific CSS •  or… an ingenious hack
  43. 43. MHTML + data URI •  image header + css + data /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0 Reality: IE: Others: http://habrahabr.ru/blogs/webdev/90761/
  44. 44. No-image UI •  a.k.a. CSS3
  45. 45. Rounded corners .module { -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
  46. 46. Rounded corners All
 vs. IE
  47. 47. Gradients .hd { background-image: -moz-linear-gradient(top, #641d1c, #f00); background-image: -webkit-gradient(linear, left top, left bottom, from(#641d1c), to(#f00)); filter: [...].gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000); -ms-filter: "[...].gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000)"; }
  48. 48. No-image UI •  rounded corners •  gradients •  glows, shadows •  rgba http://www.phpied.com/ css-performance-ui-with-fewer-images/ http://css3please.com
  49. 49. Multi-purpose “mask” images •  one image on top of different solid colors •  for themes, social profiles…
  50. 50. 1px wide “mask” •  Top: somewhat transparent •  Bottom: Fully transparent
  51. 51. Multi-purpose mask
  52. 52. Gradient mask •  the data URI smaller that all the CSS –moz, -webkit, filter...
  53. 53. A glossy mask
  54. 54. Optimizing image file sizes
  55. 55. Rule #1: No GIFs $ optipng *.gif
  56. 56. PNG-8 •  Palette image (like GIF) •  256 colors (like GIF) •  Smaller than GIF (GIF++) •  Alpha transparency (GIF++)
  57. 57. Rarely PNG-24 •  Truecolor
  58. 58. PNGSlim OptiPNG DeflOpt PNGOut PNGOptimizer PNGCrush AdvPNG PNGRewrite
  59. 59. JPEG •  The format for photos •  Run through JPEGTran
  60. 60. Study of the images on the top 1000 sites Q: How many GIFs are out there? Q: What if we make them PNG? Q: Are PNGs optimized? Q: Are JPEGs optimized?
  61. 61. Top 1000 – how? •  URLs from Alexa top sites •  open Fiddler •  php script that opens/closes Explorer with each URL •  enjoy! •  Export images from Fiddler
  62. 62. Top 1000 – GIF vs. PNG? Animated GIF 3% PNG 24% GIF 73%
  63. 63. Top 1000 – GIF vs. PNG vs. JPG? GIF 40% JPEG 46% PNG Animated GIF 13% 1%
  64. 64. Top 1000 – GIF to PNG $ optipng *.gif $ pngoptimizercl – file:"*.png” (1 min/1000 files) 23.79% savings
  65. 65. Top 1000 – Optimizing PNG $ pngoptimizercl – file:"*.png" 16.90% savings
  66. 66. Top 1000 – Optimizing JPG $ jpegtran –copy none -optimize 13.08% savings
  67. 67. Take-home 1.  Think reusable CSS 2.  Reduce HTTP requests: - sprites, data URIs - CSS3, reusable images 3.  Smush all images
  68. 68. Thank you! Stoyan Stefanov @stoyanstefanov http://www.phpied.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×