fbpx

How To Convert JPG To WebP In Photoshop


JPEG is one of the most common digital file formats for web use. However, other formats have been developed, offering better features that work well online, one of which is WebP. While Adobe took a while to add the WebP format to the program, you can now (Photoshop 23.2 and newer versions) convert JPG to WebP in Photoshop.

There are many differences between these two file types, and you can choose either format to use on your website or for other online graphics. However, it’s worth noting the differences before deciding which format you will use. 

I will first explain the simple way to save an image as a WebP file using Photoshop before getting into the finer details of these two digital file types.

How To Save An Image As WebP In Photoshop

Follow these three simple steps to take a JPG (or any other image format compatible with Photoshop) and save it as a WebP file.

Step 1: Go To File > Save As 

Once your file is open in Photoshop, you can quickly check the file format by looking at the file extension in the document tab. Look at the tab above your image to see the file extension. The image in my example is a JPEG.

Once you have added your edits to the image and are ready to save the file to upload to the web, go to File > Save As. You can also use the shortcut Shift + Control + S (Win) or Shift + Command + S (Mac).

Step 2: Choose The WebP Format Option And Click Save

At the bottom of the Save As window, open the Save as Type drop-down menu and locate the WebP (*.WEBP) format

Once you have selected the format, click on Save, or if you want to save a copy of your work, so you don’t affect your current document, click Save a Copy.

Step 3: Select The Appropriate Settings And Click OK

Once you click on Save, a new dialog box opens with the WebP format settings.

Adjust the setting as you need them. Here is what the various settings do:

Lossless vs. Lossy: A lossless file retains all the information in the file when compressed and exported from a program like Photoshop. A lossless file is larger than a lossy file.

A lossy compression deletes certain information from the file, which is usually non-essential information. Lossy compression reduces the quality of an image but keeps the file size low.

Quality Slider: The quality slider allows you to determine how high you want to keep the quality when using lossy compression. However, increasing the quality also increases the file size, so you must balance the two depending on where you will use the file.

Then you can check each option to include the XMP metadata, which contains descriptions about the image, such as author, caption, etc. You can also choose to include the EXIF metadata, which contains the copyright and camera information. Lastly, you can include Photoshop Extras.

Once you have chosen the settings, you can click OK.

Locate your saved file in the folder you saved it, and you’ll see the file extension. Without editing this image and saving it with lossless compression, you can see the difference in size between the WebP file, the JPEG (lossy compression), and the PNG (lossless compression).

How To Save An Image As WebP For Photoshop 23.1 And Below

If you use a Photoshop version older than 23.2, you won’t find the WebP format in the Save As window, and you can’t open WebP files. According to Adobe, in this case, you need to download the WebPShop plug-in to open, edit, and save in the WebP format.

To download the plug-in, use the following direct download links.

For Windows(x64):

https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Win_x64.8bi

For macOS:

https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Mac_Universal.zip

You can install the plug-in to the following menu paths before opening Photoshop.

  • Windows: \Program Files\Common Files\Adobe\Plug-Ins\CC
  • macOS: /Library/Application Support/Adobe/Plug-Ins/CC

JPG Vs. WebP Files Explained

Suppose you are considering converting your images to WebP before uploading them to the web. To determine which format suits you, you should understand the differences between the WebP and a JPG file.

JPG is a lossy compressed file that deletes non-essential information from the file to create a smaller file size. The quality is lower than lossless compressed files.

WebP is an open-source, raster file format developed by Google to help improve loading times across the web. You can set a WebP file to lossy or lossless compression. 

While WebP files can be up to 26% smaller than PNGs and 25-34% smaller than JPEGs with the same quality index, the WebP file may be lower quality. WebP files also have a size limit of 16.383 x 16.383 pixels.

The WebP file was designed specifically for the internet to create faster load times on websites, which has numerous benefits, such as higher SEO rankings, improved user experience, and increased website traffic. This file type is primarily used for reducing image size and supporting online animations, as the file type is significantly smaller than the common GIF format.

Pros Of WebP Files

  • WebP files are compatible with most web browsers, such as Safari, Microsoft Edge, Opera Browser, Google Chrome, and Mozilla Firefox.
  • Webpages that load faster increase the website’s search engine ranking and retain users due to the improved user experience.
  • The compressed file size of WebP files frees up space on websites, allowing for more storage space.

Cons Of WebP Files

  • Not all web browsers support WebP files, especially older ones.
  • WebP images are only useful online and don’t serve much of a purpose offline.
  • Limited file size of 16.383 x 16.383 pixels.
  • Any type of compression, even a small amount, reduces the photo’s quality which won’t work for professional photographers who need to upload high-quality images to their websites.

Article By

Brendan Williams

Hey, I'm Brendan! I'm a professional photographer and photo retoucher who has spent the majority of his career shooting or retouching outdoor lifestyle and social media campaigns for brands like G-Adventures, xoxo Bella, P&G, Fitbit, Chevy, Tourism California, and more. You can view my photography portfolio here.

These days I primarily focus my efforts on this site, creating guides and tutorials that I wish I had earlier in my career. Each week I publish new tutorials on Photography, Photoshop, Lightroom, and Canva to help you unlock new skills and bring your creativity to new levels! Everything you learn here is backed by real experience, so you can finally skip the fluff and focus only on what matters.

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Continue Reading:

How To Whiten Teeth In Photoshop (2 Easy Ways)

Discover two surprisingly easy ways to whiten teeth in Photoshop with the help of a few beginner-friendly sliders.

How To Use Gradient Maps In Photoshop

Learn the ins and outs of how to use gradient maps in Photoshop to color grade your photos and transform your images for the better.

How To Make A Silhouette In Photoshop (2 Best Ways)

Here are two easy ways to make a silhouette in Photoshop. The first method creates a silhouette graphic, while the second in more realistic.

Adobe Lightroom System Requirements For Mac & PC

Here's a breakdown of the system requirements for Adobe Lightroom Classic and Lightroom CC to make sure it will run smoothly on your computer.

How To Add A Watermark In Lightroom Classic & CC

Learn how to add a text or graphic watermark to a photo in Lightroom Classic and Lightroom CC to protect your photos from theft.

How To Use Dehaze In Lightroom

Learn how to use dehaze in Lightroom along with five different ways you can use the dehaze tool to improve your images in Lightroom.

35+ Best Fonts For Logos In Canva

Here's a list of the best fonts for logos in Canva to help give you inspiration in your next logo design!

How To Create Curved Text In Canva

Learn how to quickly create curved text in Canva desktop and mobile with just a few clicks to spruce up any design!

35 Best Fonts For Teachers In Canva

Discover the best fonts for teachers in Canva to help with your next worksheet or presentation for your class!

The 9 Best SD Cards For Sony

Discover the best SD cards for Sony to find the most reliable and best valued memory cards for your photo and video needs.

The Best Canon Lens For Low Light (10 Top Picks)

Get a complete view of the best Canon lenses for low light photography and video along with tips to make the right buying decision.

Affinity Photo VS Photoshop – Which Should You Choose?

Let's take a deep look at the similarities and differences between Affinity Photo and Photoshop to see which program you should pick.