Saving Images for Web

Tip: For Blogging we recommend using images that are not bigger than 1200px x 800px to ensure that your website will be compatible on any computer size and/or device.

For Galleries images of 1800x1200px (landscape) and 900x1200px (portrait) can be used for regular galleries and sliders, users that are creating full screen homepage sliders use images of 1920x1200px. If you can keep the images under 400kb then even better.Please keep in mind that the average person has the equivalent of a 15 inch screen.

Part I. Quick way to resize images via Photoshop:

Image size

1. Go to Image >Image Size


2. Once you open Image Size make sure that the top two boxes from the bottom are checked > Scale Styles, Constrain Proportions to ensure that the image will not be distorted upon resizing. Once that is done you can fill in the image size. Here are some common web image sizes:

  1. 1024 x 768 ratio: 1.33
  2. 800 x 600 ratio: 1.33
  3. 460 x 309 ratio: 1.49


Part II. Saving Images for Web

Saving Image for Web

1. Go to File > Save for Web

Screen Shot 2013-01-17 at 11.38.42 AM


2. Because it’s a photograph, choose JPEG.

3. If you select Progressive,  the image will first appear blurry, and then become clearer as the image loads. Non-progressive images load line-by-line.

4. First choose quality level, High if the image will be visible, Medium or Low if it’s meant as a background.

5. To have more control over the quality, use the slider or enter number in the field Quality. We recommend using the 60 to 80 range.

6. The highlighted box shows you the current image size that is adjustable. Once you change the size in the box it automatically shows you the new preview of the image quality.

estimated loading time

7. The most convenient part about using this tool is the Loading Time Estimate that Photoshop gives you.

8.Look at the file size and estimated loading time displayed in the lower-left corner while adjusting settings. You can change the size from 1200px x 800px to 900px x 600px to check out different loading time estimates. You can also pick your connection speed to see how fast it will load at different connection times and Preview your file in a browser.

9.Once you have found the perfect balance between quality and compression, click the button Save As and you’re done!

The Flothemes Team

What Are You Looking For ?