Image sizing for the web

When making slide shows I have always saved all my images as jpeg format and used the Photoshop option to ‘Save for Web’ and also converted to the SRGB colour space. This meant that the final size of the image was made much smaller and was much more friendly with web browsers.
Is this the correct process that I should be using for images created for my website in Rapid Weaver?

I have lots of slide shows on my sites and I have found that exporting the photo (usually from 1mB - 4mB in size) from my photos library works well. I generally use a quality of high or medium and a size of small, medium, or large. I like to get the jpg file that I use in the slide show below 1 mb and preferably around 50 kb. Often I can get by with less than 10 kb since I’m using a weaverpix gallery and the photos are of cats available for adoption.

I have tried using the apps for reducing the size (squash, imageoptim, and batch photo) and find that they don’t compress very much. I think they are used mainly for photos that a photographer would post on a website where they need to be larger and better resolution.

The reason I don’t use the photoshop, “save for web” is that it’s an extra step when the photo is already in photos.


@ronnieboot – Basically, your method is correct. But you can modify it a bit, if you deem it worth your while.

As a photographer, you want your images to look as good as possible. As a web designer, you want them to load in a browser as quickly as possible. You need to find the compromise that is best for you.

Converting your color space to sRGB is necessary. Mainly, for you, to see on your monitor what an image will look like on Internet – but only to you. Other viewers will see different colors and tonality, because they have different monitors (correctly calibrated, incorrectly calibrated, uncalibrated). Besides, older browsers (perhaps newer ones too) do not support color profiles. So, saving the color profile within your JPEG files makes them bigger and is quite pointless.

Now, you may find out that the “Save For Web” step in Photoshop is obsolete. Instead, you may want to output your images as sRGB JPEGs at the exact dimensions you will use in your website, at 72ppi resolution. If you want to make them compatible with Retina (and similar) screens, make dimensions of your JPEGs twice as big as normal. Remember: what counts is dimensions and not resolution.

Then, if you need to reduce their file size, run them through one of the plethora of image-reducing apps (no specific recommendation from me).

I won’t suggest any specific standard of image-size, either. Just for a reference: in my own photo galleries I use JPEGs exported from Lightroom at 80% quality and 72ppi. That gives me files between 170 kB and 425 kB for full size images. For thumbnails I use JPEGs that are much smaller – both in dimensions and in file-size. That works great for me.

Other people will certainly tell you to keep the file size below 100kB. If you can live with reduced image quality, that’s fine, too.