Sizing problems when placing images from Photoshop

[Wimot Budgen]

Hi all,

I'm in the process of setting up a new website and I wanted to structure it in a way so that I have fixed width breakpoints that cover desktop and tablet browsers and then create a fluid width breakpoint that covers mobile browsers.

The problem I'm having is with the initial breakpoint width. I want the largest breakpoint to be 1200px (page size) and Muse puts 100px either side of this for the browser window which is all fine. I also wanted to use the hiDPI setting across the site so it looks sharp on Retina screens.

The problem I'm having is when I set up images in Photoshop I assumed that I just have to create them all at x2 the pixel dimensions I actually need. Muse then adds in the code to use either the x2 files or the standard ones depending on what screen it's viewed on.

So... I have a banner graphic that I want to span the 1200px width of the web page, in Photoshop I have set this image up to 2400px 72dpi. When I place this image into Muse it brings it in at 1024px?? Does anyone know what it chooses 1024px from a 2400px image? When viewed in a browser on a Retina screen it looks fuzzy as well which isn't ideal!

Any help will be greatly appreciated!

Kind Regards

Dan

[Günter Heißenbüttel · Accepted solution]

This issue is easy to resolve:

Muse always places very big images (2048 px and wider in one dimension) initially in a size of 1024 px in widest dimension – simply to avoid inadvertently placing too "heavy" images and thus causing loading time issues of your site in the web.

If you are sure to use that big images, you can do this by

• selecting the placed 1024 px image,

• open the "Transform" panel and

• enter the original values of your image (2400 px in your case)

If you want some more detailed informations about this subject, please read my answer in this thread: https://forums.adobe.com/thread/1793996

[Wimot Budgen]

Thanks for the quick response! The problem with scaling the image using the transform tool is that it makes the image look pixelated when I preview the site in a browser. Is this because it's just a preview of the site or will this happen on the final published site as well?

[Günter Heißenbüttel]

Why don't you try?

Export your site as HTML, and have a look into the exported "images" folder.

If you have your image at exactly the size you created it in Photoshop, there should be no difference between the original and the exported version.

[Wimot Budgen]

Thanks again... I've just exported the site and the folder has two versions of the picture in there. One has x2 at the end of the file name and is set up at the size I needed. It looks pixelated on the browser preview but I'm assuming it will be OK once the site has been published.

[Wimot Budgen]

OK... so the site still looks pixelated when I preview it in a browser but I've just published it to the Adobe Business Catalyst server and it seems to have worked! When I view the site on a retina display it all looks super sharp! All I did with my Photoshop file was set everything up at twice the pixel dimensions and 72dpi so didn't need to use 300dpi.

Thanks again for all the suggestions!

[Pavel_Homeriki]

Once we already disagreed on this issue. I want to repeat my thesis.

When I did 72 dpi in photoshop, my images were not clear in Muse. Since then, I always do 300 dpi in Photoshop and there are no problems. I do not know why this happens, but it happens (with the images that are made in Photoshop).

[Günter Heißenbüttel]

https://forums.adobe.com/people/Pavel+Homeriki  schrieb

When I did 72 dpi in photoshop, my images were not clear in Muse. Since then, I always do 300 dpi in Photoshop and there are no problems. I do not know why this happens, but it happens (with the images that are made in Photoshop).

Pavel, could you please tell me, what exactly you mean:

• "… not clear in Muse" means "not clear in Muse", but clear in browsers?

• Does this happen with every image size or only with biog ones?

• Could you provide a sample .muse file along with an original image?

I can’t reproduce something like that!

Thank you, Pavel Homeriki​!

[Pavel_Homeriki]

• "… not clear in Muse" means "not clear in Muse", but clear in browsers?

It means not clear in browser after export from Muse .

I have no examples. More than two years ago, I encountered this and since then I have done 300 dpi in Photoshop. Muse still converts images to 72 dpi if it is not used in the original size. So there's no point in saving resources in Photoshop.