Currently, I am in the process of converting a PSD template into HTML/CSS. The file contains around 50 layers that have been exported to PNG using a Photoshop script. To begin, I structured the code like this:
<div id="container_1">
<div id="container_2">
<div id="container_3">
etc
</div>
</div>
</div>
Each layer matches the template size perfectly with a transparent background. Initially, I found this method convenient as it worked well and eliminated the need to worry much about positioning. However, as the number of divs has grown significantly, the code now appears cumbersome, and the page loads slowly.
Considered a dumb question, but should I have cropped the images after exporting from the PSD? Would combining multiple layers together make more sense rather than placing them separately on the page one after another (especially for layers creating decorative borders around text blocks)?