Nov 28, 2018

How to Save an Image in Photoshop for Optimal Load Times on the Web

Written by

The first thing you must consider when saving image files for the web is how large your image is. Generally speaking, any image on your webpage, with the exception to full screen images, should be no wider than 1000px to 1500px, and only if they are required to be displayed quite large in the browser. Thumbnails, or pages with many small images on them should be saved at their actual required size, or only slightly larger. For example:

You have a canvas that is 1000 pixels wide, and want it to have 50 thumbnails on it spanning rows of 5. In order to ensure fast load times, you must make sure to save each image no wider than 200px.

These images can then be linked to a larger file which loads one at a time, and only if the visitor chooses to click on the link.

For eCommerce, I normally choose to have my images around 750px wide, allowing a happy medium for image clarity, and page load times.

Saving JPEG Files in Photoshop:

When you are finished editing your photo, and are ready to save the image, you will be given three options to save your images:

  • baseline “standard”
  • basline optimized
  • progressive

The most recent method of JPEG compression is the baseline optimized method. This means that when a page loads, your image will first be displayed blurry, and as the image continues to load, the sharpness will come into focus. It also provides better compression and image quality, so there is never a need to use the other options under most circumstances.

Another option you will have to choose is image quality. For viewing on the web, it is best to choose a quality between 5 and 7. This will ensure you don’t lose quality, while maintaining a small file size.

Saving PNG Files in Photoshop:

Similarly to JPEG, PNG files have a modern compression method which is optimal for viewing on the web. When saving your photo, you will have two options under ‘interlaced’:

  • none
  • interlaced

You should always pick the interlaced method, as it will reduce your file sizes and load similarly to the jpeg ‘baseline optimized’ method. Essentially, interlaced means that lines will be loaded in a non sequential order, while not-interlaced will load each line of the image from top to bottom.

Page load times are a new ranking factor how search engines choose to display web pages in their results. You could be missing out on potential customers by choosing the wrong method to save your files.

Source by Zac Fair

Article Tags:
· · · · · · ·
Article Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *