Jump to content

Export Persona - different sizes - quality question.


Recommended Posts

My question is, well... a little bit philosophical:

When I select a slice in export persona and try to add different sizes, then - quite surprisingly - i can't specify the sizes, i can just select them from the list. The list contains a number of options, which I don't understand: like 100w (a 100px width preset??), 64p and stuff, as well as some that I understand: 1x, 2x, 3x.

My question is: does it make any sense to export in 2x or 3x? Like, this is not vector graphics, so the photo needs to be automatically resized. So, if understand correctly - it would create bigger files of the same quality. In general: does it make any sense in terms of quality?

What in my opinion would make more sense is if it would actually resize to 0.75, 0.5, 0.25 and so on. That would create smaller files of lower quality (to use with <img>'s srcset for example), not affecting the actual quality of the file.

Please correct me if I'm wrong.

Link to comment
Share on other sites

Hi @duch_suva,

When using <picture> and <srcset> I would consider using "w" instead of 1x, 2x, 3x etc.

Start with the first size you want for example 1000w (=1000px) then click on the additional properties next to your size there you can rename the image and show the size: for example my-image-1000px done by putting "name",  "width" and "px" or when the name is already OK you  use the "slice name". To prevent you from having to do this for every slice you can copy the slices and only rename the sizes. For example 1000w, 2000w, 3000w etc. When you made a export set up with all slices you can save it as a preset.

Then convert the jpg also in webp, optimize the jpg's with for example jpegMini

Code example not the same sizes but you get the idea this is for screens of max 2000px so if you want to serve a iMac 5k you have to go till 5000w:

   <picture>
                <source media="(min-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-1000px.webp 1000w, assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-2000px.webp 2000w, " type="image/webp"> 
                <source media="(max-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-phone-800px.webp 800w, assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-phone-1250px.webp 1250w" type="image/webp">
                <source media="(min-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-1000px.jpg 1000w, assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-2000px.jpg 2000w" type="image/jpeg"> 
                <source media="(max-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-phone-800px.jpg 800w, assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-phone-1250px.jpg 1250w" type="image/jpeg"> 
                <img src="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-2000px.jpg" class="img-fluid"/>
            </picture>

When you use a vector for example a SVG you only have to use one image for every ratio and sometimes you can do it with only one, because there is no quality loss in any size. With images on screen only the larger dimensions in pixels creates better quality images. For example a HD screen needs 1080px x 1920px to produce a good quality full screen image and a 5k iMac needs 5120px x 2880px for the same image to look good. On screen DPI and PPI means nothing!

 

Regards,

David

 

Example for a header ratio 4:1 wide devices.

 

affinity-header.png

affinity-header-panel.png

 

Example for a header ratio 4:3 small devices:

header-portrait-affinity.png

portrait-panel.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.