7 Replies - 2867 Views - Last Post: 02 January 2013 - 09:46 PM

#1 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Using large images such as photography in websites.

Posted 27 December 2012 - 03:24 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Using large images such as photography in websites.

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,592
  • Joined: 08-June 10

Re: Using large images such as photography in websites.

Posted 27 December 2012 - 03:38 PM

maybe its 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.
Was This Post Helpful? 1
  • +
  • -

#3 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Using large images such as photography in websites.

Posted 27 December 2012 - 03:52 PM

I see, whenever I save images of this size they go way over that... Disappointing.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,592
  • Joined: 08-June 10

Re: Using large images such as photography in websites.

Posted 27 December 2012 - 04:12 PM

I know that there is an option in Photoshop that gets quite near there.
Was This Post Helpful? 0
  • +
  • -

#5 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 216
  • View blog
  • Posts: 1,602
  • Joined: 20-January 09

Re: Using large images such as photography in websites.

Posted 27 December 2012 - 06:33 PM

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.
Was This Post Helpful? 3
  • +
  • -

#6 PixelBit  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 233
  • Joined: 17-July 11

Re: Using large images such as photography in websites.

Posted 28 December 2012 - 01:55 AM

Thanks gregwhitworth, very helpful, I will try that out!
Was This Post Helpful? 0
  • +
  • -

#7 The Architect 2.0  Icon User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 351
  • Joined: 22-May 08

Re: Using large images such as photography in websites.

Posted 01 January 2013 - 06:45 PM

@gregwhitworth

is that a common technique or just what you personally do? cause it is ridiculously brilliant.
Was This Post Helpful? 0
  • +
  • -

#8 fiddydips  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 20
  • Joined: 02-January 13

Re: Using large images such as photography in websites.

Posted 02 January 2013 - 09:46 PM

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)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1