Donate to Remove ads

Got a credit card? use our Credit Card & Finance Calculators

Thanks to johnstevens77,Bhoddhisatva,scotia,Anonymous,Cornytiv34, for Donating to support the site

Reducing image size for website

Kit, locations and help
brightncheerful
Lemon Quarter
Posts: 2209
Joined: November 4th, 2016, 4:00 pm
Has thanked: 424 times
Been thanked: 799 times

Reducing image size for website

#88596

Postby brightncheerful » October 16th, 2017, 3:16 pm

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

Breelander
Lemon Quarter
Posts: 4178
Joined: November 4th, 2016, 9:42 pm
Has thanked: 999 times
Been thanked: 1855 times

Re: Reducing image size for website

#88681

Postby Breelander » October 16th, 2017, 7:28 pm

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

Breelander
Lemon Quarter
Posts: 4178
Joined: November 4th, 2016, 9:42 pm
Has thanked: 999 times
Been thanked: 1855 times

Re: Reducing image size for website

#88688

Postby Breelander » October 16th, 2017, 7:58 pm

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).

brightncheerful
Lemon Quarter
Posts: 2209
Joined: November 4th, 2016, 4:00 pm
Has thanked: 424 times
Been thanked: 799 times

Re: Reducing image size for website

#88827

Postby brightncheerful » October 17th, 2017, 11:49 am

Thank you.

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

pixel size 4.88 µm

7360 × 4912 pixels (36.3 megapixels)

brightncheerful
Lemon Quarter
Posts: 2209
Joined: November 4th, 2016, 4:00 pm
Has thanked: 424 times
Been thanked: 799 times

Re: Reducing image size for website

#89476

Postby brightncheerful » October 20th, 2017, 9:41 am

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?

johnhemming
Lemon Quarter
Posts: 3858
Joined: November 8th, 2016, 7:13 pm
Has thanked: 9 times
Been thanked: 609 times

Re: Reducing image size for website

#89489

Postby johnhemming » October 20th, 2017, 10:35 am

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.

staffordian
Lemon Quarter
Posts: 2298
Joined: November 4th, 2016, 4:20 pm
Has thanked: 1887 times
Been thanked: 869 times

Re: Reducing image size for website

#89497

Postby staffordian » October 20th, 2017, 10:41 am

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.

kyu66
2 Lemon pips
Posts: 247
Joined: November 14th, 2016, 5:14 pm
Has thanked: 2 times
Been thanked: 131 times

Re: Reducing image size for website

#89500

Postby kyu66 » October 20th, 2017, 10:49 am

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.

gbjbaanb
Lemon Slice
Posts: 582
Joined: November 4th, 2016, 1:17 pm
Has thanked: 192 times
Been thanked: 126 times

Re: Reducing image size for website

#89570

Postby gbjbaanb » October 20th, 2017, 2:34 pm

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.

Breelander
Lemon Quarter
Posts: 4178
Joined: November 4th, 2016, 9:42 pm
Has thanked: 999 times
Been thanked: 1855 times

Re: Reducing image size for website

#89602

Postby Breelander » October 20th, 2017, 4:57 pm

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.

dspp
Lemon Half
Posts: 5884
Joined: November 4th, 2016, 10:53 am
Has thanked: 5825 times
Been thanked: 2127 times

Re: Reducing image size for website

#89731

Postby dspp » October 21st, 2017, 1:15 pm

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


Return to “Photography”

Who is online

Users browsing this forum: No registered users and 4 guests