Can anybody recommend current resources or tutorials on prepping website images in Photoshop?

Question

It used to be that I knew what I was doing and I knew how to do it in Photoshop.

I knew how to use the Save For Web option to balance quality and image size and export my file in JPG or GIF and later PNG. And I knew when to pick which format. Even though it's now "legacy" I still use it all the time because I just don't see the compression options any other way. And i like looking at the 4-up versions.

Now Google is telling me that I should use "modern" image types. But Photoshop won't open webp, and although I could "Save As" a JPG file as a jpf or jpg 2000, I can't do that using the Save for Web feature and so the file is huge because I don't have my options for compressing it or blurring it or whatever.

I've scoured the web, and Lynda.com (LinkedIn Learning) looking for a tutorial. No one seems to care about saving images at appropriate compression. Except for Google Page Speed Insights of course. I feel really stuck. Did some tool become available to replace "Save for Web" and I've just never stumbled upon it?

Does anybody know of a good tutorial or resource where I can learn the best way to properly prepare and compress images for use on websites? The last time I needed one was in like 2002. I need a refresher but it doesn't seem to exist!

I'd like to find a course or article that will incorporate JPG2000 and webp and jpf formats and when to use them and how to optimize. Preferably using Photoshop.

Thanks!

Silvette · Answer

Photoshop doesn't really excel at exporting the smallest file sizes. It does a great job, but it could be better.*

Perhaps the most used strategy throughout the web is by just exporting your finished pictures as JPGs or PNGs, and then using online services to optimize and convert them. TinyPNG.com is the most popular and perhaps does the best job* at minimizing JPEG and PNG files.

For WebP and JPEG 2000, the same process involved. Except for this time most online converters are paid for or on subscription models, either needing you to upload to their website and download it or pay extra for a plugin/script to add to photoshop if they have one.

In my opinion, I have seen WebP around but never JPEG 2000. So after a quick 5 min search on all the popular JPG to WebP converters, https://ezgif.com/jpg-to-webp and https://compress-or-die.com/webp look like the best** for being free.

I uploaded an 82kb JPG to the WEBP compressor on compress-or-die and got a insanely small 6.22kb WebP with just the default settings.

Compress-or-die have a Photoshop JSX-Script that can upload the images straight to them from Photoshop to compress or convert to WebP.

*The new "Enable optimized Export As" in the Technology Previews under Preferences actually performs hugely better in file sizes than the previous photoshop, the online compressors end up enlarging my jpegs or just saying it can't be optimized anymore.

**I say the best from 5mins of opening the first 2 pages of Google of JPEG to WebP websites, ignoring any that have limits or payments, and then uploaded an image to test them.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded