Using Large Images That Are Scaled Down to 1/2 the size? Bad for Load Times?

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 630 x 339 image have a huge negative effect on our pages speed?

Is there another method I could use that would be better? Or am I just better off making two separate images?