Site optimization - Adding image dimentions

Hi,

I want to optimize a website by adding the width and height to the html tags. I’m thinking of keeping the image dimensions (as a different column) in my database so that i can pass them with the image to the browser.

  1. What kind of performance impact is image dimension having (is this big or small)?

  2. Is it worth keeping the fields in the database and querying the database again and again for the image dimensions ( this might increase the server load) to gain this performance? (I think using the php function is also not good since it will run every time the page is requested.)

  3. I have also activated the leverage browser caching for this site so is this adding image dimensions going to be useful?

Thanks,
Isuru

  1. None.

Why? Simple. Even if you tell the image to be 100x100, the browser still has to load all the data in the image, and then crushes it into that box. If you want to improve performance, decrease the size of the picture.

Hi,

Thanks for replying. Sorry I wasn’t clear before - I’m optimizing my website according to Google’s site optimization standards:

For those who are familiar with it, I’m using Firebug -> “Page Speed” tool to analyse my site’s ‘weak’ areas.

About the above link, image dimensions, the question is - I have lots of dynamic images on my site that are uploaded via a CMS and therefore vary in height/width. Therefore, how important is it to specify image dimensions? If a page had say 5-10 images from the CMS, which option below is better:

a) Don’t specify image dimensions
b) Use PHP’s getimagesize function to get the image dimension dynamically, and put it in the IMG tag as a “width” and “height”
c) Update our database to store the width/height per image (I’m already querying other info from the image table in my database, such as the text for the “alt” attribute) and then access those columns for the IMG tag on the front end?

I think “c” is the best option but I’d like to hear if anyone has any recommendation or statistics on which option is better. Obviously “c” means we need to query more data from the database.

We’re also using a separate database server, and making use of browser caching.

Thanks

You’re right — it is worth putting the dimensions in the markup. Apart from making the page render faster it avoids the annoying behaviour where the text jumps around while images are loading.

I’d guess that adding one or two extra fields to an existing DB query will be the fastest, but it’s a bit more work as you have to change the upload process to store that data.

I’d just implement getimagesize, because you can probably do that in 10 minutes and if there’s any measurable effect on your page processing time you could do a test with DB fetching instead. Do you cache rendered chunks of pages server side?

5-10 images is not much so I would suggest simply using getimagesize, the performance penalty will be very minimal.

Storing images in the database is the best solution if you want the best performance. In most cases you keep image dimensions in the same table row as the image filename and other data so fetching two more numbers will have almost no impact on performance because you don’t need to send more queries for that purpose, you are just fetching two more fields from a row that you have to query anyway. But your site would need to have a LOT of traffic and a lot of images for this to really matter.

are you sure you meant to say that?

if so, why would you store the image filename? there is no filename if you store the image in the database

Sorry, you are right, I meant storing image sizes in the database alongside their filenames assuming images are stored as regular files.

The edit button seems to be gone now so I can’t correct my post…

On my site, I stored the image size as ‘width=“100px” height=“100px”’. Both dimensions together. I didn’t want to screw around later with any extra html code. Therefore, I have something like echo ‘<img src=$src’ $size>'; in my template. Also in my database with images, I have the $alt tag, and $title tag too.

Anytime I can get a database to do work instead of php, I go database every time. Especially, if the image data will never change.

Hi,
Thanks a lot for helping.