how-to-get-a-live-web-preview-in-photoshop-website-featured-image

How to Get a Live Web Preview in Photoshop

You may put many hours into editing an image to get everything perfect in Photoshop. But once you export and upload it to the web, you may be shocked to see that the colors are all wrong, the sharpening is too strong, and it just does not look good at thumbnail size. Sounds familiar, eh?

Unfortunately, there’s no way to get a live web preview directly in Photoshop that automatically updates as you edit your image. But with a few tricks and some programming skills you can get around this as I show you in this video tutorial.

You’re not a programmer? Don’t worry! I have you covered. You can download my free, almost-turn-key solution below to get the live web preview for your images.

Live Web Preview for Photoshop CC

Bonus tip

In addition to the actual preview, using the Live Web Preview App also gives you readily exported versions of your image that you may be using straight away without going through another export step. Simply upload the respective image from the image’s assets folder to the web and you’re done.

Why your images may look different on the web

There are various reasons why this may happen since the display technology is a different one in a web browser and color profiles may differ. Here are a few causes:

  • You’re working in the ‘wrong’ color mode. Browsers typically use sRGB and editing your images in anything but sRGB may cause the colors to change in the exported images.
  • You’re using a bit depth other than 8 bit/Channel for editing. Editing your images in Photoshop’s 16-bit mode (which I strongly recommend) and exporting it as an 8-bit JPEG may cause banding and other issues to appear.
  • Photoshop’s caching mechanism is fooling you. In order not to overwhelm your computer, Photoshop uses caching. This means it is not showing you the actual image but a cached version of it, possibly resulting in differences between the display in Photoshop and the exported image.
  • You view your image at awkward zoom levels. Viewing your image at anything but 100% zoom level will change the way you see it while you’re editing. For example, image sharpness will appear differently than in the exported image. This is closely related to the caching issues.

Doesn’t Photoshop have a preview feature?

Unfortunately, creating a preview directly in your web browser is quite cumbersome from within Photoshop. It involves a number of steps that you have to repeat every time you want to preview the current version of the image. These steps are based on the ‘Save for Web…’ feature that Adobe labels as being ‘legacy’. Adobe themselves say this:

Because Save for Web is built on the former ImageReady product (now discontinued), the code is too antiquated to maintain and develop new features.

So, using ‘Save for Web’ is not the recommended way to export your images anymore, and it may disappear at some point since updating it seems too difficult.

So how do you get a live web preview?

In the video above, I am introducing my new, free Live Web Preview browser app that builds on Adobe’s new Generator platform – the core of the new ‘Export as…’ tool. The app runs in your browser to show you previews at common web image sizes. It updates these previews automatically each time you change your image in Photoshop.

This app eliminates the need to carry out a complicated series of manual steps to get a preview of the current state of the image.

How to Get a Live Web Preview in Photoshop

Image in Photoshop (left) and the Live Web Preview App with different preview sizes in the browser window (right).

You can simply have the browser app open (possibly on a second display) to see how your changes will affect what the final image looks like on the web.

Downloads and resources

Download the browser app and the corresponding Photoshop actions for free below. Please watch the video first, as it explains how to use the actions in conjunction with the browser app to create a live web preview.

  • Photoshop action set
    • An “.atn” file containing the actions for grouping your layers. Download and double-click the file to install the actions in Photoshop.
  • Preview web page
    • An HTML page running the code for displaying and updating the preview images.
    • Important:
      • Your browser needs to have JavaScript enabled for the preview page to work.
      • When you click the link above, the HTML page should be downloaded to your computer. If your browser displays the page instead, try to right-click on the link and choose “Save link as…” (actual name of the menu item may differ depending on your browser).
  • Generator Config Add-on
    • Important: This add-on is not created or maintained by me. To get support, go to this link.

Now it’s your turn…

Tell me how you’re using the Live Web Preview App. Do you find it useful? Let me know in the comments below.

10 HDR Top Tips for FREE!
Join our newsletter to get this eBook and step up your HDR skills today!
You will receive: The free eBook + our regular email newsletter with updates, news, tips and tutorials… all for free!
100% Spam-Free - Easy Unsubscribe

Leave a reply

2 Comments on "How to Get a Live Web Preview in Photoshop"


Guest
Woody
11 months 9 days ago

Klaus, does this Live Web Preview only work with Photoshop CC ?

Not everyone has CC.