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.
Thanks, didn’t realize it was my first post …
(Registered a user long ago, I think, since I just logged in using my password manager …)
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.
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.
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.
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).
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.
One more thing to add here: the latest builds of Retrobatch have WebP support: http://flyingmeat.com/download/latest/#retrobatch . 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.