Question

I would like to display images at 16×16. But when I do that using css, example:(width:16px;), the image is still loaded at its original size which slows the time it takes to load the page. I was wondering if there is a way to only load the image as 16×16 instead of like 2000×2000, not just change the width and height of the image and also not changing the actual size of the image with php.

Thanks
Ian

Answer 1

Basically you need to have two images. The full sized one and a thumbnail sized one. You should sparingly use CSS to scale the size of the image, most of the time you should be resizing the image to the size you want. When you have a 2000×2000 sized image and use CSS to make it 16×16 you are still loading the 2000×2000 sized image. Its still taking up the same amount of bandwidth regardless of how it renders in the users browser. So by creating the thumbnail image your ar drastically decreasing the size and time it takes to load in the user’s browser.