Reducing file size but keeping quality (for webpage)

ajax_andy

ajax_andy

Suspended / Banned
Messages
3,650
Name
Andy
Edit My Images
No
I have a slider on my home page and would like to put certain images on it but sometimes can't due to file size... is there a way to reduce file size but keep image quality (a plugin maybe?).

I have an image at the moment that is 14mb and I need to get it down to about 250kb... problem is to do so it ends up at '3 low' in Photoshop and looks pretty ropey, it's been reduce in pixel size to 1180 as with all my images, yet some like this one just won't reduce to the needed file size without looking awful. Some on the other hand are fine, I can reduce many to 250kb and keep them around '8 high'.

Any help would be much appreciated... I can send the file in question to anyone who needs it to look at if required :)
 
have you tried various resolution sizes … i.e. 72 dpi ………or is that too obvious, or does that not reduce the file size enough, but I think moving from 300 dpi to 72 dpi will reduce the fine size by 10%

does sharpen for screen help with screen IQ?

why 1180 and not 1024?
 
Last edited:
ajax_andy said:
I have a slider on my home page and would like to put certain images on it but sometimes can't due to file size... is there a way to reduce file size but keep image quality (a plugin maybe?).

I have an image at the moment that is 14mb and I need to get it down to about 250kb... problem is to do so it ends up at '3 low' in Photoshop and looks pretty ropey, it's been reduce in pixel size to 1180 as with all my images, yet some like this one just won't reduce to the needed file size without looking awful. Some on the other hand are fine, I can reduce many to 250kb and keep them around '8 high'.

Any help would be much appreciated... I can send the file in question to anyone who needs it to look at if required :)
Click to expand...

There are two ways of reducing image FILE size. The first and most obvious is to reduce IMAGE size, i.e. the number of pixels, such as reducing image width to 1024 pixels. That reduces image quality pretty much in proportion to the image width reduction. Image FILE size depends on the amount of jpeg compression. That encodes colour changes, and increases the amount of compression by decreasing the number of colours. That can reduce FILE size a lot without noticeable image quality reduction when viewed on screen or print. But it can't reduce file sizes much if there's a lot of fine detail in the image, or high ISO noise, which looks to it like lots of very fine detail. So for smallest jpeg file sizes make sure there's not a lot of noise in the image (i.e. make sure either the camera or editor settings have reduced it enough), then, after noise reduction, reduce image size as appropriate for the kind of image display. If the image FILE size is too big, then increase jpeg compression level until it fits within the required limits.

That sequence of processing gets you the best image quality you can have within a certain FILE size constraint. I've kept emphasising the difference between IMAGE size & FILE size because lots of people confuse them, which can result in unpleasantly & unnecessarily low image quality.
 
Last edited:
chris malcolm said:
There are two ways of reducing image FILE size. The first and most obvious is to reduce IMGE size,
Click to expand...

Can you explain that further as the OP has said he wants the (physical) image size to be 1180 x whatever?

as I understand it , Andy is wanting advice on how to achieve the best IQ at a file size of 250kb
 
Last edited:
BillN_33 said:
Can you explain that further as the OP has said he wants the (physical) image size to be 1180 x whatever?

as I understand it , Andy is wanting advice on how to achieve the best IQ at a file size of 250kb
Click to expand...

Apologies -- you replied to my accidental sending of half the first sentence of my much longer reply!
 
I use the free standalone program Easy Thumbnails which has a number of simple options and at 85% quality you can keep the same image size (or change that too) and reduce the filesize quite a lot but retain virtually all the quality.
.
 
chris malcolm said:
There are two ways of reducing image FILE size. The first and most obvious is to reduce IMAGE size, i.e. the number of pixels, such as reducing image width to 1024 pixels. That reduces image quality pretty much in proportion to the image width reduction. Image FILE size depends on the amount of jpeg compression. That encodes colour changes, and increases the amount of compression by decreasing the number of colours. That can reduce FILE size a lot without noticeable image quality reduction when viewed on screen or print. But it can't reduce file sizes much if there's a lot of fine detail in the image, or high ISO noise, which looks to it like lots of very fine detail. So for smallest jpeg file sizes make sure there's not a lot of noise in the image (i.e. make sure either the camera or editor settings have reduced it enough), then, after noise reduction, reduce image size as appropriate for the kind of image display. If the image FILE size is too big, then increase jpeg compression level until it fits within the required limits.

