Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ernest Son
13,532 Pointsprepping photos for site build...
I have taken photos to build out a site, and have started laying out wireframes in moqups.
- What is a good starting point for overall page size? Moqups default is 960*660...
- Should I let the wireframe directly drive resizing/save for web for the images I shot? For example, I have a few high res shots that might only occupy 150*150 on the wireframe. So it seems to make sense to create a copy of the original photo that is optimized/cropped/edited for that size.
Just wondering what the normal process is here....thanks!
6 Answers
Brett Smith
4,261 PointsWhen I mockup a site I use 1600 px wide and then let the content of the site determine the height. The 960 side I would assume would be the size of the container you are using for all of your content. I start my design at 1170 px wide which is bootstraps largest grid then I work my way down to eventually get to mobile.
If you have images that you know are going to be a specified size go ahead and save them at that size. The larger the original picture is the more time it will take to load. Even if you specify a different size in your css that is only changing the appearance of the image.
I always compress my images with image optim before uploading them to my site. I also only save a .png if there is a need for transparent background.
Hope this helps. Let me know if you have any other questions.
Ernest Son
13,532 PointsThanks so much Brett! So, do you start at 1600 or 1170 width? A little confused there....
Which wireframing tool do you use? So far I like moqups, but it's the only one I've tried..
Brett Smith
4,261 PointsI use Photoshop and Sketch interchangeably. The width of my document is 1600 pixels but the content at it's widest point is 1170 px. In the image I have below you can see that the content does not go outside of the cyan guidelines I have set up.
https://www.dropbox.com/s/0lyu4xr2kt33b48/Screen%20Shot%202014-12-22%20at%203.38.38%20PM.png?dl=0
Jane Marianne Filipiak
7,444 PointsIf you start 'mobile first' and adjust your photos to display at few sizes ranging from mobile width up to 960px, it might be a better way to optimise your photos.
Ernest Son
13,532 PointsDo you all know of a batch program that will prep a folder of photos as you speak of above (480, 660, 960px)? Or is a little elbow grease a better approach?
Brett Smith
4,261 PointsI use Photoshop. If you look under file > scripts > image processor you can edit an entire folder of photos at once.