Image saving for the WEB

[Freddie360]

I have been using AP (plus AD and AP) for sometime now and overall I am very pleased. However, the lack of 'Save for the Web' facility (available on Adobe Photoshop) is still causing some issues for me. Trying to save the best image at the right size with an acceptable resolution with rollover image links still eludes me. I have used the Export window 'Quality' slider and tried the Export Persona, but I get irregular bizarre sizing when saving images from the same multi layer AP file. Am I doing something wrong? I have had to go back to Adobe PS to overcome this anomaly.

[R C-R]

6 hours ago, Freddie360 said:

I have used the Export window 'Quality' slider and tried the Export Persona, but I get irregular bizarre sizing when saving images from the same multi layer AP file.

What export settings are you using for the size of the export?

[Freddie360]

I have a 417+504pix file called  'image-link image 300ppi.afphoto' (see Screen Shot 1) which is my master image maker with multiple layers. This is approx 6 times ratio of the final intended image size. I have tried doing the following to get a optimum quality image:

• Resize document .afphoto to 70x85pix (the size of the graphic on the intended website) at 72ppi and export.
• In 'Export' I have used the quality slider to get the file to about 28k and not changed the pixel field. - (see Screen Shot 2)
• Using 'Export' I have changed the pixel field to 70x85pix and left the Quality slider at max which leaves the file about 16k. - (see Screen Shot 3)

All these attempts result in much poorer images than Photoshop 'Save for the Web' plus odd sizing when brought into my website program. I hope this clarifies my dilemma. Regards

[R C-R]

If I understand you correctly, you are trying to reduce a 419 by 504 px image to just 70 by 85 px. Not only is that about a 35 times reduction in the total number of pixels (!!), it isn't quite the same aspect ratio. This will force the resampling algorithm to discard huge amounts of detail, regardless of the JPEG quality setting.

At the least, try using a resample algorithm better suited to photos, like one of the Lanczos ones, but at those pixel dimensions it isn't going to help much.

[Freddie360]

Sorry, the master image is 420x510px which is 6 times the intended 70x85px ratio. However, I am unsure what the master size has to do with the final web size if I know the sort of resolution quality I will get (and do get with PS Save for Web) at 72ppi. I do use AP all of the time, but in this instance I get superior quality images using PS Save for Web, so I do not need a third party program which I assume Lanczos is. I  just wanted to know why I cannot get the same quality web images in AP as I get in PS - see attached compare images.

[livetheshot]

Lanczos is a resampler algorithm, not an extra plug-in. You can change Bilinear to Lanczos by clicking on the Resampler menu

One thing I've noticed in your screenshot is the brightness and saturation differences between what I'm presuming is a jpg saved in PS and the other in AP. Double check that your colour format and profile of your master file is in RGB8 and sRGB when exporting.

If you click on More, you also get other options. I usually stick to these values for the web but vary the quality depending on where I'm uploading the final image to. You may also opt to drop the metadata as that usually contains exif and IPTC info.

[Freddie360]

Thanks for your info, however, I cannot find this particular Resampler menu anywhere. Please advise.

[R C-R]

1 hour ago, Freddie360 said:

Thanks for your info, however, I cannot find this particular Resampler menu anywhere. Please advise.

It is right there in the window that appears when you use the File > Export menu item:

In the Export Persona, it is on the Export Options Studio:

[All Media Lab]

Hi Freddie,

I've been reading your post and you talk about ppi, but for the web DPI and PPI (Used for print) means nothing. Only the size in pixels of the image counts.

So forget about that and only look at the pixel size. I'm using JPEGMINI for optimizing it's a drag and drop app that automatically optimizes your images. So I export everything at 100% quality and then drop in in the JPEGmini app. Unfortunately the Photoshop plugin is not working in Affinity, but when you drop say a hundred images on the app it optimizes it in seconds and it's super quality.

This is how image sizes are used nowadays in a website: 

 <picture>
<source media="(max-width: 3500px)"
type="image/webp"
data-sizes="auto"
srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="
Responsive-Images/Home/Home-Aterlier-Wil/webp/wil-art-home-wil-600.webp 600w,
Responsive-Images/Home/Home-Aterlier-Wil/webp/wil-art-home-wil-800.webp 800w,
Responsive-Images/Home/Home-Aterlier-Wil/webp/wil-art-home-wil-1000.webp 1000w,
Responsive-Images/Home/Home-Aterlier-Wil/webp/wil-art-home-wil-1500.webp 1500w,
Responsive-Images/Home/Home-Aterlier-Wil/webp/wil-art-home-wil-2000.webp 2000w,
Responsive-Images/Home/Home-Aterlier-Wil/webp/wil-art-home-wil-2500.webp 2500w" class="lazyload img-responsive">
<img
data-sizes="auto"
data-src="Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-600.jpg"
srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="
Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-600.jpg 600w,
Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-800.jpg 800w,
Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-1000.jpg 1000w,
Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-1500.jpg 1500w,
Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-2000.jpg 2000w,
Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-2500.jpg 2500w"
src="Responsive-Images/Home/Home-Aterlier-Wil/jpg/wil-art-home-wil-600.jpg" class="lazyload img-responsive"
alt="Wil van Wil Art in haar atelier in Kerkrade Zuid Limburg achter de schildersezel">
</picture>

 

[Freddie360]

Thanks for that.

[Alfred]

On 8/2/2019 at 10:29 PM, R C-R said:

At the least, try using a resample algorithm better suited to photos, like one of the Lanczos ones, but at those pixel dimensions it isn't going to help much.

Lanczos really comes into its own when upscaling. For downscaling, where you’re discarding pixels instead of creating new ones, bicubic resampling should be adequate.

[R C-R]

1 hour ago, All Media Lab said:

Hi Freddie,

I've been reading your post and you talk about ppi, but for the web DPI and PPI (Used for print) means nothing. Only the size in pixels of the image counts.

Freddie, for more about that, reading the Affinity Spotlight article "Understanding DPI" may help.

There is also an old YouTube video tutorial of the same name.

[All Media Lab]

The title of your post was "SAVING FOR THE WEB" so to keep it simple:

I think the Youtube video only makes it more complicated.

For webdesign you just don't use DPI or ppi no matter if it says 300 DPI or 96 DPI an image of 500px X 500px = an image of 500px X 500px that's basically all you need to know. When you use your images for print then it makes sense. 

Adobe used to teach people this in Adobe Classroom in a book and said that 96 DPI and 72 DPI is for the web, but this was nonsense!

The only sensible thing in Photoshop save for web is the optimization image monitor that is missing in Affinity, that's why I use JPEGmini because that optimizes automatically . 

 

[HVDB Photography]

6 minutes ago, All Media Lab said:

The title of your post was "SAVING FOR THE WEB" so to keep it simple:

I think the Youtube video only makes it more complicated.

For webdesign you just don't use DPI or ppi no matter if it says 300 DPI or 96 DPI an image of 500px X 500px = an image of 500px X 500px that's basically all you need to know. When you use your images for print then it makes sense. 

Adobe used to teach people this in Adobe Classroom in a book and said that 96 DPI and 72 DPI is for the web, but this was nonsense!

The only sensible thing in Photoshop save for web is the optimization image monitor that is missing in Affinity, that's why I use JPEGmini because that optimizes automatically . 

 

Indeed ...

Here's an interesting article that disrupts that myth ...

https://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/

 

[All Media Lab]

Funny exactly what I was talking about!

[Freddie360]

I have been in the graphics industry for a long time and now I have to unlearn all we thought we knew to be right about screen resolution images. I read the article and will need to read it again to fully absorb the mental changes I will have to make,  I will experiment to try and get what I want without resorting to Photoshop. Thanks to everyone who contributed to my 're-education'.

[Freddie360]

Experimenting with an image in AP, I use the Export window and change the image from 420x 510px to 70x85pix without altering anything else to produce a low memory good looking image. However, as has happened before with AP exporting, when I import into my Freeway web program it is very small, much smaller than the 70x85 graphic box its supposed to fill - see image. This may be a Freeway thing, but it does not happen when using PS generated web images and the response to 'show original size' in Freeway does not alter its minute size.

[R C-R]

39 minutes ago, Freddie360 said:

However, as has happened before with AP exporting, when I import into my Freeway web program it is very small, much smaller than the 70x85 graphic box its supposed to fill

