Jump to content

Exporting Designer files to Web JPEGS for E-comerse

Recommended Posts

Need to export an image in designer to JPEG but under 1MB if possible for optimal website loading. 

The image is 2048x2048 px and it has to stay those measurements, the picture is perfect quality of 400dpi and need to keep it perfect quality. At the moment the images are exporting as 2-3MB per image. I have tried to set the document as 'web' but it reverts back to 'photo'. I know it's possible to do so as my competitors are achieving this with perfect images and having 170KB image size in JPEG files. 


Please help! Thank you! 

Link to comment
Share on other sites

Welcome to the forums.

It will be difficult to keep “perfect quality” using a JPEG but it really depends on the image in question and exactly what you mean by “perfect quality”. You can use various techniques to ‘lighten the load’ of an image but it depends very much on the image and how much detail you are willing to lose (you probably don’t need all of it for it still to look absolutely fine on-screen).

Designer isn’t really the best Affinity application for this sort of compression work as Photo has many more image manipulation tools, such as the Denoise Filters. See this tutorial: https://affinity.serif.com/en-gb/tutorials/photo/desktop/video/333760172/

If you can post an example image someone will probably be able to point you in the right direction of what you can do to that particular image to get a good-looking, but small, result.

P.S. As far as I can tell, setting the Document Type via Document Setup will not change the document type from what it was originally. (I don’t know if this is expected behaviour.) The Document Type is there as a quick way to apply some defaults when you create new documents but, as far as I know, it doesn’t affect how the document ‘behaves’, to Designer it is just a document like any other.

Link to comment
Share on other sites

12 hours ago, dukethelabel said:

The image is 2048x2048 px and it has to stay those measurements, the picture is perfect quality of 400dpi and need to keep it perfect quality.

Some things to consider about "perfect quality":

  • DPI applies only to physical output like prints, not to 'virtual' output like web pages. For more about this see for example Understanding DPI or The Myth of DPI, among others
  • Even if you embed width & height attributes into your web page's HTML <img> element, you cannot always fully control the pixel dimensions that different web browsers will use to display it on a web page. This is because almost all modern browsers offer users various settings that can override these attributes. Also, there are reasons you may want to avoid embed width & height attributes that might be larger than the size of a user's browser window, like if you want everyone to see the entire image on the page without having to scroll around the page to do so.
  • In fact, even the color of each pixel displayed on the web page may be different from those of your image because different browsers handle color management differently (or not at all).
  • While there is a lossless JPEG format, Affinity does not offer it as an export option (& many browsers can't use it anyway) so even exporting at 100% quality (which uses minimal lossy compression & generally produces overly large file sizes) will degrade the quality somewhat.

What all this means is if you are designing raster image files for web page use, you will have to make a compromise between file size & image quality. This is true regardless of which app you use.

However, Affinity does not offer some of the things that other apps do to make this process easier, like export previews or the most efficient JPEG compression algorithms available (some of which can take many minutes or even hours to run even on very powerful systems), so it may not be the best choice for this kind of work.

All 3 1.10.6, & all 3 V2.03 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.6; Affinity Designer 1.10.6; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

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.

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.


  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.