0

I run a Wordpress site that has thousands of posts, each with at least one main jpeg image per post that we've cropped down to 240px height x 135px width and reduced its file size in Photoshop using the Save For Web feature. So in the case of archive pages, we could have 20 to 30 of these images loading on a single page.

Because we're designing an app around the site and want our images to look high quality, the 240 x 135 size isn't going to cut it on higher resolution screens, so we're going to need to update the dimensions.

My question is: If we set each post to use a 603 x 339 image within their individual pages, but then set archive pages that list posts with smaller images to scale those 603 x 339 images back down to 240 x 135 with CSS. How bad is it going to be for load times? Since an archive page will still be loading 20-30 images that are set to display in 240 x 135 will we be okay? Or will the actual file size of the source 603 x 339 image have a huge negative effect on our pages speed?

Joe Grizzly
  • 75
  • 2
  • 10

2 Answers2

2

It Surely does increase loadtime heavily

UPDATE: Say you have an image (603x339) on your filesystem. Use the class given here. Then use 

$resizeObj -> resizeImage(240 ,135 , 'crop');
$resizeObj -> saveImage('sample-resized.jpg', 100);

to create a resized image and use that image in your archive pages.You can delete this image to save the filesystem size at the cost of more computation each time. However for your main pages you can still use the image in your filesystem as that is not modified

Alternative Solution:

Wordpress has a plugin called ImageMagick Engine

Using that you can re-size an image before actually sending it to the client machine.Thereby you can send the image with the size you want to display (no resizing required again at the client end).

Hence restricting the load to what is required.

Or else simply use the image compression tools (like Caesium or anyother ) which will reduce image size on your system itself

Community
  • 1
  • 1
funtime
  • 652
  • 1
  • 5
  • 20
  • Funtime: Can you explain what you mean by resize an image before sending it to the client machine? How would this work in the case of the example I said above where our Wordpress post would use the main image of 603x339 and then we wanted to use that same image scaled down when being called on archive pages. – Joe Grizzly Mar 14 '13 at 03:14
1

Scaling with CSS still requires the entire image to be loaded, then the browser has to scale that down before displaying it, so it would be fractionally slower probably than displaying the images in their original size. For better speed, you'd need to send pre-scaled images to the client.

Ninjammer
  • 157
  • 1
  • 8