Optimising photos for the web

Computerised Mount Cutters, Computers, other gadgetry.
Post Reply
Trinity
Posts: 688
Joined: Wed 06 Jan, 2010 8:01 pm
Location: Yorkshire England
Organisation: Trinity Framing
Interests: Classic Tractors, Honda Blackbird, Eunos, anything with an engine
Contact:

Optimising photos for the web

Post by Trinity »

I don't want to distract from the assessment of my website in another post- - can anyone do an idiots guide to optimising photos sizes for the web. If it's relevant I'm on Windows 7 - that might speak volumes.
Do not be afraid of strangers, for thereby many have entertained angels unawares.
User avatar
StevenG
Posts: 1147
Joined: Thu 31 Jan, 2013 8:01 am
Location: Tyrone, N.Ireland
Organisation: Featurepiece Frames
Interests: Movies, always trying to get things better, Wasting money on things I don't need, reading stuff on here, eating sandwiches & being thankful for the small things
Contact:

Re: Optimising photos for the web

Post by StevenG »

what do you currently use for editing your images? any chance you have photoshop?
User avatar
David McCormack
Posts: 1442
Joined: Tue 02 Aug, 2011 10:14 am
Location: South Lakes
Organisation: Framing
Interests: Cycling, walking, darkroom photography and laughing a lot!
Location: Cumbria
Contact:

Re: Optimising photos for the web

Post by David McCormack »

As mentioned by Featurepiece, if you have Photoshop or Photoshop Elements, you can use the 'Save for Web' feature when saving your jpegs. The are two parts to saving for web: quality and size.

The attached two images here are the same size but one is straight out of the camera and has a file size of about 2mb and the other has gone through ‘save for web’ at a quality setting of 50% and produces a file size of around 300kb. If you look at both images at full size you will find it hard to see a difference in quality, but there is a difference, which is not good for fine prints but ok for web pages.

Thumbnails on a web page need only be around 100 to 300 pixels and can link to larger images or full size images if you want. The thumbnails on your studio page are full size images of around 2000 pixels.

You should be able to get Photoshop Elements on a free trial and is about £50 to buy.
Large file not good for impatient website visitors!
Large file not good for impatient website visitors!
Out-of-camera.jpg (2.11 MiB) Viewed 13159 times
Small friendly file for web and framer's forum!
Small friendly file for web and framer's forum!
Save-for-web.jpg (373.56 KiB) Viewed 13159 times
"You know, there's a right and wrong way to do everything!"
Oliver Hardy.
https://www.instagram.com/davidaustinmccormack/
User avatar
David McCormack
Posts: 1442
Joined: Tue 02 Aug, 2011 10:14 am
Location: South Lakes
Organisation: Framing
Interests: Cycling, walking, darkroom photography and laughing a lot!
Location: Cumbria
Contact:

Re: Optimising photos for the web

Post by David McCormack »

Just looking at your studio webpage again, you have about 11 images all about 1.5mb each which means when viewing that page you need to load about 16mb of images.

The page that each image links to contains the same image but much smaller. The Morso image for example is 2048 x 1536px with a file size of 1.4mb on the thumbnail page but on the linked page the image is only 525 x 393px with a file size of just 36.9kb. It’s the same throughout the site.

I think your website designer has got all the image files back to front!

If the images on the studio thumbnail pages were all about 30 to 50 kb then that's just 0.5mb to load for all the images and if each single image on the linked page was the 1.5mb that would be ok too but if optimised then it could be just about 300kb and then you have a lovely fast loading website for all us impatient slow broadband users on old macs!
"You know, there's a right and wrong way to do everything!"
Oliver Hardy.
https://www.instagram.com/davidaustinmccormack/
Trinity
Posts: 688
Joined: Wed 06 Jan, 2010 8:01 pm
Location: Yorkshire England
Organisation: Trinity Framing
Interests: Classic Tractors, Honda Blackbird, Eunos, anything with an engine
Contact:

