调整网站图像大小以提高效率。

Question

I currently have a website that aggregates images, the problem is those images are very large, and when I display them at smaller sizes, they still eat up a lot of computation.

I'm curious as to how to actually force reduced size/quality without just smooshing it into a <div> element.

Here is my site in question, you can see how 'laggy' it gets when you produce images: http://newgameplus.nikuai.net/TEST/index.html

I was using timthumb.php to resize the images, but the host doesn't allow that script for some reason.

Answer 1

The best way to do this is to use some sort of image re-factoring service.

I have written my own one that uses ffmpeg and imagemagik to resize images on the fly and to generate arbitrarily sized thumbnails from videos. I memcache the results to make subsequent requests super snappy, and have some interesting additions such as automatic Point of Interest detection using Face Detection and Image Entropy, with the aim being "nice thumbnails, no matter the size"

An example of such a service is src.sencha.io - the documentation for this service is here but I have included the important bits below.

Specify Image Size

<img src='http://src.sencha.io/320/200/http://yourdomain.com/path/to/image.jpg'
     alt='My constrained image'
     width='320'
     height='200' />

This will take your image (http://yourdomain.com/path/to/image.jpg) and run in through the resizing service, returning a 320x200 version of your image. You cannot set the gravity/point-of-interest using this service though (as far as I can tell).

---

You can also use this service to change formats, resize dataurls, do percentage resizes and use the resizing service to detect the width/height of the user agent requesting the image.

There are many such services available on the web.