Image Optimization

Image Optimization

by curt bixel -
Number of replies: 7

Thanks to all of you who have helped me lately.  My site is up and running quite well.  I am now working on performance.  The site is performing well, but I am interested in the image optimization I read about in Moodle docs.  It seems to suggest that all the graphics, icons, etc, that come as part of moodle could benefit from image optimization using JpegOptim, OptimPNG, and Gifsicle.  

The installation of these programs on my server is something I think I can fight through given time.  (You guys could probably all do it in about 3 seconds).

Can anyone tell me what kind of performance improvements are generally realized after taking this step.  (I imagine that it would depend a lot on what size images have been uploaded by users after initial installation, but I am interested in just a rough idea of what others have experienced.)

Average of ratings: -
In reply to curt bixel

Re: Image Optimization

by Ken Task -
Picture of Particularly helpful Moodlers

Not an image expert by any means ... and, like you, looked at this.  With Moodle 2, however, image optimization AFTER the files are uploaded to Moodle presents an interesting situation.

Are you using Google's pagespeed?  Not sure Google's pagespeed takes into account dynamic systems like Moodle (which already has some caching of images) - browsers too!

Think all three utilities listed have various flavors, ie, Winders, MacOSX, and Linux.  While all do as advertised am wondering if it's a lot of work for very little gain - especially when working with the images provided by themes in  the original packages of Moodle.

As far as what images to work with …

If, for example, a student has used an image in forum posting that file becomes part of the new and improved Mdl file system.  It is no longer humanly recognizable on the back end of Moodle and placed in filesdir.

For example: have a 'owl-binocs.jpg' on a front page block of a 2.x site.  That jpg file isn't in filesdir by name, but by hash code.  So finding the file is an adventure.  Once found and one is working with the 'hashed' name, will the command line versions of utilities expect .gif, .png, .jpg extensions or can they work with the hashed named files?  

Here is the query:
select * from `mdl_files` where `filename` like "owl-binocs.jpg"

Here's the output (just one line - there were three actually):
|    5 | b6bd31d7d12f5d1b1e0d26957529efa2f71a3646 | 20b939670837303e339c823e2df257082512a43f |         2 | course    | section  |         2 | /        | owl-binocs.jpg |      2 |     3154 | image/jpeg |      0 | owl-binocs.jpg

The file that represents owl-binocs.jpg is really in:
/var/www/moodle24data/filedir/b6/bd/ and is byname now:
b6bd31d7d12f5d1b1e0d26957529efa2f71a3646

One should not change the file name as seen above.

And notice it's already ONLY 3154 in size.  How much more optimized can one make it?  Enough to justify the work to optimize it?

For the Instructor, it is wise to optimize the *large* images **before uploading** rather than after.  Student, on the other hand, won't take the time to do that ... a pic off a handheld device will usually be large and not really 'web ready'.

Links for references ...


JpegOptim
http://blog.josemanuelperez.es/2009/06/jpegoptim-optimize-jpg-page-speed/
http://freecode.com/projects/jpeginfo

OptimPNG
http://optipng.sourceforge.net/pngtech/optipng.html

Gifsicle
http://www.lcdf.org/gifsicle/
http://www.lcdf.org/gifsicle/man.html

Just my 2 cents! ;)

'spirit of sharing', Ken

Average of ratings: -
In reply to Ken Task

Re: Image Optimization

by curt bixel -

Tried google's pagespeed.  Scored 92 out of 100.  I was, however, only able to check out the log in page.  If I try to check out the actual pages students will be using, PageSpeed just redirects back to the log in page.  Not sure how to get past this. 

Average of ratings: -
In reply to curt bixel

Re: Image Optimization

by Ken Task -
Picture of Particularly helpful Moodlers

Install Pagespeed extension for FireFox:

https://developers.google.com/speed/docs/insights/using_firefox

Start the extension.  Then login and go to whatever you'd like to test.Might have to re-scan a resource page or whatever once logged on to get pagespeed to kick in an analyize it.

This is not very scientific, but as a rule of thumb, if the image you upload has to be resized much at all when in the editor, then it's probably in need of optimization *before* one uploads.

'spirit of sharing', Ken

Average of ratings: Useful (1)
In reply to Ken Task

Re: Image Optimization

by David Scotson -
If this was considered worth doing, then it wouldn't be impossible to write a script that losslessly compressed all the images and then updated the hashes to the hash of the newly compressed file, though it's obviously harder than standard command line re-compression and more Moodle specific.

For most "content" uploads it probably makes more sense for this all to be automated anyway, so that end-users don't need to care about the image they upload and Moodle would automatically resize and recompress it as appropiate so that you can get an easy overview of the image but also access the original untouched if necessary See for example Flickr or Wikipedia for systems that do this to uploaded images.

For images that are part of the Moodle UI, and therefore accessed much more often and by many more people, I think it makes more sense for these to be compressed by Moodle.org or the Theme designer. They've almost certainly already been resized appropriately already, and it saves everyone having to install lossless compressors. I think this mostly happens already, at least for core images. But if you're doing some customisation for your institution then running these commands over any files you use is well worth it. It's a relatively low risk, low effort activity. You can even upload them to web sites if you're not familiar with the command line e.g.:

Yahoo's Smush.it:
http://www.smushit.com/ysmush.it/

which wraps the various tools already mentioned in an easy to use UI.
Average of ratings: -
In reply to curt bixel

Re: Image Optimization

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Hi Curt

You wrote:
> I am interested in the image optimization I read about in Moodle docs. It seems to suggest that all the graphics, icons, etc, that come as part of moodle could benefit from image optimization using JpegOptim, OptimPNG, and Gifsicle.

Sorry, can't help you with that. But I see, you have been getting good advice. Possibly these two current discussions are also related:
- "Performance impact of user profile images?" https://moodle.org/mod/forum/discuss.php?d=219019
- "Measuring the speed of Moodle" https://moodle.org/mod/forum/discuss.php?d=217664

BTW, where does Moodle docs describe image optimization?

My request is about the following:
> Thanks to all of you who have helped me lately. My site is up and running quite well. I am now working on performance. The site is performing well, ...

There have been a number of discussions. Do you mean "The quiz function of moodle 2.3.2 seems to put quite a strain on a server" https://moodle.org/mod/forum/discuss.php?d=213259 ? Could you summarize the pointers which were useful to you, as explained here: http://docs.moodle.org/en/Moodle.org_forums_Code_of_Conduct#Provide_feedback_for_others ?
Average of ratings: -
In reply to curt bixel

Re: Image Optimization

by kenst tjas -

One of thing you want to optimize are graphics..and bytesbites.com .. far best online optimizer i tested, i took file optimized in smush.it and it optimized it even more.. not much more but enough if you have portal or website with many images. It is kinda must do these days..

Average of ratings: -