Re: Optimising photos for the web

Post by Trinity »

David,
If I use anything its Lightroom 5, but all I've been doing to date is cropping.
In my studio section they are straight of the card into the website - as you might guess it's a wordpress site.
Do not be afraid of strangers, for thereby many have entertained angels unawares.
User avatar
prospero
Posts: 11492
Joined: Tue 05 Jun, 2007 4:16 pm
Location: Lincolnshire

Re: Optimising photos for the web

Post by prospero »

For basic manipulation there are many freebee progs. I have used Irfanview for years as a picture browser, but you can crop/resize/change format and lots of other useful featues like colour correction. No drawing tools but WTH. :lol:

One thing I would say with any editing prog: work on a copy, not the original file. :D
Watch Out. There's A Humphrey About
User avatar
David McCormack
Posts: 1442
Joined: Tue 02 Aug, 2011 10:14 am
Location: South Lakes
Organisation: Framing
Interests: Cycling, walking, darkroom photography and laughing a lot!
Location: Cumbria
Contact:

Re: Optimising photos for the web

Post by David McCormack »

In Lightroom you need to 'Export' your images and from there you can resize and change jpeg quality.

But as I say, the images on your linked pages from the studio thumbnails have been resized so who has done that? All the meta data has gone from those images which suggests they have gone through a 'save for web' somewhere along the line?
"You know, there's a right and wrong way to do everything!"
Oliver Hardy.
https://www.instagram.com/davidaustinmccormack/
User avatar
David McCormack
Posts: 1442
Joined: Tue 02 Aug, 2011 10:14 am
Location: South Lakes
Organisation: Framing
Interests: Cycling, walking, darkroom photography and laughing a lot!
Location: Cumbria
Contact:

Re: Optimising photos for the web

Post by David McCormack »

As Prospero says, it's a good idea to work on copies, but with Lightroom, when you export and change size and quality it applies those changes to a copy and not your original :D
"You know, there's a right and wrong way to do everything!"
Oliver Hardy.
https://www.instagram.com/davidaustinmccormack/
Trinity
Posts: 688
Joined: Wed 06 Jan, 2010 8:01 pm
Location: Yorkshire England
Organisation: Trinity Framing
Interests: Classic Tractors, Honda Blackbird, Eunos, anything with an engine
Contact:

Re: Optimising photos for the web

Post by Trinity »

Back to the web man methinks - I very much appreciate your help on this and I will get back to you.
Do not be afraid of strangers, for thereby many have entertained angels unawares.
kev@frames
Posts: 1951
Joined: Mon 09 Jan, 2006 12:06 am
Location: Penzance Cornwall UK
Organisation: Moonshine Framing Penzance
Interests: 4 or 5 ...
Location: West Cornwall, UK
Contact:

Re: Optimising photos for the web

Post by kev@frames »

download mihov image resizer.
it'll do them in batches as well, convert file types, make them all the same size, vary the resolution, etc.
http://www.mihov.com/sw/en/ir.php
just make sure you click no, or uninstall any toolbar addons if the installer tries it on.
video tutorial
http://www.youtube.com/watch?v=rHtSGU7O1Xc
Trinity
Posts: 688
Joined: Wed 06 Jan, 2010 8:01 pm
Location: Yorkshire England
Organisation: Trinity Framing
Interests: Classic Tractors, Honda Blackbird, Eunos, anything with an engine
Contact:

Re: Optimising photos for the web

Post by Trinity »

Kev, my Sophos advised Adware or PUA detected and moved to quarantine - would you expect this
Do not be afraid of strangers, for thereby many have entertained angels unawares.
User avatar
David McCormack
Posts: 1442
Joined: Tue 02 Aug, 2011 10:14 am
Location: South Lakes
Organisation: Framing
Interests: Cycling, walking, darkroom photography and laughing a lot!
Location: Cumbria
Contact:

Re: Optimising photos for the web