That sequence of processing gets you the best image quality you can have within a certain FILE size constraint. I've kept emphasising the difference between IMAGE size & FILE size because lots of people confuse them, which can result in unpleasantly & unnecessarily low image quality.
Click to expand...

Thank you that's a great reply :) So what's the easiest or even best way to increase compression and hopefully keep the image quality in the process? The file I'm looking at was taken during the day in lovely sunshine so no noise at all.
 
Andy

On our village website (Wordpress) we use a plug-in called "smush it" which does just this. Might be worth googling to see if it is a plug in for other software.
 
BillN_33 said:
have you tried various resolution sizes … i.e. 72 dpi ………or is that too obvious, or does that not reduce the file size enough, but I think moving from 300 dpi to 72 dpi will reduce the fine size by 10%

does sharpen for screen help with screen IQ?

why 1180 and not 1024?
Click to expand...

The PPI (it's not not dpi) means absolutey nothing to the size of your images. PPI has no effect on how a image is viewed on your screen or on the web. PPI does only one thing and one thing alone. It controls the print size for any given number of pixels - Nothing else.

Save the image at 72ppi or 300ppi, the image is still 1180px (all that matters is the number of pixels and the compression) - It will have ZERO effect on file size
 
Last edited:
ajax_andy said:
I have a slider on my home page and would like to put certain images on it but sometimes can't due to file size... is there a way to reduce file size but keep image quality (a plugin maybe?).

I have an image at the moment that is 14mb and I need to get it down to about 250kb... problem is to do so it ends up at '3 low' in Photoshop and looks pretty ropey, it's been reduce in pixel size to 1180 as with all my images, yet some like this one just won't reduce to the needed file size without looking awful. Some on the other hand are fine, I can reduce many to 250kb and keep them around '8 high'.

Any help would be much appreciated... I can send the file in question to anyone who needs it to look at if required :)
Click to expand...

It is quite a tricky job and if you need a large image (which 1180px is) your file size will be larger. As stated the content of the image too will determine the size. Save for the web may help and others use different programs with varying degrees of success. What you are trying to do we all have the same issue. Pixels and compression is the only way and you need to balance that.
 
EOS_JD said:
The PPI (it's not not dpi) means absolutey nothing to the size of your images. PPI has no effect on how a image is viewed on your screen or on the web. PPI does only one thing and one thing alone. It controls the print size for any given number of pixels - Nothing else.

Save the image at 72ppi or 300ppi, the image is still 1180px (all that matters is the number of pixels and the compression) - It will have ZERO effect on file size
Click to expand...

Thanks - just tested it - thanks for correcting me
 
Resize to desired final dimension using pixels on longest side.
Save using jpg compression to balance quality versus file size.
You should upload an image looking good as possible (re. sharpening etc) correctly sized to match the final display size or results can be very unpredictable on a web page.

In dial-up days we all got quite good at keeping web sized images under 100k.
I sometimes find 5MB+ images displayed at 640 pixels now!
Photoshop has save for web which is ideal to do this, another good one is Irfanview which gives complete control of compression when saving.
 
4wd said:
Resize to desired final dimension using pixels on longest side.
Save using jpg compression to balance quality versus file size.
You should upload an image looking good as possible (re. sharpening etc) correctly sized to match the final display size or results can be very unpredictable on a web page.

In dial-up days we all got quite good at keeping web sized images under 100k.
I sometimes find 5MB+ images displayed at 640 pixels now!
Photoshop has save for web which is ideal to do this, another good one is Irfanview which gives complete control of compression when saving.
Click to expand...
Irfanview used also to be among the best at reducing IMAGE size without introducing nasty artefacts or losing too much detail trying to avoid artefacts. Some of the other editors may by now have caught up with it. I'm waiting for someone to persuade me of that. Meanwhile it's still the program I always use for getting the best compromise between reduced image size, file size, and IQ.
 
chris malcolm said:
Irfanview used also to be among the best at reducing IMAGE size without introducing nasty artefacts or losing too much detail trying to avoid artefacts. Some of the other editors may by now have caught up with it. I'm waiting for someone to persuade me of that. Meanwhile it's still the program I always use for getting the best compromise between reduced image size, file size, and IQ.
Click to expand...

I have that program already so will give it a go :)
 
theurbanclown said:
Use something like jpegmini (lossy compression) initially, then use imageoptim if you're on a mac or FileOptimizer on Windows (both lossless compression).

Send me the file if you like and I'll see what I can do.
Click to expand...

I'll have a look at those mate... also I will send across the file too cheers :) Is it ok to WeTransfer it to the e-mail on your website?
 
