1 Replies - 430 Views - Last Post: 14 August 2014 - 02:12 AM

#1 LearnSomeMore89   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 13-August 14

Best way to optimize a one page website with large images?

Posted 13 August 2014 - 05:38 PM

I am currently making a photography website and right now I am on the design phase. It's close to being done but I am dreading the coding. My main concern is page load times. The website is for a photographer/ graphic artist. Basically, it is a one page vertical site that has several full screen images. The best example I can give is it will be similar to flickr.com 's current site except instead of a static background it will change as you scroll down. Anyone have any advice before I start coding it? All help is greatly appreciated!

Is This A Good Question/Topic? 0
  • +

Replies To: Best way to optimize a one page website with large images?

#2 ge∅   User is offline

  • D.I.C Lover

Reputation: 192
  • View blog
  • Posts: 1,184
  • Joined: 21-November 13

Re: Best way to optimize a one page website with large images?

Posted 14 August 2014 - 02:12 AM

There are two issues with this kind of site : rendering time and downloading time.

I would drop the idea of a standard scrolling page. If you have many big images in one flow, it will be very laggy when you scroll down. You can either use canvas (for maximum control on the performances) or absolute positioned images (for compatibility).

If you use canvas, you will basically use drawImage to draw and resize your images. You can implement very cheap sliding effects with this only function (it's not more expensive to draw one portion of an image and one portion of another image than one full image), but you can also implement fading effects, play with filters such as blur (this implementation is quite fast) or colour transitions (typically, when you go from a grayscales image to a RBG image you can make the RBG image apear in black and white and slowly get colourised). Just keep in mind that the bigger the image, the longer it takes to apply a filter, so if you can apply them before the image gets scaled up or after it gets scaled down to fit the screen, do it.

If you use absolute positioning, make sure there are only two images at a time in the DOM (the current image and the previous/next image). You can try to use SVG filters in your CSS if you want to improve the transitions (simply keep in mind that they are not widely supported yet, it's for the happy few).

As for downloading time, make sure you use the right format for your images and take the time to compress them properly. If it's fine art there are some software products like Fireworks which allow you to use two compression settings for your images (one for the background, especially if the depth of field is narrow, and one for the key part of the image where you want to see details). I would suggest you to only download 3 or 4 images when the page loads so you can display something quickly, then continue loading while the user is visiting the site. If the photos are good enough, they will have plenty of time to load ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1