3/28/2024Deutsch
  • Home
  • Products
  • Services
  • Support
  • News
  • Denapp
  • Customers
  • Products
  • Denapp Bankdata Service
  • Order
  • Description
  • Prices
  • Documentation
  • Bankdata Client C# (.NET 2.0) Sample project
  • Services
  • Software Development
  • Web solutions
  • Support
  • Online Bankdata
  • Convert Bank account to SEPA
  • Calculate IBAN
  • Check SEPA Bank account
  • Check IBAN
  • Check German Bank account
  • Search for Bankdata
  • Online MEdi
  • Search in Payers listing
  • Search in Aid listing
  • Tools
  • Denapp HtmlShrink
  • Denapp CssImageInclude
  • Search
  • News
  • Denapp
  • Denapp Bankdata Service
  • Denapp
  • Contact
  • Terms of use
  • Privacy
  • Terms & Conditions
  • Imprint
  • Denapp CssImageInclude

    General

    There are many approaches to improve the performance of websites. One possibility is to reduce the amount of HTTP-Requests needed to display a page.
    While loading a page, HTTP-Requests are done for each resource. That means, every additional loaded file (Images, CSS, JavaScript) needs an request to the server. This problem can be softened by the use of Output Caching to improve the delivery of pages. But the count of server requests is not affected by doing that.

    Bundle files

    There is only one possibility to reduce server requests.
    In one request we have to bundle many requests.
    That means in one transferred file, many files must be contained. One technique to do this are so named CSS-Sprites. The idee is to join several images of same format at known pixel positions in one image file. Later in the browser, only the needed part of this large image is shown. Unfortunately the work with sprites is complex and very wasteful.

    DATA-URI

    A similarly way provides DATA-URI. DATA-URI means, include a Resource that is referenced by URI instead the URI. Simply expressed it is the insertion of i.e. image files in a HTML, JavaScript or CSS file.

    When including the image data they must be Base64 encoded. As a result of this the image data will increase one third in size of the source file. This disadvantage can be compensated by compressing the destination file. To avoid that the resulting file is transferred in every request, losing the advantages it should be cached on the client. So a CSS file will be the best way to include images and it is even a simple process to do

    It is to notice that the proper size for included images is restricted by webbrowsers and DATA-URI is not supported by every browser. Except IE 7 and older versions DATA-URI is supported by nearly all current browsers. For the maximum size limit of DATA-URIs exists no official statement. The from RFC demanded support for a size up to 1 KB is wide outbidden by browsers. As a maximum 4 KB should be reliable value. So far we know this is accepted by all browsers. When a size increase of one third takes effect (during base64 encoding), a maximum size of 3 KB for source files should be assumed.

    Use

    Denapp CssImageInclude joins CSS files and the referenced image files. New corresponding CSS files will be created (a name attribute is appended to the original file name) so that source files are not overwritten. When a client requests for the file you can determine the browser type and deliver the corresponding file version. The DATA-URI scheme needs to insert the mime type of the included file. Denapp CssImageInclude recognizes mime types by the following file extensions:

    • .bmp
    • .gif
    • .ico
    • .jpe, .jpeg, .jpg
    • .png
    • .tif, .tiff
    Following is an example for a CSS snippet:

    CSS source data

    .imageBox
    {
      width: 100px;
      height: 100px;
      background-image: url(images/image.png);
    }

    CSS inline image data

    .imageBox
    {
      width: 100px;
      height: 100px;
      background-image: url(data:image/png;base64,
      iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9h
      AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5
      ccllPAAAAFRJREFUeNpi/P//PwMlgHHoG8AAMgAbdnV1
      TSBGHRMeg+ejG4INMBFwHUFDmIjwIl5DmIgMJ3tKDFiw
      Z8+eRHINwKsZb/S4uLjMJ0Yd42heYAAIMAAfs3pWzwM4
      cgAAAABJRU5ErkJggg==);
    }

    Examples for command line

    The following example includes the in the 'Theme.css' file in 'C:\Published' directory referenced image files up to 3 KB size in the new created file 'Theme.img.css':

    cssimageinclude.exe /target:"C:\Published\Theme.css"
    /attribute:"img" /maxsize:3072

    The following example includes the in all CSS files in 'C:\Published' and subdirectories referenced image files up to 3 KB size in the new created corresponding files with name attribute "img":

    cssimageinclude.exe /target:"C:\Published"
    /attribute:"img" /maxsize:3072

    (3 KB filesize maximum and name attribute "img" are default values which you can omit)

    Download Denapp CssImageInclude.

    Conclusion

    DATA-URI is a good solution, for websites with many small images. The achieved performance gain is not a revolution, but it is one of many pieces for a better efficiency and the small effort always justifies the usage.