Trends are changing with the change in latest technologies and web2.0 standards.
Compress Graphics of site using PNG and not GIF for Transparent
For Transparent we can use PNG formats and for NON Transparent we can use JPG formats
PNGs were designed to be a superior replacement for the Graphic Interchange Format (GIF). GIFs are limited to 256 colors (8-bit color palette), one level of transparency, and the Lempel-Ziv-Welch (LZW) compression algorithm that was patented by UNISYS. In most cases, PNG files from the same source images are smaller than corresponding GIFs. PNGs use the “deflate” compression algorithm, which is 10 to 30% more efficient than LZW compression.
By design PNGs have some advantages over GIF images. PNGs offer more choices in color depths than GIFs, including 8-bit (256 colors), 24-bit (8 bits per channel), and 48-bit (16 bits per channel) truecolor allowing for greater color precision and smoother transitions. When you add an alpha channel, PNGs allow for up to 64 bits per channel. PNGs can have index color transparency (one color) or alpha transparency (multiple levels) useful for smooth shadow transitions over other images. In summary, the advantages of PNGs over GIFs are:
- Alpha channels (multilevel transparency)
- Variable bit depths
- Cross-platform gamma and color correction
- Two-dimensional interlacing
- More efficient lossless compression (LZ77 vs. LZ78+)
Using image sprites
If you use a lot of background images in CSS, it’s a good practice to put all the images you need in one big canvas. You can then set background-position in CSS to get the image you want from the big image. The advantage here is that instead of having to make numerous HTTP requests on a page, the browser only needs to make one request for the big image and thus speeding up load time. Some people usually create a sprite for images of the same purpose, for example, a sprite for navigation images, a sprite for logo images, a sprite for footer images, etc, but there is no reason why you can’t create combine all images, be it navigation, icons or footer, in one single sprite.
Learn here how to create image sprite
Minify and Pack Your JS and CSS files
Instead of Using Multiple JS and CSS files while loading a website, use only one file of JS and one file for CSS, they are many tools that are available to achieve this.
Here is one of such tool
Caching Files on Server
Here is a simple caching method you can use with .htaccess file. It simply sets the expiry header and cache control for browsers so the browser keeps certain components in its cache and retrieve them from the cache rather than making a new HTTP request every time.
#604800 = 1 week in seconds <FilesMatch "\.(gif|jpg|jpeg|png)$"> Header set Cache-Control "max-age=604800" </FilesMatch> #86400 = 1 day in seconds <FilesMatch "\.(js|css)$"> Header set Cache-Control "max-age=86400" </FilesMatch>
If your are targeting a high volume side, Then its always time for you to have a separate sub domain for all Images ,JS, CSS.
This will help you to load all the files at parallel
If your domain name is domain.com
img.domain.com for all your images
css.domain.com for all your Style sheet files.
Benchmark and Test