[PixelBit]

I really love how websites look with the use of large images and photography in the background, for example, I love the use of photography in this website: http://thegreatdiscontent.com/

My question is, what size would you want the photo to be in order to accommodate a large range of screen sizes? As well as this, how do they make such a large image load so quickly? They have some crisp and high quality photos on there are such large sizes and they load in an instant.

Cheers for any responses, I'm really interested in these kind of designs and I'd like to give creating some a try.

[Dormilich]

maybe it’s because they use very small images? for instance the picture in that website is 77 KB @ 800 x 534. with the appropriate settings and algorithms, images can be made unbelievably small while retaining most of the details.

[PixelBit]

I see, whenever I save images of this size they go way over that... Disappointing.

[Dormilich]

I know that there is an option in Photoshop that gets quite near there.

[gregwhitworth]

The best way in Photoshop is to do Ctrl+Alt+Shift+S or, File->Save for Web & Devices

Then from there you can work on compressing them. Another great thing to tweak, is the more colors you have the larger it's going to be - so you should try to de-saturate some of it.

Another trick, is to deceive the eye by feathering the edges of the image to match the body color in an elegant way. You can also look at your image and decide what the focal point is, for example the website you shared showed the girl should naturally be the focus. You can then export just her at 100% quality jpeg. Overlay that on top of a 20% of the full image and export the total at say 50%. The girl will still look good but the rest may be slightly de-saturated and pix-elated. Allows you to keep the image file sizes low while keeping the main subject in good quality.

[PixelBit]

Thanks gregwhitworth, very helpful, I will try that out!

[The Architect 2.0]

@gregwhitworth

is that a common technique or just what you personally do? cause it is ridiculously brilliant.

[fiddydips]

In photoshop, make sure you save for web, and optimize it as a .jpg at 60% to 80% quality. It gives you an instant preview of the quality and shows you the filesize. You can optimize yourself with your own sight. This will give you a HUGE savings on filesize. If you don't have photoshop you can get a free knock off at pixlr, which also has an excellent compression algorithm. It's a lot like photoshop, but it's an online editor.

Great image mister..(thumbs up)