Streaming live at 10am (PST)

Best way to save JPG for Webflow

#1

Hi there,

A silly question… I have to optimize the hell out of all image assets I will use for a new project. Because I need to use a lazy load technique, I will have to upload three sub-images for only one image being displayed for the end-user: one placeholder, one retina ready image for desktop and one retina ready image for mobile… having to specify the path to those images into the custom data-srcset field of every image on my project (it’s hectic, I know).

Until now, I have always used the photoshop save for web module. But I recently came across various article on the internet talking about mozJPG compression… do I need to take this into consideration or is the photoshop native compression tool sufficient ?

Does Webflow apply some changes on the fly to the jpg images we upload within the designer ?

Thank you for your help, always ! :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Photoshop high end compression is never sufficient, apart for some specific cases (like Ps is really good at making small and nice GIFs, and was undisputed for this task for years and years).

I never let Ps compress my images now. I rely to other tools. One very popular, that can handle many compression algorythms, is ImageOptim: https://imageoptim.com You can crawl Google for more algorythms to add to it.

ImageOptim is an absolute must have.

(ImageOptim and other tools are really needed to improve on PNG compression, compared to Ps, it can be less evident for JPG)

Another tool I like very much and worth all the bucks: Optimage https://getoptimage.com/

Something worth mentonning: ZorroSVG, to make large PNG8 with a real alpha channel.

You can compare those tools to Ps. Can you let me know about the results?

PS: mozjpg is supported by ImageOptim

PS2: imageOptim has an online version https://imageoptim.com/online

1 Like
#3

Thank you so much for the input !
I will give it a try and let you know for real.

Isn’it crazy, that Adobe can’t be at the top of its game regarding image compression ? 60€ a month is kind of high price to pay to need look for alternative compression methods :slight_smile:

#4

I am on a free account so I do not know this but are you able to use an external source for images and media?

#5

Yes and no. I tend not to consider that a design app has to “produce and publish”, that is outputing the best possible high end version of an image/video/animation. That’s well illustrated by Premiere Pro + Ae vs. Media Encoder. I’d only output 422 HQ from the editing apps and let ME or another app deal with the final output.

You’re after the state of the art compression, so my advices are OK. But you can’t really say that Ps is bad to compress images. It’s actually good, and doesn’t pretend to be the ultimate app for compression. It’s easier for ImageOptim to be better, because it’s open, so you benefit from everything coders have come up with for their specific needs, almost in real time.

2 Likes
#6

Thank you for the precision !
Can’t wait to try out the alternatives you mentioned.

#7

For photoshop users:
In my opinion, the best way is to download tinyjpeg plugin for photoshop - cost $65 (Very very useful).

image

tinyjpeg main page ( **Web Interface **) - also great for a bundle of images. Cost free -or- 25$ yearly (For Drag and drop more than 20 images at once).

1 Like
#8

ooh, I didn’t know they had a plugin, I use their website version for all my images

1 Like