Current time: 12-13-2019, 03:03 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to optimize content images
02-25-2011, 08:20 AM (This post was last modified: 02-25-2011 08:23 AM by Geebee.)
Post: #1
How to optimize content images
An important performance issue is optimizing content images. Those images are uploaded by the content editors, mostly via a CMS, at least for the bigger websites. They should be crunched, small, with good enough quality.

What are the best solutions for this? SmushIt is a good online tool, but very buggy at times. And it would be better to use an automated solution tied to the CMS.

Anyone have hands on experience with this?
Find all posts by this user
Quote this message in a reply
02-25-2011, 09:35 AM
Post: #2
RE: How to optimize content images
The only experience I've had with this is in the photo space (which is usually the problem with editors). Instead of serving the images directly we would request all of our images through a compression module that would use imagemagik to resize the image to the correct dimensions and compress it to a pre-defined setting.

That works a lot better than smushit for things like photos because we'd usually get editors uploading images directly from a camera (really high quality and huge) and smushit wouldn't do lossy compression or resizing on the images.

The code was something we had built in-house though and I don't think it was open-sourced (and certainly not available as a service).
Visit this user's website Find all posts by this user
Quote this message in a reply
03-01-2011, 08:41 AM
Post: #3
RE: How to optimize content images
I've used a few on the fly resizing tools in the past as I often found images in the CMS uploaded straight from a high spec camera. As much as you try to educate your clients to optimize before uploading it's always good to have a safety net.

The off the shelf tools I've used weren't perfect as far as file size is concerned but are definitely a starting point for when images are much larger pixel-wise than required. These will both cache generated images to save your servers CPU.

ASP.Net see ImageGen by Doug Robar
PHP see TimThumb by Tim McDaniels and Ben Gillbanks.

These are the only two I've used. I'm keen to hear if anyone has any alternatives, particularly in .Net

http://www.bulletbits.com - My Performance Blog
Find all posts by this user
Quote this message in a reply
03-04-2011, 06:53 AM
Post: #4
RE: How to optimize content images
this is more specific to the CMS/framework you are using.

for example im making a new project in python/django using the sorl-thumbnail extension http://thumbnail.sorl.net/template.html

via my template, i can generate an image to show on the site, and set the quality parameter in there.

Im sure there is similar solutions for all languages.

You can also make a homebrew solution in php(or what have you) where any image requested is sent to your script via .htaccess and it reduces its quality to something predefined ...

cdnplanet.com: We help you select the right CDN
Visit this user's website Find all posts by this user
Quote this message in a reply
03-11-2011, 07:32 AM
Post: #5
RE: How to optimize content images
We've decided that no tool can decide if the size and quality of an image is correct, only the web editors can do that. Hence we are aiming for a non-technical approach:

Every XX weeks:
1) Download all images from image libraries
2) Run images through lossless compressor
3) Upload all images to image libraries

We'll also make an instruction for the web editors, letting them know that they should run all images through the compressor before putting them online.

For PNG I was impressed by http://www.punypng.com

Regards,
Kenneth
Find all posts by this user
Quote this message in a reply
05-10-2011, 08:42 PM
Post: #6
RE: How to optimize content images
Another thing that would help in optimizing images is to know what kind of file format will give you a smaller file size for the same quality.

PNG is generally better for simple images.
JPG on the other hand is more efficient for complex or photo realistic images.
Find all posts by this user
Quote this message in a reply
05-10-2011, 08:57 PM
Post: #7
RE: How to optimize content images
The hard part is "the same quality". A JPEG by definition will never be the same quality (technically) as a PNG because it is lossy. It would probably be possible to detect if a PNG has an alpha layer (which would make JPEG unsuitable) and if not, try compressing the image as a JPEG to see the resulting size. A human would still need to make a decision if the image still looked good though (particularly if there was any text in it).
Visit this user's website Find all posts by this user
Quote this message in a reply
05-31-2011, 07:09 PM
Post: #8
RE: How to optimize content images
If you want to go manual, try "irfanview". It's free, has a ton of filters, plugins, let's you save on whatever format you like and you can enhance, add special effects, resize, crop, etc.

I ran image outputs vs. smushit, punypng and file size was the same, but with a bit better quality.

Joe
Visit this user's website Find all posts by this user
Quote this message in a reply
06-02-2011, 04:01 PM
Post: #9
RE: How to optimize content images
For gradient or glossy backgrounds, go the way of CSS instead of image repeat.

There's a free online tool at: http://www.colorzilla.com

Joe
Visit this user's website Find all posts by this user
Quote this message in a reply
10-20-2011, 08:07 PM
Post: #10
RE: How to optimize content images
On MacOS X, there's a small tool that do the job :
ImageOptim
just a right click on the image file and it's done fore jpegs and pngs
And I love ImageAlpha to optimize 24 PNG to 8 bit PNG with Alpha transparency that works well on IE
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)