Post by David McCormack »

If you've already got Lightroom installed on your computer and have been using it for some work then I would try the export feature before downloading something else from the web :xcomputer: Better the devil you know :twisted:
"You know, there's a right and wrong way to do everything!"
Oliver Hardy.
https://www.instagram.com/davidaustinmccormack/
Richard Photofusion
Posts: 221
Joined: Wed 02 Jun, 2010 10:12 am
Location: Brixton, London
Organisation: Photofusion
Interests: Photography, and carting a young gymnast from class to comp to where ever the next sport is.*

*young, now a teenager...
Location: Brixton
Contact:

Re: Optimising photos for the web

Post by Richard Photofusion »

In LR or PS, ensure that you save as sRGB - s stands for standard, simple, or stupid - the default assumed profile of the interwebs.
I'd recommend putting in your contact metadata, and caption (helps google type searches and web optimisation, though costs you a couple of KB of file size), and quite possibly applying a lightly visible watermark.

In LR, resize the jpeg to your desired pixel dimensions, and you can easily get away with a compression of 50% or even lower.
Trinity
Posts: 688
Joined: Wed 06 Jan, 2010 8:01 pm
Location: Yorkshire England
Organisation: Trinity Framing
Interests: Classic Tractors, Honda Blackbird, Eunos, anything with an engine
Contact:

Re: Optimising photos for the web

Post by Trinity »

Thanks for the assistance really appreciate it. I'm going to have a go tonight when hopefully I can concentrate on it.
Is the size reduction a matter of trial and error, sort of see how you go, or is there a rule of thumb type of approach for a start off?
Do not be afraid of strangers, for thereby many have entertained angels unawares.
User avatar
David McCormack
Posts: 1442
Joined: Tue 02 Aug, 2011 10:14 am
Location: South Lakes
Organisation: Framing
Interests: Cycling, walking, darkroom photography and laughing a lot!
Location: Cumbria
Contact:

Re: Optimising photos for the web

Post by David McCormack »

"Sort of see how you go" ... sounds like the way I work on most things! :yes:

I would say thumbnails around 100 to 250px and full size images around 700 to 900px but you can go bigger up to around 1600 to 2000px if you want people to zoom in?

This website (just a random google search, but nice images) has thumbnails about 200px and larger images around 750px which is large enough for me. Note how quick the page of thumbnails loads considering there is about 50 photos :D

http://www.colethompsonphotography.com/Favorites.htm
"You know, there's a right and wrong way to do everything!"
Oliver Hardy.
https://www.instagram.com/davidaustinmccormack/
kev@frames
Posts: 1951
Joined: Mon 09 Jan, 2006 12:06 am
Location: Penzance Cornwall UK
Organisation: Moonshine Framing Penzance
Interests: 4 or 5 ...
Location: West Cornwall, UK
Contact:

Re: Optimising photos for the web

Post by kev@frames »

Kev, my Sophos advised Adware or PUA detected and moved to quarantine - would you expect this

yes I would with Sophos because of the aforementioned toolbar helper that you need to disable/remove it after installation, is viewd as adware. most other AVs let it through because in theory its "optional".

when I'm not at home, I use this online tool to resize in batches.
http://www.picresize.com/batch.php
DCS
Posts: 149
Joined: Sun 11 Dec, 2011 12:48 pm
Location: Durham UK
Organisation: Durham City Studios
Interests: Photography and Framing
Location: Durham City
Contact:

Re: Optimising photos for the web

Post by DCS »

One of the best ever image editors/resizer/optimizers available is Faststone Image Viewer.
It is capable of basic editing, batch resizing, slideshows etc. etc. and like many others it is also FREE.

They do ask for a donation and to be honest worth £10 of anyone's money for its usefulness. If you don't wish to donate it's totally free with no adware or stealth programmes whatsoever.

http://www.faststone.org
For my sins I own and operate
http://www.durhamcitystudios.com
Post Reply