Web Export, Resolution and Formats

Acorn
1

Using Web Export, can I set an image (say a PNG) to be 144 dpi?
(I think that’s recommended for “retina”, right? Or should I just export my intended 200x100 pixels as 72 dpi 400x200?)

Also, performance tools say I should use next-gen image formats, like .webp and jpeg2000, but it doesn’t seem like many Mac tools support WebP … :slight_smile:

2

Hello @flips, welcome to the forum.

Unfortunately, there’s no way using Acorn’s web export to set the DPI. It’s part of the metadata and considered extra info, so it’s stripped out. I’ll consider adding an option to web export for this though.

Acorn did support WebP at one point, but the format wasn’t very stable (or at least the code Google provided), so I took it out. I’ll see about adding it back in as an external library in a future release though.

We do have another product, Retrobatch ( Retrobatch, from Flying Meat ), which can set the DPI for PNG files without recompressing it. If you have a lot of images you need to convert, this might be a good option. You can also write custom plugins, and we’ve made one for converting files to WebP: Retrobatch JavaScript Nodes

-gus

3

Thanks, didn’t realize it was my first post … :smiley:
(Registered a user long ago, I think, since I just logged in using my password manager …) :sweat_smile:

Thanks! Maybe, if the PNG is 400x200@72dpi, shown in a width=200, height=auto, it wouldn’t make a difference? (Image formats are not something I know too well.)

I see. I was mostly looking to see if maybe I should start caring about/using WebP. (JPEG2000 didn’t seem to much of a point in this case, as PNG’s were smaller. Maybe due to content, can strip it down to 4 bytes of colors.) Seems WebP works with mostly everything, except Safari, if my googling was correct. :laughing:

I will certainly take a look at retrobatch. The this is I seldom do lots of image processing, but when I do, I sometimes do batches. Certainly looks like a nice program. :smiley:

4

Yea- this is what I do. If you code in the width then the browser is going to figure out the height automatically by checking the image bounds. And if it’s an @2x image, then it’ll just do the right thing and show the correct pixel count.

1 Like
5

Yes, as already mentioned, display devices have a resolution but images for the web are in pixels and don’t know about a resolution set in the file. If you supply a 400×200 pixel image and put it in a 200×100px container, it will be resized and a ‘retina’ display will display it sharper. A regular resolution display will do its best attempt to resize the image.

If you want to show the best option for each resolution, there are various ways to supply images in different resolutions to your browsers and have them use the best image for the job (i.e. display resolution, display size, in future also connection quality).

  • media queries (article in css tricks) in your CSS.
  • srcset (article on css-tricks) in your HTML: you provide an image at several sizes and specify them along with their pixel width. Optionally, you can also inform the browser at what widths they display at different browser widths/orientation. The browser picks the best image depending on the respective device and size. This means a mobile phone doesn’t have to download the same huge image for your full-screen retina desktop.
  • picture tags in your HTML (see below).

As you noted, WebP won’t display in Safari, so all Safari-surfing Mac users and all iPhone and iPad users will see a blank. Two ways of dealing with this are:

  • Put your images in a picture tag in your HTML. This allows you to supply both source formats and the browser will pick the best one for the respective situation. See Using WebP Images on Css-Tricks for further info.
  • Someone came up with a clever trick for Apache web servers (common). Specify your jpg or png images in your web page HTML but also place webp images alongside them on the server. A directive in the server’s .htaccess checks if the specified image also exists in webp format and serves that to browsers that can read it. See this GitHub page for further details.

Alongside all these methods, there are image services online that can do a lot of those things for you at a price.

6

One more thing to add here: the latest builds of Retrobatch have WebP support: Latest Builds from Flying Meat . I don’t have plans on adding it back to Acorn quite yet (in part because it’s so slow)- but I guess this is a hopeful sign it might.

7

yes please bring that back it worked fine for me [v3.5.1] and i just upgraded to 6.x today and that feature is missing so #aghast

AFIK apple using JP2, google likes WEBP so was using acorn for those conversions (among other things)

Update, i went to google and found they had (Catalina) command line tools* which aren’t ideal but good enough workaround for now. was hoping you might be able to specify what settings your legacy Acorn app was using so I can remain consistent with images I have already used it for.

*I chose the archive version that matched my current OS by searching the folder for the mac OS version and highest release number (not release candidate).

Note they are named libwebp-[RELEASE]-mac-[OS#] – you’ll get a zip full of command line utils/docs/source.

I didn’t install them just tried out the CWEBP command from the folder with/without each flag -lossless and -preset photo

Lossless made the file huge. Photo preset made it smaller than the Acorn version but seemed to me slightly less quality. Many flags and settings…