CODEWITHSUNDEEP
phphtmlcssperformance
Robert Mulinsky
Robert Mulinsky

Reputation: 155

image saving, resizing

I have one basic question. I have project where I need more sizes of one picture.

Yes... During uploading you make thumbnails... and so on... I know this story ... performance vs. storing possibilities. So I save original img, a make 2 thumbnails copies for example max width 100px and maxwidht 200px with respect to ratio. Now I need show image in 150px max width so I take saved img(200px) and .....

I use getimagesize() for calculating showing width and height respected to ratio, or I set max-widht and max-height and I leave it for browser (browser make it for me), or I set width a keep height: auto (but I want also limit max height)

So actualy I use php and getimagesize() but this function every time work with file and I am little scared. When you process 1 img it is OK but what about 20 or 100.

And... another idea, while uploading I save to DB also size information, for this I have to save data for 3 img (now only original one) this complicate everything.

So ... any ideas? What is your practice? THX.

Upvotes: 1

Views: 136

Answers (2)

Delphinator
Delphinator

Reputation: 513

My approach

I wrote a pretty simple gallery application in php a while ago and this is how it works:

The images are stored in a folder with subfolders representing albums (and subalbums). They are uploaded via FTP and the webserver only has read-permissions on them.

For each image there are three versions:

  • a full one (the original)
  • a "mid" one (1024x768px max)
  • a "thumb" one (250x250px max)

All requests for images by the browser are served by php, and not-yet-existing versions are generated on the fly. The actual data is served through X-Sendfile, but that's an implementation detail.

I store the smaller versions in separate directories. When given a path to an original image, it is trivial to find the corresponding downscaled files (and check for existence and modification times).

Thoughts on your problem

Scaling images using HTML / CSS is considered bad practice for two simple reasons: if you are scaling up, you have a blurred image. If you are scaling down, you waste bandwidth and make your page slower for no good reason. So don't do it.

It should be possible to determine a pretty small set of required versions of each file (for example those used in a layout as in my case). Depending on the size and requirements of your project there are a few possibilities for creating those versions:

  • on the fly: generate / update them, when they are requested
  • during upload: have the routine that is called during the upload-process do the work
  • in the background: have the upload-routine add a job to a queue that is worked on in the background (probably most scalable but also fairly complex to implement and deploy)

Scaling down large images is a pretty slow operation (taking a few seconds usually). You might want to throttle it somehow to prevent abuse / DoS. Also limit dimensions and file size. A 100 MP (or even bigger) plain white (or any color) JPG might be very small when compressed, but will use an awful lot of RAM during scaling. Also big PNGs take really long to decompress (and even more to compress).

For a small website it doesn't matter, which approach you choose. Something that works (even if it doesn't scale) will do. If you plan on getting a good amount of traffic and a steady stream of uploads, then choose wisely and benchmark carefully.

Upvotes: 1

Rob W
Rob W

Reputation: 349232

Two images, at a maximum: A thumbnail, and the original image are sufficient. Make sure that your upload page is well-secured, because I've seen a website taken down through DoS (abusing an unprotected image-resizing page). Also limit the maximum upload size, to prevent abuse.

You can use the max-width and max-height CSS properties to limit the size of your images.

Upvotes: 1

Related Questions