Image Options for Better Web Performance

If you read articles on best practices you will quickly read that one of the best ways to increase performance is to limit your calls to the server as well as “shrink” the size of those files.  Implementing and keeping up with all of the options can actually take a full time job.  However as a small business web developer, I have realized that just implementing some of these can have a profound impact to your site.  We are always loading “assets” from the server to support a page.  These “assets” might include, images, javascript libraries, style sheets, video, audio, etc.  Better managing these assets not only improves performance but in some cases also lowers the band-width requirements.  We are very visual people so it has been my experience that the areas for great performance is to address the images first and then move on to the other areas. I am not saying that the other areas aren’t important but rather some of the little things you can do to images can improve a lot towards performance. My goal is talk about some of the available options as well as give you some thoughts and links that make this even easier.

Method Description with Opinion Best Links
Sprites The theory is that you take separate images and bundle them in one file.
You only need one trip to the server for all the images for a particular page, menu, etc.
If your images change often then recreating this one image sprite can get pretty tiring and confusing. So this works great with non-changing images (examples include menu icons, action icons, borders, buttons, etc)
here
Compressing images The theory is that you take a lot of the unnecessary information attached to an image as well as remove some of the color depth without any visual impairments.
Your image sizes can get quite low so if you make several trips to the server it’s ok because those file sizes are quite small.
If you have images that require the highest resolution for publishing, printing, or commercial use than you might want the highest quality on your site.
(PNG)
(JPG)
Imbed images in the page or style themselves. You can take the binary representation of the image and tell the browser to display the image.
You only need one trip to the server for all the css files for a particular page, menu, etc.
Most of the time you load a master css and a page specific css along with any styles for particular objects (video, sliders, etc) You run the risk of loading styles that you do not use and therefore; send one file but send a larger file that contains styles you don’t need. Furthermore; you might end up with redundant styles. Not all browser support (see here for current limitations)
here
Combine some of these together You can take the binary representation of the image and tell the browser to display the image.
You only need one trip to the server for all the css files for a particular page, menu, etc.
Most of the time you load a master css and a page specific css along with any styles for particular objects (video, sliders, etc) You run the risk of loading styles that you do not use and therefore; send one file but send a larger file that contains styles you don’t need. Furthermore; you might end up with redundant styles.
See Above

As you can see you have options and even though internet speeds are getting faster and cheaper with a little effort you have a chance to make your users experience on your site even a better one.

Here is a sample using the Compressing image tool for PNG.  You would not realistically use a 1.6 Meg file for a site unless you had to but you get the idea.

imagesample

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


1 + 2 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>