ajax_andy said:
I'll have a look at those mate... also I will send across the file too cheers :) Is it ok to WeTransfer it to the e-mail on your website?
Click to expand...


Yeah, go ahead. Send the exported Lightroom jpeg.

Make sure the quality output is between 85 - 92. The actual number is irrelevant as long as it's between them and inclusive of those numbers. Also send me another one between 77-84 quality and don't sharpen them apart from the standard '25' :)
 
theurbanclown said:
Yeah, go ahead. Send the exported Lightroom jpeg.

Make sure the quality output is between 85 - 92. The actual number is irrelevant as long as it's between them and inclusive of those numbers. Also send me another one between 77-84 quality and don't sharpen them apart from the standard '25' :)
Click to expand...

Cool just sending over now. No sharpening done in LR on these other than the 25 standard, but a tiny bit was done in PS but very very minor. :)
 
4wd said:
Resize to desired final dimension using pixels on longest side.
Save using jpg compression to balance quality versus file size.
You should upload an image looking good as possible (re. sharpening etc) correctly sized to match the final display size or results can be very unpredictable on a web page.

In dial-up days we all got quite good at keeping web sized images under 100k.
I sometimes find 5MB+ images displayed at 640 pixels now!
Photoshop has save for web which is ideal to do this, another good one is Irfanview which gives complete control of compression when saving.
Click to expand...

I guess you are exaggerating a litte because even an uncompressed tif at 640 pixel longest edge (3:2 ratio) won't be near 5Mb - in fact it will be 800.6Kb.
 
i will second IrfanView as my weapon of choice for reducing file size it has an option within the jpeg save option that you can set the file size ( known as riot plugin ) as well as all the other usual options to do with quality etc.

i had a quick test at setting the file size to 240kb and 1180 on the longest side and the result is not bad

actual file size is 220Kb


posting this as an example hope you don't mind
 
Last edited:
RAW image processed and exported.

Uncompressed it's 5.3Mb
Compressed as Quality 10 JPG = 245Kb
Run through JPEGmini = 113Kb
 
EOS_JD said:
I guess you are exaggerating a litte because even an uncompressed tif at 640 pixel longest edge (3:2 ratio) won't be near 5Mb - in fact it will be 800.6Kb.
Click to expand...
On some websites the file it requests from the server is huge but they have specified a small size for layout purposes.
I've even seen thumbnail sized images that are 5MB or more.
A plus point is if you click the thumb it just expands the already downloaded file.
 
cosmicma said:
i will second IrfanView as my weapon of choice for reducing file size it has an option within the jpeg save option that you can set the file size ( known as riot plugin ) as well as all the other usual options to do with quality etc.
Click to expand...

Many years ago I recall a thread somewhere with the same original image aggressively resized and Irfanview came out better than photoshop (version at that time) - and far better than other options like paint (it was a long time ago :p)
Once you really screw file sizes you start seeing scratchy artefacts around contrast lines then eventually little squares become obvious.
These days with almost universal 'reasonable' internet speeds a image up to 500kb is still relatively small, but with dial-up you could see anything above 100kb loading line by line at times!
Even now if you have a page with many images the smaller the better as plenty of people are on speeds well under 5mb/s and have data limits to worry about.
 
Last edited:
4wd said:
On some websites the file it requests from the server is huge but they have specified a small size for layout purposes.
I've even seen thumbnail sized images that are 5MB or more.
A plus point is if you click the thumb it just expands the already downloaded file.
Click to expand...
It's only pointing to a file - An uncompressed 640 pixel image at (3:2 ratio) will only be 800.6Kb (fixed). JPG compression will reduce that somewhat
 
if the slider has a certain dimension, I would just resize from the original image to this defined pixel size (ignoring DPI, PPI as mentioned above) and then set quality to 85-90%
for a slider it won't be a large file
The most important thing is that your web application or plugin or hosting doesn't then recompress the file to some silly lossy format or setting.
 
As you have photoshop you are also able to do a save for web
in that you can set the dimensons and the quality of the jpeg.

I usually define the size in photoshop itself then do a save for web and define the quality of the jpeg.

if you do it on a duplicate copy there is no danger of corrupting the original.
 
As above from Terry, try out PS, it has a nifty feature showing 2 up or 4 up previews of what the result will look like at different settings.
You don't need to change the settings beforehand you can do the size change & image quality from here;
File - Save for web & devices
You'll find various settings available, give it a go at least.
 
Last edited:
You must log in or register to reply here.
Back
Top