MENU

How Do I Save Files for the Web?

Jul 25 2024 | By: PhotoBiz Knowledge Base

How to Optimize Images for Faster Website Loading in Photoshop

Overview

Large image files can take longer to upload and may slow down your website. Before uploading photographs to PhotoBiz, you can use Adobe Photoshop to reduce their pixel dimensions and file size while maintaining strong visual quality.

This guide explains how to export a photograph as a JPG, resize it for online display, convert it to the sRGB color space, and save an optimized copy for your website.

Prerequisites

Before you begin, you must have:

  • Adobe Photoshop installed on your computer
  • The original image you want to prepare for your website

Keep your original high-resolution image as a separate file. The optimized copy you create in this guide is intended for online display and should not replace the original file you use for printing or archiving.

Please Note: PhotoBiz is not affiliated with Adobe, for questions about any of their products, services, etc. you'll want to contact their support team directly.

STEP ONE

Open the image in Adobe Photoshop. Select File, hover over Export, and select Export As.

The Export As window will open and display a preview of the image along with its export settings. In some older versions of Photoshop, a similar feature may be labeled Save for Web.

STEP TWO

Open the Format menu and select JPG.

Use the Quality setting to balance image clarity and file size. A higher setting preserves more image detail but creates a larger file. Lower the setting gradually while reviewing the preview, and select the lowest setting that still provides the image quality you want.

JPG is generally the best format for photographs because it can reduce the file size while preserving strong visual detail. Images that require transparency, such as certain logos and graphics, may need to remain in PNG format.

STEP THREE

Locate the Image Size section and adjust the image’s pixel dimensions.

For most PhotoBiz website images, set the height to 1730 pixels and allow the width to adjust automatically. PhotoBiz converts uploaded images to a maximum display height of 1730 pixels, so resizing the image before uploading can reduce the upload time and avoid sending more image data than the website needs.

Make sure the image proportions remain linked so the photograph does not become stretched or distorted. You can leave Bicubic Automatic selected in the Resample menu.

Images used for large banners, unusual layouts, or other specialized purposes may require different dimensions.

STEP FOUR

If you would like to edit the size dimensions of your image, you can do that within the "Image Size" section of the window, and this will allow you to input either exact pixel dimensions you wish to use, or you can also use a percentage value. If you resize your image from this area, you can leave the default value "Bicubic Automatic" selected from the Resample drop-down menu. Additionally, you can leave all other settings at their default values.

*Note: We recommend sizing your images to a height of 1730px and letting the width auto-adjust unless your account has our Original Files add-on. This is the height to which our uploader will convert your image for display on the web and exporting the image at this height can help contribute to quicker upload speeds.

FINAL STEP

Once you are finished, be sure to click the "Export" button which will then prompt you to continue saving your image in the location on your computer that you prefer.

Following these steps will ensure that your images will remain at a high quality for viewing on the web, while also maintaining a lower resolution and file size needed for optimum website performance.

Need additional help?

Check out our guide on troubleshooting image quality for your website images at the button below. 

Troubleshooting Image Quality Guide

Leave a comment

Leave this field empty
This form is protected by reCAPTCHA to prevent spam and abuse. Information collected may be processed for security purposes.
Submit

0 Comments

Previous Post Next Post

Related Posts

How To Use Image Blocks

July 17, 2026

How To Change Mobile Layout For Image Blocks

July 1, 2026

How to Adjust Load More Options in an Images Block

July 20, 2026

How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?

May 5, 2026

CLOSE