Just guessing, but that is probably because the image is much smaller than the canvas in AP. If you click on the image layer with the AP Move tool, what does the Transform panel show for its X, Y, W, & H values with the document set to use pixel units?

[Alfred]

8 minutes ago, R C-R said:

Just guessing, but that is probably because the image is much smaller than the canvas in AP.

If so, the ‘Clip Canvas’ command (on the Document menu) provides an easy fix.

[Freddie360]

The canvas size says its 70x85px and the Transform palette stays the same, ‘Clip Canvas’ command has no effect, which I would expect.  

[All Media Lab]

2 hours ago, Freddie360 said:

Experimenting with an image in AP, I use the Export window and change the image from 420x 510px to 70x85pix without altering anything else to produce a low memory good looking image. However, as has happened before with AP exporting, when I import into my Freeway web program it is very small, much smaller than the 70x85 graphic box its supposed to fill - see image. This may be a Freeway thing, but it does not happen when using PS generated web images and the response to 'show original size' in Freeway does not alter its minute size

Hi  Freddie,

Don't understand what you try to do, but an image of 70 x85px is nothing it looks like a small dot on a 5k monitor.

I did show you how images are used nowadays and advice you to first study how to use images in a website like this:

<picture>
  <source media="(min-width: 70em)"
          sizes="40vw"
          srcset="nebula-artsy-wide-2800.jpg 2800w,
                  nebula-artsy-wide-2240.jpg 2240w,
                  nebula-artsy-wide-1400.jpg 1400w,
                  nebula-artsy-wide-1120.jpg 1120w">
  <source media="(min-width: 35em)"
          sizes="36vw"
          srcset="nebula-artsy-square-1120.jpg 1120w,
                  nebula-artsy-square-900.jpg 900w,
                  nebula-artsy-square-560.jpg 560w,
                  nebula-artsy-square-450.jpg 450w">
  <img src="nebula-artsy-tight.jpg" alt="An artsy cat">
</picture>

Because you are dealing with all different devices with different resolutions you have to serve the browser with images in any logic size so that it looks good on a iMac 5k, mobile phone, tablet or desktop. But you don't want to serve a 5k image on a 2k phone screen and in portrait mode on the phone you need a portrait image and not a landscape sized one. That you can all easily solve with HTML's  picture and srcset. 

All you see are images of different sizes in px that's all! Of course a 4k monitor is filled with a full screen  image of 4096px X 2160px that's it!

In Affinity Photo you can go to the crop tool presets and see some of  the screen sizes as presets

This is a tutorial:

https://www.lullabot.com/articles/fundamentals-of-responsive-images

A free app for images cropping and art direction:

https://www.responsivebreakpoints.com/

Regards,

David

[R C-R]

2 hours ago, Freddie360 said:

The canvas size says its 70x85px and the Transform palette stays the same, ‘Clip Canvas’ command has no effect, which I would expect.  

Earlier, you said the image was 420 x 510 px. In the Affinity document, that won't change if you change the dimensions in the File > Export window or in the Export Persona. So in the Affinity document, not the exported version, how large is the image? Are there any other layers in that document besides the one with the image in it?

[Freddie360]

The master Affinity document is a .afphoto image and is 420 x 510 px with multiple layers, before exporting (to a jpg) I flattened the .afphoto image to a single layer and in the Export window I reduced the pixels to 70x85px - result, image is still tiny when imported to Freeway web program. 

I tried ticking the 'Don't export layers hidden by Export Persona' when exporting the image - result, image is still tiny when imported to Freeway web program.

If I change the .afphoto image from 420 x 510px @300ppi to 70 x 85px @72ppi before Exporting it the resulting jpg image fits perfectly into my Freeway web program, but the image is not as good as the Photoshop Save for the Web version.

I have to move on this site, so reluctantly I will use Photoshop Save for the Web, because it works.

[Arto Autio]

Greetings from new member. I was using back in (it was flinstones era, macromedia, if anyone remembers) fireworks and it had nice export feature, where you were actually able choose different formats and qualityes for 4 different expoert method and was able to look the difference on that export panel. Am i i blind or is there similar feature on Affinity product? 
- Arto- 

[MEB]

Hi Arto Autio,
Welcome to Affinity Forums
No, currently there's no similar functionality in the Affinity products. The Export Persona doesn't provide previews.