Export and reduce dpi for website images

[Mr Lucky]

I want to save some files for the web, so they will reduced from 300 to 72dpi.

 

In order to do this I think I need two steps:

 

1 Go to Resize document and reduce  dpi

2 Export

 

In photoshop it's possible to do this in one go with "Save For Web"

 

Is there something similar in Photo?

[Alfred]

I want to save some files for the web, so they will reduced from 300 to 72dpi.

 

The Photoshop 'Save For Web' option is really about optimizing your images for small file sizes. DPI/PPI is only relevant when printing, and it's completely meaningless for display on a computer screen: you just need to export the images at the required pixel dimensions.

 

Say No to 72 dpi

DPI and photos

The Myth of DPI

What DPI do web images need to be? (spoiler alert: it doesn't matter)

[Mr Lucky]

The Photoshop 'Save For Web' option is really about optimizing your images for small file sizes. DPI/PPI is only relevant when printing, and it's completely meaningless for display on a computer screen: you just need to export the images at the required pixel dimensions.

 

Say No to 72 dpi

DPI and photos

The Myth of DPI

What DPI do web images need to be? (spoiler alert: it doesn't matter)

 

 

All fine, but at the same dimensions, 300dpi is a larger file size (in MB) than 72.

 

So surely 72 is better as we want a page to load quicker. 

 

I did some tests. A 72 dpi image loads quicker on a web page, but looks just as good as the 300dpi at the same dimensions.

 

So I am maybe doing something wrong still.

[Alfred]

All fine, but at the same dimensions, 300dpi is a larger file size (in MB) than 72.

 

A two-inch square will be 600 by 600 pixels at 300dpi but only 144 by 144 pixels at 72dpi, so the file sizes (at the same compression level) will be very different. At the same pixel dimensions (e.g. a two-inch square at 300dpi or a four-inch square at 150dpi) there will be no difference in the file sizes.

[MikeW]

In the export dialog, just type in the dimensions. there's no need to adjust the document DPI.

 

Attached are your AD design, which is set to 300 dpi, exported once by just typing the size in and also by adjusting the document DPI. They are identical in size and in display on the web. If you look at them in PS, one has the DPI as 300, the other at 72. But they are the same pixel dimensions and file size.

 

The DPI field in an image is just an aid to initially scale an image when imported into another application...and not all applications honor that info. It has nothing to do with image quality.

 

Mike

Desktop.zip

[R C-R]

In addition to the references Alfred mentioned, you might want to view the Affinity video Understanding DPI.

[Mr Lucky]

Thanks everyone for the education.

 

 

My question now is why does Photoshop reduce dpi to 72?

 

I also have the question about Photo having a similar function as Save for Web part 2.

 

The best thing about the PS SFW is that you see a preview of the image as you adjust the the quality, e.g number of colours in a gif or png.

 

I really miss this, or is it hidden somewhere in Photo?

[Luke Watts]

So to answer why PS reduces DPI when using "Save for web"...well, it doesn't.

 

PS reduces PPI (pixels per inch) which is different to DPI (dots per inch).

 

Other than than what "save for web" does is:

• optimize how much compression is used for JPEGs
• Removes unnecessary metadata
• Allow choosing if transparency should be used in PNG and what bit PNG should be (8 0r 24 I think)
• Allows choosing optimized PNGs (which load gradually and not all at once...don't see much of them anymore but remember dial-up? That kinda load experience)
• Optimize how many colors are in GIFs
• and choose image dimensions

So with those options you can certainly reduce a files size for better web results.

 

So yeah, Affinity Photo and Designer should have something like that I feel

[Luke Watts]

To "save for web" in Affinity Designer you would:

1. Select the Export Persona
2. On the layers pallete on the bottom right choose "create slices"
3. Then on the layer(s) you want to export expand them and you'll see similar options as "Save for web" in PS
4. Then simply un-check the layers you don't want (you might have duplicate slices at this point)
5. Click Export Slices (n) (where n is the number of slices selected)

[Alfred]

21 hours ago, Luke Watts said:

 

So to answer why PS reduces DPI when using "Save for web"...well, it doesn't.

 

PS reduces PPI (pixels per inch) which is different to DPI (dots per inch).

 

 

Welcome to the Serif Affinity Forums, Luke.

 

Although in general PPI is not the same as DPI, on a computer screen a ‘dot’ is a pixel so there is no difference. Even if you rephrase the question to ask why PS reduces PPI, you’re still left with the awkward fact that the stored value has no effect on file size.

 

Quote

• Allows choosing optimized PNGs (which load gradually and not all at once...don't see much of them anymore but remember dial-up? That kinda load experience)

 

I think you mean ‘progressive’ rather than ‘optimized’ here, but I’ve only ever heard of progressive JPEGs, not progressive PNGs.

[toltec]

58 minutes ago, αℓƒяє∂ said:

Although in general PPI is not the same as DPI, on a computer screen a ‘dot’ is a pixel so there is no difference.

 

Funny. PPI is useless when it comes to accurately measuring images because

a) Inches vary in size depending on the device

b) who use inches any more ? (outside America)

 

DPI relates to printer dots, which is often confused with halftone dots (lines per inch), and most printers use several dots to print one halftone dot.

 

No wonder we get confused 

[R C-R]

To make this even more confusing, a single screen pixel is typically a triad of colored 'dots.' A printed 'dot' can be any of several things depending on the printing process, the software, & print driver. Applications (including browsers) may display images at different sizes & resolutions, using different interpolations to map image pixels to screen pixels.

 

So basically, neither "dots" nor "pixels" have an invariant, context-independent meaning.