Forum Moderators: not2easy

Message Too Old, No Replies

Loading Images

Same image - different size

         

gideon

10:41 am on Nov 29, 2002 (gmt 0)



On various pages of my website I use the same gif image but the size is different. To do this, I upload each sized image seperately to my server as "sameimage1", "sameimage2", "sameimage3". When a vistor comes to my site he would have to wait for each one to load.

Can I upload one image only to my server and simply change the width/height details on the variious pages? Would the gif lose clarity doing this? And would I speed up my page loading times?

BlobFisk

10:47 am on Nov 29, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi gideon,

This would definitely help with the download speed, although if the images are compressed to a decent size (a few k) then the saving may not be really worth it.

I say this because you would need to upload the biggest image and downsize it for the other 2 instances where you use it - but, depending on the detail in the graphic file, you would loose clarity - especially if there is text on the image. Picture JPEG's tend to downsize more gracefully than gif's (especially with text) and it also depends on how much of a reduction is invloved.

The best thing to do would be to test it. Create a test page and call the largest image 3 times and vary each one to the 3 sizes you use and see if they downsize well or not.

piskie

10:47 am on Nov 29, 2002 (gmt 0)

10+ Year Member



Yes you can do that, universalimage.gif must be suitable to display at the largest size.
Also be careful to maintain the aspect ratio as you re-size.

gideon

7:33 pm on Nov 29, 2002 (gmt 0)



Thanks for answering so quickly.

Hey Blobfisk! Relating to this you mention that images can be compressed too. Can you elaborate on how this can be done. I have several JPEG's on board of about 30 KB.

BlobFisk

11:46 am on Dec 2, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey Gideon,

As you know there are two main image formats used GIF and JPEG (although, PNG is making a good inroad - some nice info here [webmasterworld.com]).

JPEGs are generally used for greyscale or colour images of real-world scenes - mostly photographs. They don't work too well on line drawings, cartoons or with text, for this GIF is the one to use.

One of the advantages of JPEG is it's lossiness, that is, it takes advantage of the human eye's inability to accurately perceive small colour changes over small changes in brightness. Therefore, changing the lossiness of a JPEG image allows us to compress the image size. This is means that as image quality is degraded, the file size decreases accordingly. The levels used depend on what you are happy with - in smaller images sizes (size in pixels this case) it is harder for the human eye to distinguish slight variations in quality - which allows us to increase the lossy value, resulting in a smaller image size.

So, to drop the size of those 30k images of yours, you should bring them into a graphics package and play around with the compression setting. Many packages use a quality setting between 0 and 100 (10 in some cases), where 100/10 is the maximum quality (close to lossless) and therefore highest file size.

Make sure that you are using the correct file format - JPEG for pictures/photos and gif for cartoons and text where there is a high degree of seperation between the colours used.

HTH