Subscribe to the RSS Feed : Read our Blog Posts from the convenience of your favourite Reader

Optimizing Images

January 7th, 2011 . by Anup



Building on the previous blog post on website optimization , this post is going to be on optimizing images on your site. If YSlow displayed that your images should not be scaled in HTML or make favicon small and cacheable, then this post is for you.

Correcting Dimensions in IMG tags

A lot of people do this. They use ,say an image that is 1200 x 784 pixels, they want displayed at 120×90. They then use html to scale it down. This practice works as in it displays fine but not on the optimization and site speed end. You see if you use Html to scale the images usually by using the img tag, transmitting the image will take a long time.

<img src=”something.png” alt=”something” width=”120″ height=”90″ />

There are a lot of tools out there which can help you do this. I personally use Paint.NET. Its free and easy to use. You can download it from http://www.getpaint.net/

You should resize any pictures or images you may add in the future using this program or your editor of choice. But ofcourse editing existing images on the website will take way too long and generally could be work.  We don’t need more work , we got plenty.

That brings us to our next step. Firefox’s YSlow comes with a tool called Smush.it Smush.it is our shortcut when it comes to image optimization. Reducing images, art, screenshots etc. would have been a lot of work otherwise.

How to use Smush.It

Open up Firefox .

Open up YSlow.

Under the YSlow tab, you should see four tabs on the top left. Click on Tools tab.

Click on All Smush.it™ . This should open a new window and you should see your images either being processed or optimized. You’re going to have to download them as .zip

Unzip them and upload the optimized images back to your server replacing the previous images. Preferably overwriting them. Repeat them for other pages of your site.

Info on using sprites to reduce emoticon load times for forums.

I’ve not looked into this much because it doesn’t apply to me . But an indepth explanation on how to use CSS Sprites to reduce load times can be viewed using the link below
http://sixrevisions.com/css/css-sprites-site-speed/

Content Delivery Networks .

This part can become an expensive affair. If you can afford this then by all means do so. It is worth the price and your website visitors will thank you for it. Now for the rest of us there are alternatives.

I use CloudFlare. It is a CDN that comes bundled FREE with a HostGator account. If your site is huge and the solutions that follow don’t help you out much , then I suggest getting a hostgator account to use cloudflare. Serving niches uses Cloud Flare. It is one of the many reasons I think anybody gets to see this Site. So it works wonderfully.

copyblogger.com uses http://www.netdna.com/ the Net DNA Content Delivery Network. So that could be another option you’d want to check out.

Googling “Content Delivery Network” should give you more options. I say this because I don’t too have much info what CDN’s the major websites use.  Bigger websites tend not to discuss their technology choices too much.

That brings us to the end of the Optimizing Images Blog Post. Next time we’ll look into working with CSS and Javascript on our pages to help optimize our website and entice visitors to stay longer.

Discover the World's largest E-Book Store! Save big on bestsellers!

Be Sociable, Share!

2 Responses to “Optimizing Images”

  1. […] CSS and Javascript January 11th, 2011 . by Anup Tweet Once you’re done optimizing images , you should work on CSS and Javascript files. One way to do this is by aggregating all your CSS […]

  2. […] We’re going to work on improving that Grade in the next blog post. […]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>