The best way would be to resize them before uploading them.
You could also try using this function to resize the image on the fly.
<?php
/*
* Resize images dynamically using wp built in functions
* Victor Teixeira
*
* php 5.2+
*
* Exemplo de uso:
*
* <?php
* $thumb = get_post_thumbnail_id();
* $image = vt_resize( $thumb, '', 140, 110, true );
* ?>
* <img src="https://wordpress.stackexchange.com/questions/41416/<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
*
* @param int $attach_id
* @param string $img_url
* @param int $width
* @param int $height
* @param bool $crop
* @return array
*/
if ( !function_exists( 'vt_resize') ) {
function vt_resize( $attach_id = null, $img_url = null, $width, $height, $crop = false ) {
// this is an attachment, so we have the ID
if ( $attach_id ) {
$image_src = wp_get_attachment_image_src( $attach_id, 'full' );
$file_path = get_attached_file( $attach_id );
// this is not an attachment, let's use the image url
} else if ( $img_url ) {
$file_path = parse_url( $img_url );
$file_path = $_SERVER['DOCUMENT_ROOT'] . $file_path['path'];
// Look for Multisite Path
if(file_exists($file_path) === false){
global $blog_id;
$file_path = parse_url( $img_url );
if (preg_match("/files/", $file_path['path'])) {
$path = explode("https://wordpress.stackexchange.com/",$file_path['path']);
foreach($path as $k=>$v){
if($v == 'files'){
$path[$k-1] = 'wp-content/blogs.dir/'.$blog_id;
}
}
$path = implode("https://wordpress.stackexchange.com/",$path);
}
$file_path = $_SERVER['DOCUMENT_ROOT'].$path;
}
//$file_path = ltrim( $file_path['path'], "https://wordpress.stackexchange.com/" );
//$file_path = rtrim( ABSPATH, "https://wordpress.stackexchange.com/" ).$file_path['path'];
$orig_size = getimagesize( $file_path );
$image_src[0] = $img_url;
$image_src[1] = $orig_size[0];
$image_src[2] = $orig_size[1];
}
$file_info = pathinfo( $file_path );
// check if file exists
$base_file = $file_info['dirname']."https://wordpress.stackexchange.com/".$file_info['filename'].'.'.$file_info['extension'];
if ( !file_exists($base_file) )
return;
$extension = '.'. $file_info['extension'];
// the image path without the extension
$no_ext_path = $file_info['dirname']."https://wordpress.stackexchange.com/".$file_info['filename'];
$cropped_img_path = $no_ext_path.'-'.$width.'x'.$height.$extension;
// checking if the file size is larger than the target size
// if it is smaller or the same size, stop right here and return
if ( $image_src[1] > $width ) {
// the file is larger, check if the resized version already exists (for $crop = true but will also work for $crop = false if the sizes match)
if ( file_exists( $cropped_img_path ) ) {
$cropped_img_url = str_replace( basename( $image_src[0] ), basename( $cropped_img_path ), $image_src[0] );
$vt_image = array (
'url' => $cropped_img_url,
'width' => $width,
'height' => $height
);
return $vt_image;
}
// $crop = false or no height set
if ( $crop == false OR !$height ) {
// calculate the size proportionaly
$proportional_size = wp_constrain_dimensions( $image_src[1], $image_src[2], $width, $height );
$resized_img_path = $no_ext_path.'-'.$proportional_size[0].'x'.$proportional_size[1].$extension;
// checking if the file already exists
if ( file_exists( $resized_img_path ) ) {
$resized_img_url = str_replace( basename( $image_src[0] ), basename( $resized_img_path ), $image_src[0] );
$vt_image = array (
'url' => $resized_img_url,
'width' => $proportional_size[0],
'height' => $proportional_size[1]
);
return $vt_image;
}
}
// check if image width is smaller than set width
$img_size = getimagesize( $file_path );
if ( $img_size[0] <= $width ) $width = $img_size[0];
// Check if GD Library installed
if (!function_exists ('imagecreatetruecolor')) {
echo 'GD Library Error: imagecreatetruecolor does not exist - please contact your webhost and ask them to install the GD library';
return;
}
// no cache files - let's finally resize it
$new_img_path = image_resize( $file_path, $width, $height, $crop );
$new_img_size = getimagesize( $new_img_path );
$new_img = str_replace( basename( $image_src[0] ), basename( $new_img_path ), $image_src[0] );
// resized output
$vt_image = array (
'url' => $new_img,
'width' => $new_img_size[0],
'height' => $new_img_size[1]
);
return $vt_image;
}
// default output - without resizing
$vt_image = array (
'url' => $image_src[0],
'width' => $width,
'height' => $height
);
return $vt_image;
}
}
Just put that in your theme’s functions.php file. You can use it in your theme like this:
<?php $image = vt_resize(get_post_thumbnail_id(), '', 277, 115, true); ?>
<img src="https://wordpress.stackexchange.com/questions/41416/<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
This page outlines some steps you can do to further optimize your site and is based on the recommendations by YSlow. I highly recommend W3 Total Cache and Yahoo’s Smush.it plugins.
http://wp.tutsplus.com/tutorials/10-quick-tips-optimizing-speeding-up-your-wordpress-site/