Highlighted

Poor Quality when Exporting at 1x

New Here ,
Sep 11, 2020

Copy link to clipboard

Copied

I've been trying to export some banners to use our site for work and I keep running into this issue. Generally I export my PNGs & JPEGs at 2x to avoid this all together, but the site requires the dimensions of the image to be exactly the same as what is in the code.

 

Whenever I export at 1x it is always at least slightly pixelated. Is this just the nature of exporting at 1x, or is there something I could be doing differently that would resolve this issue?

 

Potentially relevant information:

- Happens regardless of PNG or JPEG type

- Color Mode: RGB

Most Valuable Participant
Correct answer by Jacob Bugge | Most Valuable Participant

autumn,

 

"Whenever I export at 1x"

 

Is that at 72 PPI?

 

Otherwise,the following which may sound unforgivably outdated and boring, sorry.

 

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, it is important to have the images in the exact desired final pixel x pixel size, forget about resolution which may actually lead to wrong sizes and hence blurriness. It is easiest and safest to work at the desired size.

 

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

 

And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork.

 

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for, or at sizes that are powers of 2 times as large (2, 4, 8, and so on).

 


For clean and crisp artwork avoid JPEG.

 

It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).

 

Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.


Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect Settings.

 

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

 

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

 

TOPICS
Import and export

Views

48

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Poor Quality when Exporting at 1x

New Here ,
Sep 11, 2020

Copy link to clipboard

Copied

I've been trying to export some banners to use our site for work and I keep running into this issue. Generally I export my PNGs & JPEGs at 2x to avoid this all together, but the site requires the dimensions of the image to be exactly the same as what is in the code.

 

Whenever I export at 1x it is always at least slightly pixelated. Is this just the nature of exporting at 1x, or is there something I could be doing differently that would resolve this issue?

 

Potentially relevant information:

- Happens regardless of PNG or JPEG type

- Color Mode: RGB

Most Valuable Participant
Correct answer by Jacob Bugge | Most Valuable Participant

autumn,

 

"Whenever I export at 1x"

 

Is that at 72 PPI?

 

Otherwise,the following which may sound unforgivably outdated and boring, sorry.

 

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, it is important to have the images in the exact desired final pixel x pixel size, forget about resolution which may actually lead to wrong sizes and hence blurriness. It is easiest and safest to work at the desired size.

 

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

 

And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork.

 

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for, or at sizes that are powers of 2 times as large (2, 4, 8, and so on).

 


For clean and crisp artwork avoid JPEG.

 

It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).

 

Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.


Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect Settings.

 

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

 

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

 

TOPICS
Import and export

Views

49

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 11, 2020 0
Adobe Community Professional ,
Sep 11, 2020

Copy link to clipboard

Copied

You are exporting a pixel image, so what do you expect?

Turn on pixel preview and design your banner in a way that it's legible and looks good.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 11, 2020 0
Adobe Community Professional ,
Sep 11, 2020

Copy link to clipboard

Copied

You can try if exporting with Art optimized anti-aliasing makes a difference when compared to Type optimized.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 11, 2020 0
Most Valuable Participant ,
Sep 11, 2020

Copy link to clipboard

Copied

autumn,

 

"Whenever I export at 1x"

 

Is that at 72 PPI?

 

Otherwise,the following which may sound unforgivably outdated and boring, sorry.

 

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, it is important to have the images in the exact desired final pixel x pixel size, forget about resolution which may actually lead to wrong sizes and hence blurriness. It is easiest and safest to work at the desired size.

 

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

 

And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork.

 

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for, or at sizes that are powers of 2 times as large (2, 4, 8, and so on).

 


For clean and crisp artwork avoid JPEG.

 

It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).

 

Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.


Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect Settings.

 

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

 

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 11, 2020 0
New Here ,
Sep 14, 2020

Copy link to clipboard

Copied

Super appreciate the thorough and helpful answer! I don't often use Save for Web but it was helpful in this case being able to preview it on web, vs just viewing it on my desktop. Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 14, 2020 0
Most Valuable Participant ,
Sep 14, 2020

Copy link to clipboard

Copied

For my part you are welcome, autumn.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 14, 2020 0