I have a lot of optimized Photoshop images with a width of 650px. I will be using pass-through to get them into my site. However on my website the images will have a width of 640px (to fit into the layout). Hence the browser will be scaling the images. Will this scaling noticeably effect download speed? (I understand the images are larger than necessary which will slightly slow the speed, but my question is specifically regarding the the in-browser scaling). Each page will have around six images on it.
Thanks for your help
This ties into using double the size images for ‘retina’ screens. The browser has to scale the images. Does this scaling noticeable effect speed?
It would slow the actual download only as much as the difference in file size between one image and the other. It would slow down the screen-painting process as much as it takes for the video card to calculate the bitmap to push to the screen buffer – which is to say, in a recent Mac or PC, not at all. Unless you were deliberately trying to make a test case with thousands of similar images on one screen, I doubt you could measure the difference at all.
Walter
On Nov 14, 2013, at 6:46 AM, Mark wrote:
I have a lot of optimized Photoshop images with a width of 650px. I will be using pass-through to get them into my site. However on my website the images will have a width of 640px (to fit into the layout). Hence the browser will be scaling the images. Will this scaling noticeably effect download speed? (I understand the images are larger than necessary which will slightly slow the speed, but my question is specifically regarding the the in-browser scaling). Each page will have around six images on it.
Thanks for your help
This ties into using double the size images for ‘retina’ screens. The browser has to scale the images. Does this scaling noticeable effect speed?
All the thumbnails there (about 135px wide) are actually full-size at 800px
wide. In other words, they are all scaled. See how fast it loads for you.
I’m using Walter’s Lazy Load action to load what is on-screen first, which
improves performance. I also used Photoshop’s Save for Device feature to
set the acceptable quality and file-size for each image.
The benefit for me is the full-size image is immediately loaded and cached
for any use I make of it afterwards - like the pop-up view of the image, or
the specific item pages, which both give the user a much smoother, more
immediate experience.
In other sites, like this one, my reason for using browser-scaled
pass-through images has to do more with whatever flexibility or
responsiveness I’ve built into the layout - http://www.bradfordhardware.com
Best,
–
Ernie Simpson
On Thu, Nov 14, 2013 at 6:46 AM, Mark email@hidden wrote:
I have a lot of optimized Photoshop images with a width of 650px. I will
be using pass-through to get them into my site. However on my website the
images will have a width of 640px (to fit into the layout). Hence the
browser will be scaling the images. Will this scaling noticeably effect
download speed? (I understand the images are larger than necessary which
will slightly slow the speed, but my question is specifically regarding the
the in-browser scaling). Each page will have around six images on it.
Thanks for your help
This ties into using double the size images for ‘retina’ screens. The
browser has to scale the images. Does this scaling noticeable effect speed?
You two are great. Thanks for your answers, it’s given me the confidence to use the images I have and not scale them in Photoshop, which would be very time consuming and I’d be adding compression on top of compression.