3

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.

freefaller
  • 19,368
  • 7
  • 57
  • 87
Adola
  • 588
  • 7
  • 21
  • 2
    Good morning to you too! – slash197 Jun 27 '12 at 11:27
  • How are you resizing them? Changing the height/width in the img tag? That doesn't resize the picture, it just makes it LOOK smaller. You need to shrink the actual file on the server, reducing both byte-count and the number of pixels. – Marc B Jun 27 '12 at 11:27
  • Marc, right now I'm using: `code` return ('
    ' +'

    '+$test[$iterator][1][2]+'

    ' +'' +'
    '+Math.floor($test[$iterator][0]*100)+'%
    ' +'
    '); `code` And yes, I'm asking how to shrink the actual file! Oh, and good night to you as well Slash.     – Adola Jun 27 '12 at 11:29
  • You can resize these images while you are aggregating your searches and store the desired resized dimensions(width="x" height="y") in the db. That could help. – web-nomad Jun 27 '12 at 11:29
  • A few image resizing examples here - http://stackoverflow.com/questions/12661/efficient-jpeg-image-resizing-in-php – Donatas Olsevičius Jun 27 '12 at 11:31
  • Thanks Donatas! I suppose this is the answer to my question. But, is creating thumbnails and storing them the best way to do this? – Adola Jun 27 '12 at 11:34
  • `I was using timthumb.php to resize the images, but the host doesn't allow that script for some reason.` For what reason? – Leri Jun 27 '12 at 11:35
  • http://newgameplus.nikuai.net/TEST/thumb.php?src=http://media.giantbomb.com/uploads/0/9252/637627-lol_us_ps_front_super.jpg&q=100&w=300 Here is the error I get, and I have set permissions correctly. – Adola Jun 27 '12 at 11:36
  • 403 means that access is denied. Are you sure, you don't have something like: `deny from all` in your .htaccess? – Leri Jun 27 '12 at 11:38
  • Unfortunately, I cannot verify that. Someone is currently letting me use their hosting for free, and gave me a subdomain. I told him about the issue, but he never said that could be an issue. I just know his host has issues with timThumb (HostGator) – Adola Jun 27 '12 at 11:42
  • TimThumb has suffered a number of vulnerabilities, and I should think some hosts don't think it is worth the hassle - many a Wordpress installation has been downed by an old TT script. Either find a host who doesn't check what you're running (and then keep up with security updates) or write something simple that is less likely to have vulnerabilities. – halfer Jun 27 '12 at 11:52

2 Answers2

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.

Bart
  • 2,062
  • 15
  • 19
darryn.ten
  • 6,784
  • 3
  • 47
  • 65
  • This is a pretty cool service! I'm actually thinking I'm going to go the route you did. I'm working on writing my own resizer/chache'er Kidna dislike the fact I have to re-invent the wheel here, but I've gotta do what I've gotta do. Hosting size is around 5gb, my database would be around 30k images, each image being around 4kb. So I've got plenty of room to store/serve images myself. – Adola Jun 27 '12 at 12:14
0

I agree with slash: It depends on how the images are being resized. One thing I do for a site is use photoshop (or GIMP) to resize the image to the exact dimensions i need for the page i'm using the image for. Then i also include the same dimensions in the width-height attributes on the image itself.

Additionally, you can use your photo editing software to check the size of your image if you were to save it with a different file extension, and (specifically with jpeg and png files) photoshop will let you reduce the quality, which lowers file size and speeds up page loading.

MainStWebGuy
  • 41
  • 1
  • This isn't possible because of the fact I'm aggregating images from places on the internet. – Adola Jun 27 '12 at 11:38