制作优质页面必读 --- (七)

永动机

Avoid Filters

tag: css

    The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7.    The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded.    It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.

    The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE.    If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

top

Optimize Images

tag: images

    After a designer is done with creating the images for your web page, there are still some things you can try before you    FTP those images to your web server.

• You can check the GIFs and see if they are using a palette size corresponding        to the number of colors in the image. Using imagemagick it's easy to check using        
  identify -verbose image.gif
          When you see an image useing 4 colors and a 256 color "slots" in the palette, there is room for improvement.
•         Try converting GIFs to PNGs and see if there is a saving. More often than not, there is.        Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past.        The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don't        support variable transparency either.        So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations).        This simple imagemagick command results in totally safe-to-use        PNGs:
  convert image.gif image.png
          "All we are saying is: Give PiNG a Chance!"
•         Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:        
  pngcrush image.png -rem alla -reduce -brute result.png
•         Run jpegtran on all your JPEGs. This tool does lossless JPEG  operations such as rotation and can also be used to optimize        and remove comments and other useless information (such as EXIF  information) from your images.        
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg
  

top

Optimize CSS Sprites

tag: images

• Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
• "Be mobile-friendly" and don't leave big gaps between the images in a sprite. This doesn't affect the file size as much        but requires less memory for the user agent to decompress the image into a pixel map.        100x100 image is 10 thousand pixels, where 1000x1000 is 1 million pixels
  

Don't Scale Images in HTML

tag: images

    Don't use a bigger image than you need just because you can set the width and height in HTML.    If you need
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
    then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.


Make favicon.ico Small and Cacheable

tag: images

    The favicon.ico is an image that stays in the root of your server.    It's a necessary evil because even if you don't care about it the    browser will still request it, so it's better not to respond with a 404 Not Found.    Also since it's on the same server, cookies are sent every time it's requested.    This image also interferes with the download sequence, for example in IE when you request    extra components in the onload, the favicon will be downloaded before these extra components.

    So to mitigate the drawbacks of having a favicon.ico make sure:

• It's small, preferably under 1K.
• Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it).        You can probably safely set the Expires header a few months in the future.        You can check the last modified date of your current favicon.ico to make an informed decision.
  

Imagemagick can help you create small favicons



Keep Components under 25K

tag: mobile

    This restriction is related to the fact that iPhone won't cache components bigger than 25K.    Note that this is the uncompressed size. This is where minification is important    because gzip alone may not be sufficient.

    For more information check "Performance Research, Part 5: iPhone Cacheability - Making it Stick" by Wayne Shea and Tenni Theurer.



Pack Components into a Multipart Document

tag: mobile

    Packing components into a multipart document is like an email with attachments,    it helps you fetch several components with one HTTP request (remember: HTTP requests are expensive).    When you use this technique, first check if the user agent supports it (iPhone does not).

Avoid Empty Image src

tag: server

Image with empty string src attribute occurs more than one will expect. It appears in two form:

• straight HTML
  

  <img src="">

• JavaScript
  

  var img = new Image();
  img.src = "";

  
  

Both forms cause the same effect: browser makes another request to your server.

• Internet Explorer makes a request to the directory in which the page is located.
• Safari and Chrome make a request to the actual page itself.
• Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
• Opera does not do anything when an empty image src is encountered.
  

Why is this behavior bad?

• Cripple your servers by sending a large amount of unexpected  traffic, especially for pages that get millions of page views per day.
• Waste server computing cycles generating a page that will never be viewed.
• Possibly corrupt user data. If you are tracking state in the  request, either by cookies or in another way, you have the possibility  of destroying data. Even though the image request does not return an  image, all of the headers are read and accepted by the browser,  including all cookies. While the rest of the response is thrown away,  the damage may already be done.
  

The root cause of this behavior is the way that URI resolution is  performed in browsers.  This behavior is defined in RFC 3986 - Uniform Resource Identifiers.  When an empty string is encountered as a URI, it is considered a  relative URI and is resolved according to the algorithm defined in  section 5.2. This specific example, an empty string, is listed in  section 5.4. Firefox, Safari, and Chrome are all resolving an empty  string correctly per the specification, while Internet Explorer is  resolving it incorrectly, apparently in line with an earlier version of  the specification, RFC 2396 - Uniform Resource Identifiers (this was  obsoleted by RFC 3986). So technically, the browsers are doing what they are supposed to do to resolve relative URIs. The problem is that in  this context, the empty string is clearly unintentional.

HTML5 adds to the description of the  tag's src  attribute to instruct browsers not to make an additional request in section 4.8.2:

    The src attribute must be present, and must contain a valid URL  referencing a non-interactive, optionally animated, image resource that  is neither paged nor scripted. If the base URI of the element is the  same as the document's address, then the src attribute's value must not  be the empty string.

Hopefully, browsers will not have this problem in the future.  Unfortunately, there is no such clause for <script src=""> and < link href="">. Maybe there is still time to make that adjustment  to ensure browsers don't accidentally implement this behavior.