CODEWITHSUNDEEP
phpjqueryimageimage-processing
Paul
Paul

Reputation: 11746

caching and resizing images without shrinking or stretching?

How does Facebook and other image intensive sites maintain a thumbnail size of the full image without shrinking or distorting the thumbnail?

Are these thumbs cropped versions of the original and stored so when the thumb is clicked they reference the full size image.

My images are stretched or shrunk if I simply try to confine them to a preset size in my img tag.

Ideally I would like to crop each image to fit a preset size without distorting the aspect ratio. If this can be done on the fly is this an efficient way to handle images in high volumes?

Upvotes: 2

Views: 1032

Answers (2)

pixelistik
pixelistik

Reputation: 7830

It is considered bad practice to resize images with your HTML markup or CSS styles. Scaling them up means bad quality, scaling them down means that your users have to download a larger file than necessary, which hurts speed.

There are libraries built for image resizing and caching for almost any language or framework. They mostly feature cropping as well, in order to maintain a standard aspect ratio. For PHP, have a look at phpThumb, which is based on GD/ImageMagick.

The resulting resized versions of your images are saved in a cache folder, so they don't need to be regenerated every time the image is requested. This way, the performance is almost as good as serving static files. The only overhead is a small check if the resized version exists in the cache.

Upvotes: 2

LOLapalooza
LOLapalooza

Reputation: 2082

I can't speak directly for facebook, but most sites upload a large image, and then smaller, preset sizes are automatically recreated (usually by the scripting language and some kind of library, like PHP/GD) and saved with a similar file name pattern, so that you can use as little bandwidth as possible, improve loading times, and avoid manipulating images with css.

Upvotes: 1

Related Questions