Easiest way to convert heavy image site to html/css/javascript?

Question

I have this PSD that I need to convert to html and css and javascript. It is very heavy on images as you can see and is for one full page. What is the quickest way to load something like this. I have looked at other questions with similar situations, but I wanted to get an opinion for this specific situation. Would splitting images into sprites, pngcrushing, and lazy loading be best? Using Svgs? Image to CSS converts? etc? Thanks in advance.

Answer 1

Here are some advices that apply generally, with details and examples for your specific situation:

1. Use proper markup with nice semantics

   Always embed whatever you are going to do in semantically correct HTML:

   <header>
     <h1>Cactus</h1>
   </header>
   <div id="main">
     ...
   </div>
   <footer>
     <a href="#">Contact Us</a>
   </footer>
   

2. Use text instead of images

   Do not use images with text on them. Instead, use real text. This is mainly for SEO and accessibility (for example for blind visitors that use a screen-reader). If you do not want to stick with a default font like Helvetica, you can use Web Fonts via the CSS rule @font-face.

   Examples: "Music Discovery", "Download the Mac App", "Download on the App Store"

3. Prefer CSS properties

   Some effects can be done with CSS3: background gradients, box shadow, border radius and border images are great for styling. If you can achieve a similar result with CSS properties, prefer them to background images.

   For example the "Download the Mac App" button is easy to do with CSS-only without images.

4. Minimize request count

   Everything else needs to be an image. Each request costs time, so minimize the count. The background image is big, and i'd make that two images: One goes from the top to the headline "Getting started with Cactus". The second one starts at the bottom where "Discover how Cactus works" is written. In between those two images is just plain color, so use the CSS property background for that part.

   Other images include icons and photos. Put all of them into one file (a sprite). If you are going to use Compass (i highly recommend it) there is a built-in tool that makes it supereasy to convert a set of image files into one big sprite with their corresponding CSS classes: Spriting with Compass

5. Optimize for mobile devices

   If you are going to make your website responsible (= good looking and usable on every device), you need to put some more thought in the design differences.

   There is less space on mobile devices, so the big background image can be smaller. That reduces page loading times, which is crucial on mobile devices.

   Also, you may need to change the layout a bit, but your design seems quite compatible to smaller width if you create a sprite with smaller images.

Answer 2

Use css sprite for smaller images. For background image, don't put entire image and keep it partially. Optimize image as much as possible (upto 80%). It would be better if you can use CDN for images, css and javascript.