Highlighted

Text within JPEG blurred when placed in Muse

Explorer ,
Jan 03, 2018

Copy link to clipboard

Copied

Hello. I'm doing a site in Muse (version 2018.0) that shows samples of my advertising work, including print ads with headline and body copy (text), which is the subject of my question. To bullet point it out:

• I'm pretty accustomed to prepping graphics with embedded text in Photoshop for web with minimal or no quality issues

• In Muse, the body text is coming out blurry (screenshot included for reference) when following a similar process

• The screenshot example is from a preview – Original is 2X size, saved as JPEG Baseline Optimized

• Muse resolution: HiDPI

• I've tried different anti-alias font settings with a similar result

I know this may seem better suited for a Photoshop discussion. But as I mentioned, I'm noticing these font issues more with Muse than when providing files for other websites. So I figured I'd give it a try here.

Any tips would be appreciated – including any stupid rookie mistakes I made!

Muse Example.png

Yes, you are absolutely correct. If you have defined your site in „Site Properties"as „HiDPI“ all your images are placed in half the pixel size of the original image. In this case, the „Assets“ panel shows the „2x“ indicator to the right of this asset. If this indicator isn’t shown, the image’s pixel dimension isn’t sufficient for HiDPI output.

The other way round: If you need a image of, let’s say, 150 x 300 px you have to create it with a pixel size of 300 x 600 px (not more, not less) to obtain best possible results. In this case, the „Assets“ panel shows the „2x“ indicator, and Muse won’t touch your image during output at all:

Screen.jpg

If your image is bigger or smaller, Muse is forced to resample it, what may end up in a loss of quality (Muse is no image editor like Photoshop)

I hope, I could clarify, what I intended to say.

Views

521

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

Text within JPEG blurred when placed in Muse

Explorer ,
Jan 03, 2018

Copy link to clipboard

Copied

Hello. I'm doing a site in Muse (version 2018.0) that shows samples of my advertising work, including print ads with headline and body copy (text), which is the subject of my question. To bullet point it out:

• I'm pretty accustomed to prepping graphics with embedded text in Photoshop for web with minimal or no quality issues

• In Muse, the body text is coming out blurry (screenshot included for reference) when following a similar process

• The screenshot example is from a preview – Original is 2X size, saved as JPEG Baseline Optimized

• Muse resolution: HiDPI

• I've tried different anti-alias font settings with a similar result

I know this may seem better suited for a Photoshop discussion. But as I mentioned, I'm noticing these font issues more with Muse than when providing files for other websites. So I figured I'd give it a try here.

Any tips would be appreciated – including any stupid rookie mistakes I made!

Muse Example.png

Yes, you are absolutely correct. If you have defined your site in „Site Properties"as „HiDPI“ all your images are placed in half the pixel size of the original image. In this case, the „Assets“ panel shows the „2x“ indicator to the right of this asset. If this indicator isn’t shown, the image’s pixel dimension isn’t sufficient for HiDPI output.

The other way round: If you need a image of, let’s say, 150 x 300 px you have to create it with a pixel size of 300 x 600 px (not more, not less) to obtain best possible results. In this case, the „Assets“ panel shows the „2x“ indicator, and Muse won’t touch your image during output at all:

Screen.jpg

If your image is bigger or smaller, Muse is forced to resample it, what may end up in a loss of quality (Muse is no image editor like Photoshop)

I hope, I could clarify, what I intended to say.

Views

522

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
Jan 03, 2018 0
LEGEND ,
Jan 03, 2018

Copy link to clipboard

Copied

If you place — and prepare — your images at 100 % pixel size (using HiDPI with exact double pixel size) the images won’t be touched by Muse in any way and will be passed through to the output files without any modification. Output quality will be the same as input quality.

You con simply test this by placing such an image st 100 % size and exporting the file as HTML. If you compare the image from the exported „images“ folder with your original image you‘ll see: They are identical.

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...
Jan 03, 2018 0
Explorer ,
Jan 03, 2018

Copy link to clipboard

Copied

Thanks for the quick reply, Gunter. To what you note about size...let me make sure I'm doing what you suggest here.

• The size I want it to appear in Muse is 638 X 891 at the widest breakpoint.

• The file I placed in Muse is double that size (1276 X 1782) using HiDPI.

• I went to "file", "place" and it placed the image at 638 X 891 – which is actually 50% of actual size, but to the size I want.

The "100%" threw me a bit so just thought I'd ask. If this is correct, I'll definitely try the export it as you suggest.

Thanks again!

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...
Jan 03, 2018 0
LEGEND ,
Jan 03, 2018

Copy link to clipboard

Copied

Yes, you are absolutely correct. If you have defined your site in „Site Properties"as „HiDPI“ all your images are placed in half the pixel size of the original image. In this case, the „Assets“ panel shows the „2x“ indicator to the right of this asset. If this indicator isn’t shown, the image’s pixel dimension isn’t sufficient for HiDPI output.

The other way round: If you need a image of, let’s say, 150 x 300 px you have to create it with a pixel size of 300 x 600 px (not more, not less) to obtain best possible results. In this case, the „Assets“ panel shows the „2x“ indicator, and Muse won’t touch your image during output at all:

Screen.jpg

If your image is bigger or smaller, Muse is forced to resample it, what may end up in a loss of quality (Muse is no image editor like Photoshop)

I hope, I could clarify, what I intended to say.

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...
Jan 03, 2018 0
Explorer ,
Jan 03, 2018

Copy link to clipboard

Copied

Yep, you clarified it very well, thank you. A lot of this I sort of knew, but wanted to double check with someone more knowledgeable as you are to confirm. I appreciate it!

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...
Jan 03, 2018 0
Explorer ,
Jan 03, 2018

Copy link to clipboard

Copied

Actually, Gunter, if you don't mind, I do want to add something...regarding the smaller text looking blurry. The screenshot I included was set at HiDPI and 50% of the original as we discussed here. Is that happening within Preview mode that would look better once exported to html?

I do a lot of design work with text as part of the image that displays on Amazon. I have to account for their "view larger" feature and a nasty compression rate. I prepped here similar to what I do for Amazon. Normally the text looks less blurry. Sorry to trouble again.

Thanks!

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...
Jan 03, 2018 0
LEGEND ,
Jan 03, 2018

Copy link to clipboard

Copied

Just as I said: Place an image in a .muse file without scaling it in any way, export this site as HTML to your hard drive, locate the image in the exported “images“ folder and compare it to the original. Or preview your site in browser and save the image directly from the browser window to compare it to the original asset.

If you followed my suggestions, there shouldn‘t be any differences in image quality and file size.

After having exported the image, Muse can‘t do anything more. The rest is completely up to the browser or the operating system. For example: Muse can‘t control or influence image quality on responsive pages, while resizing. And additionally, Muse of course can‘t control image quality, when the image is zoomed in browser view, because the browser has only one image and therefore has to re-render it by its own means.

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...
Jan 03, 2018 0
hamiterj LATEST
Explorer ,
Jan 04, 2018

Copy link to clipboard

Copied

Thanks again Gunter. I suspected that but just wanted to make sure. I appreciate your time and help!

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...
Jan 04, 2018 0