Photoshop Layout

Overview

It is common for the Visual Design for web pages to executed in Photoshop.
This is a 4x scale layout that will allow you to scale images up and down without losing resolution.
The template only sets widths. Heights can be variable.
Perform all of your layout and image editing in a single file and utilize layers in folders to turn pages on and off.

When viewing images in the .psd layout, assess them at 25% scale
The goal, on export, is to create the smallest file size with acceptable (not perfect) quality.
Use the "save for Web" export tool.
Save as JPEG: medium quality. Then, assess image quality and increase compression quality incrementally as needed.
For flat art and graphics, try PNG8 (or PNG 24 if transparency is needed) . You may get smaller file sizes.
Use these image widths upon export (height can vary)
note: any image that will be viewed in a single column width on a tablet vertical viewport should be 720 px