How to load images quickly for a photographer's portfolio?

Hi!
My customer wants a portfolio in which he can show of his work.
There will be many high-quality pictures.

How should I go about designing such a website from performance point of view?
How do I reduce the time spent loading the website?
Images will be saved locally(On the server)

 

There are three things I can think of:
1. Lazy loading
2. Compressing the images
3. Caching on the browser or using a CDN

 

Could you explain me what each option does(I kinda know what compression is) ?
And could you please give me good learning resources for Lazy loading?

 

In any site development, client interrogation is the first step. Find out exactly what he wants to show and tell, and what he wants the visitor to do (e.g. order HQ prints, buy HQ downloads, or sit back and enjoy, etc.).

Bring together all client content. You'll need all the image files plus all the caption and descriptive text in digital form. Everything should be sorted by genre, assuming he has more than a very few images. If there are only one or two genres, break them down so you have manageable numbers in each.

HQ image file are huge, and have no business in a web page. Monitors are simply not high enough definition to show them in all their glory anyway. Even an obsolete 24pin, nlq, dot matrix printer has a higher resolution. Another reason is that the browser is a poor image manipulation tool. Slow, too.

Start by scaling all the photos to a reasonable size to display in the browser. Set the compression level to deliver the smallest file size before a noticeable drop-off in quality. Do the same to create thumbnails. Both of these manipulations can be scripted so you don't have to do it one by one. Hint: It may be better on some photos to crop to an interesting part of the photo, then make thumbnails from the cropped image.

Use The GIMP, ImageMagick or PhotoShop for the above steps. Tests run a few years ago showed GIMP and ImageMagick to be noticeably superior to PS in scaling. PS may have improved in the meantime.

Now it becomes a simple job of structuring the site to match the photo groups. Only thumbnails are loaded initially, so it's quick. Larger pics are loaded on an as needed basis. There is no Javascript to slow things down.

gary

 

Thanks, Gary!
Good advice...

 

Ensure the images are compressed and stored in appropriate formats, also a CDN is probably going to be a good option as well - Images are large files and depending on how far your visitors are away from your server the longer it could potentially take them to load those images, using a CDN will load the images from the server closest to them which will generally speed up loading times for all of your visitors.

 

Hello,
Firstly ensure that your pictures are in the smallest size possible (the display size). You don't need for example to store 2000 x 2000 pixels picture if you display it at 500 x 500 pixels on your website. So, crop pictures and/or resize them.
Next thing to do is to store in the best format. For photos, JPEG is the greatest way to store it. And for logo and icons, go with PNG. An extra, you can compress PNG with this tool : tinypng.com
You can also try lazy load : load only pictures in the displayed area. You can do this with Javascript.
Last thing, uses CDN to host your media. CDN will reduce picture loading time because files will be loaded from the nearest web server of your visitor.
Hope these lines will help you.

 

Thank you everyone for your advices, I think I can mark this thread as closed