The Lemon Fool

I am changing one of my websites primarily currently text and few photos to primarily photos (still only, no video/movie) and a little text. Currently, the total size of the site including approximately 150 images is about 128MB, comprising some 385 items.

Most of the photos image size that I shall be using are approximately 35MB each. Using Lightroom 6, I shall reducing each image size for the web.

As I understand, photo sharing sites impose a limit on image size primarily to avoid overloading their servers. I don't have have that issue. However, I don't want my image sizes to be so big that to view the photos on-screen one has to allow a long time (what seems like forever) for each photo to be displayed. And although it's not a commercial site and I don't have to cater for outdated monitors or slow connection speeds, I'd like the viewing to be an enjoyable experience.

The software I shall be using consists of thumbnail and lightbox for each photo, the software incorporates a 'lazy loading' feature: images only load as the user scrolls down.

The photos will first display as a thumbnail and then user click to full (lightbox) size and/or retina lightbox size. It's suggested respective sizes (which presuppose the software developer's hosting site limitations) should be thumbnail 60KB each, lightbox 500KB each, and retina lightbox 1.6MB each.

i shall have numerous pages on the website for different subjects so the total size of the site is a factor. I haven't decided upon the total number of images or the total number per page although presumably that doesn't make any difference) - I won't know that until I've prepared a draft for final edit/removal - but let's say at least 1,000 images.

What I'd like to know please if whether I should follow the suggested sizes or if I could increase the image size without prejudicing the viewing experience and if so what would be a reasonable maximum for each thumbnail, lightbox and retina image, all things considered. Also, bearing in mind the image size start to start with, what percentage for jpeg would maintain the quality?

tia
Bnc

I shall post this on the computer board as well

brightncheerful wrote:Most of the photos image size that I shall be using are approximately 35MB each. Using Lightroom 6, I shall reducing each image size for the web.

What format are these images? What pixel size are they? From the file size you quote I would guess it's a lossless format.

There are two ways to reduce the file size. You can use either or both.

The first and most obvious is to reduce the resolution - shrink the dimensions in terms of pixels. This of course results in a poorer viewing experience (less detail) but may be acceptable.

The second is to save in a compressed format, JPEG is a common choice for this. This is a lossy format - the image will not be an exact replica of the original, but to the eye it will look the same (unless heavily compressed). The advantage is that you can reduce file size without affecting the perceived sharpness of the image. Where the compression is achieved is in the large areas of similar values that have little detail, the edges and fine details are preserved at the expense of the areas of low detail - the eye doesn't notice.

You can choose a compression level when saving as jpeg. The higher the compression the more the compression artefacts are visible. There is usually a 'sweet spot' where significant size reduction can be achieved without the compression artefacts being visible (except under a microscope). Experiment with different compression levels to find the best compromise.

More (a lot more) on JPEG here: https://en.wikipedia.org/wiki/JPEG

And on JPEG in Lightroom here:

Adobe wrote:Quality
(JPEG) Specifies the amount of compression. JPEG uses lossy compression, discarding data to make a file smaller. Drag the Quality slider or enter a value between 0 and 100 in the Quality box.

https://helpx.adobe.com/lightroom/help/ ... _heading_3

brightncheerful wrote:what percentage for jpeg would maintain the quality?

JPEG compression artefacts are most visible in areas with no details but a smooth gradient in tone - such as a clear blue sky. Higher compression starts to make such areas 'blocky' rather than smooth. Images with a high level of detail will compress less for a given compression level - images with large areas of smooth tone will compress more. It's the compression level that determines how visible the artefact are - you can get away with higher compression if there's a lot of detail.

I have experimented on a typical 25MB .bmp file. Such artefacts are almost invisible (even when enlarged) at a compression of 50 to make a 800KB .jpeg. At 80 they are visible but not noticeably so unless enlarged - but the file size is 450KB. At 20 the size is 1.4MB and the artefacts are invisible, even when enlarged.

Experiment and see what suits you best. Anything below 50 should be acceptable in most cases, but you may want to reduce this for images with a lot of clear sky (though even then the file size will be small, such images compress very well).

Thank you.

The original format is Raw. I'll export to jpg.

pixel size 4.88 µm

7360 × 4912 pixels (36.3 megapixels)

I've come across this during my research.

http://www.jpegmini.com and http://www.jpegmini.com/pro

I haven't tried it yet. Anyone here use it?

I use GIMP to work on static image data
https://www.gimp.org/

When writing jpegs and pngs it allows setting some of the parameters that control how much information is lost through compression and how hence you can experiment with various versions.

Reducing the number of pixels, of course, is also a way of reducing the data in the image whilst still having a useful image. GIMP will rescale as well.

Another vote for GIMP.

I looked at it a few years ago and couldn't make head nor tail of it.

I tried again recently and found it superb for just about all aspects of image manipulation.

I don't know if its now more user friendly, or its just that I have a bit more knowledge of how these programs work. I used to use an early version of Photoshop Elements and have used Zoner but GIMP is not only totally free, its got far more functoknality and control than virtually all programs, with the probable exception of a full version of Photoshop.

brightncheerful wrote:I've come across this during my research.

http://www.jpegmini.com and http://www.jpegmini.com/pro

I haven't tried it yet. Anyone here use it?

You have LR 6 - so no need for any other software.

The main determinant for your image size, both in pixels and number of KBs is the medium via which your audience will view them.

Will it be via desktop/laptop or a mobile device such as tablet/phone?

There is no point having high res images that cannot be viewed on a small screen - unless a requirement of your audience is to view at 100% resolution for a very specific reason on say a 4K screen.

Given the size of most devices, I would doubt you would need any image much more than 800 pixels along its long side. The 'Export' screen in LR allows you to set this pixel resolution as well as the compression level independently.

So depending on the image content, you may wish to have a play with the compression setting to minimize the JPEG file size whilst providing sufficient image quality for the assumed viewing device.

staffordian wrote:Another vote for GIMP.
I looked at it a few years ago and couldn't make head nor tail of it.

GIMP is good but always suffered from a lack of usability. There are alternatives though, I recommend paint.net which I always used for image manipulation. It too is completely free and is easier to use, particularly for Windows users.

gbjbaanb wrote: GIMP is good but always suffered from a lack of usability....

My trusty standby is a 17 year old version of PaintShop Pro 7. Much like Photoshop in features and usability. GIMP has the same features as both, but an eccentric interface more to the tastes of the unix-geeks that wrote it. It is however about the only decent free editor that runs on a Mac.

For anybody who doesn't want to work with a full-on image editor and just do basic resizing work I highly recommend:

Free Image Converter
http://www.freeimageconverter.com/

regards, dspp