Is it possible to reduce image filesize on the fly (when users enter my website)?

Question

The main problem here is about too large file size of image not image re-sizing

My wordpress website is like a web gallery which contains many images.

Initially, I just uploaded hundreds of images via wordpress media uploader without caring of its file size at all.

However, when i browse my website, it's too slow to load the homepage because the image file size is too large.

Since i don't want to modify images which are already uploaded, is it possible to create a filter or plugin to reduce image filesize (no dimension changes)or reduce its quality on the fly to make the website load faster?

P.S. Anyways, my last resort is to use photoshop to modify images and reduce its quality in order to reduce its file size.

Any suggestions?

Answer 1

It is possible to re-size images on the fly if you are comfortable programming in PHP. Judging from your question, I expect that your not there yet. If that is the case, you should check out the Regenerate Thumbnails plugin. With this plugin, you can change the images sizes you want in the media settings page and then re-size your images all at once, in groups or one at a time.

If you are comfortable programing, you need to check out the WP_Image_Editor class. There are several tutorials on the web that will help you get started.

Update: You say you are comfortable coding so here it goes. You will need a function that will grab the image, adjust the quality and stream it to the browser. I do something similar in a plugin I am working on.

You will need to create a new slug (in my case it was http://my.domain.com/thumbnail). Each image you want to adjust the quality on will use the url http://my.domain.com/thumbnail?imageurl=myimage.jpg. in functions.php you need to hook it with add_action( 'parse_request', 'yourfunction' );. Then:

function yourfunction ( $wp ) {
    if ( 'thumbnail' == $wp->query_vars['pagename'] ){
        $imagefilename = $_REQUEST['url']; // change to real path left to you
        $image = wp_get_image_editor( $imagefilename );
        $image->set_quality( $jpg_comp_level );
        $image->stream();
    }
}

Hope this helps

Answer 2

One idea is to use TimThumb to regenerate everything on the fly for you. This was a solution I used for my own photo site. You can control the size of the images and many other options by setting the parameters. For example where your images are output you could edit it to something like this :

<img src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, 'my_post_type', true); ?>&w=60&h=60&zc=1" alt="<?php the_title(); ?>" />

This should accomplish what you need of faster loading as well as being able to serve different quality images without touching the originals.

I recently learned that there is some vulnerability with this script so if you go this route you may want to check out this plugin.

http://wordpress.org/extend/plugins/timthumb-vulnerability-scanner/