CODEWITHSUNDEEP
javascripthtmlcss
Olokoo
Olokoo

Reputation: 1144

How to shrink the size of an image when loading it in

I would like to display images at 16x16. 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 16x16 instead of like 2000x2000, not just change the width and height of the image and also not changing the actual size of the image with php.

Thanks Ian

Upvotes: 0

Views: 481

Answers (3)

Dan Ramos
Dan Ramos

Reputation: 1102

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 2000x2000 sized image and use CSS to make it 16x16 you are still loading the 2000x2000 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.

Upvotes: 0

Cobby
Cobby

Reputation: 5454

There is no way a client could resize or ocmpress an image for performance benefits. If the client could compress an image it would still have to download the full-sized original, defeating the purpose compressing.

So, the only way to get the image at 16x16 is either make it that size, or use a server-side script to resize your images.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324600

Erm... no?

What you're asking is like asking if you can take a 500-page essay and take every 1000th letter without counting through the whole document.

The only real way is for the image to be 16x16 in the first place.

Upvotes: 4

Related Questions