Do you get frustrated by images that load slowly on websites? I do. So I decided to do some research. I ploughed my way through Google Analytics and discovered that I should speed up file loading on my site by 17% *Grumpy expression* so I set about working out how to create the optimum size of image without breaking out into a sweat.
Not so straightforward it seems.
There's lots of research and new developments, new types of files and all sorts.
So I thought, before my head explodes with all this stuff I would reduce it down to the simplest way I could understand and use it sensibly.
And here it is:
It may not be EVERYTHING you could do.
It may not be PERFECT.
But it works.
And as I load m:ostly photographs I am saving images as jpegs
Jpegs are best for photographs
Gifs for moving images
PNG for graphics
Step-by-step instructions to resize and save your jpeg:
Open your file in Photoshop (I'm assuming that you have already adjusted for contrast, levels etc. then:
select Image > image size
The dialogue box shows the current size of this image the resolution and length in pixels. This is a large file around 10mg we need to get this down to 300-600k without losing quality! That's 3% of the original file size. Hmmm.
Reduce the resolution to 72 pixels/inch
The longest side to around 700-800 pixels
The image drops down to this size. Don't panic.
View the image as actual pixels and it's nearly the same size as the original and still looks pretty good - see like this...
view > actual pixels
Now save the file like this:
File > save to web and devices
You will see a dialogue box like this:
The left hand image is the original.
Tick the box called progressive which saves the image so it will load smoothly.
Save at about quality 40 (you can adjust this to gauge what difference it makes to your file size and quality) The aim is to retain as much crispness at the smallest file size around 300-500k. This image is now around 300k and still looks good for the web.
Add your watermark, copyright signal check out how to do this here
Adding text will add layers so flatten the image before you save again. But this time don't reduce the quality of the image when you save.
Save with a new file name.
Here is your final image. Once you get used to doing this it takes just a minute or two.
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.