Optimizing image quality for MUSE websites

[jarvis393]

I am building a MUSE website for my cabinet shop.

As part of this process I am going through all my old images and cleaning them up in Lightroom.

I export them from Lightroom to PhotoshopCC where  I perform a Hi-Pass sharpening then export them as Web-ready Jpeg.

I have some questions about proper file size during the Web-ready export.

I currently save them as a JPEG Medium Preset:  Quality 30:  2000 pixels wide

The file sizes range from 200 - 300 Kb per image.

I would like these images to load quickly and be sharp on an iPhone , iPad or monitor.

My website will use three different size images.

The gallery page will present about 50 thumbnails that will link you to the master page for a particular cabinet project.

The master page for each individual project will contain a dozen bigger images all visible on one page.

Each one of these mages will link you to a full page rendition of the particular image.

Navigation links will derive from clicking on each image.

My Questions are:

1)  Should I just export just one image from photoshop then rescale it up or down (in MUSE) depending on responsive design requirements for each web page or should I export three different size images for three different sets of breakpoints?

2)  What would be the maximum viable size (quality level) of an image that would be viewed full screen on a 27 inch monitor or iPad type device?

3)  Can anybody recommend a good place to learn more about optimizing image quality for a MUSE website?

I am new at this so thanks to anybody for any advice.

[Guest]

This is pretty good...

Using images and other objects in Adobe Muse

1) just a note you really need to judge each image on it's own merits...

2)some images can pass as okay in photoshop export for web at a quality of 30 ( most images that is low) but other images really might need a setting of 60-70 even 80 depending on the color content and detail.

[jarvis393]

Thanks HMMB,

That link holds a lot of useful stuff.  Am digesting it now.

[fotoroeder]

1) if you upload three different sizes for your images it takes three times more space, according to the size of the images, obviously.

2) it is around 1800 px, I guess from a recently post here in this forum.

3) if you export your pictures for "web and devices" out of PS as an "action" it should be the best, I guess.

https://helpx.adobe.com/search.html#q=image%20size%20and%20resolution&t=All&sort=relevancy&CommonPro...

Look for these threads as well:

Adobe Muse - image quality​

Mount big picture

Re: Retina / 100% width / scale to fit/scale to fill not allowed?​

Re: Slow loading​

and last but not least:  Making an Adobe Stock picture responsive to a big screen?

Hope this helps?

Uwe

[jarvis393]

Thanks for your help Uwe.  I am new to MUSE and can use all the help that I canget.

I do have a question about what  you said here:  "if you upload three different sizes for your images it takes three times more space, according to the size of the images:

Am I to infer from this that if you only upload one image and use it in different locations (and at different sizes) MUSE will reference just the one example of the photo?  Is this a CSS kind of a deal where the website internally references one instance rather than having to cycle back and forth to the server each time a different size is viewed?

\

[fotoroeder · Accepted solution]

Well, this might be for the coding people, but try the following: create a new empty site, one page, set your breakpoints like 1200 fixed width | 960 fixed width | 768 fluid width.

Use a picture and place it inside a frame (F) not (M).

Start with a huge picture which fills almost the whole browser at 960- set the resize to "none" (because otherwise it would be too big from 1200 towards 960, understand). At 960 scale it, so it fits inside the 768 (resize to  none again), at 768 set the picture to scale in width and height responsive. Check in Preview, if everything fits, like you want it.

Export as html and look inside the folder "images" in your exported html.

Only one picture.

Now if you place three different pictures, what will happen? Obvious, right?

With slide shows it is different, for these Muse creates pictures for each breakpoint as desired. But you can start with small sized pictures, if you do it with PS or something similar (save for web and devices).

So I could reduce the file for example for a 100% quality jpg with 578 kb to 137 kb with a quality of 50% and it could be reduced easily to 40% or maybe 30%. This depends on your pictures and this could be easily checked in advance.

[Günter Heißenbüttel]

In addition: If you have a HiDPI site with big images, you should read my answer here: https://forums.adobe.com/thread/1793996

[fotoroeder]

Yep, that´s right, you should read this. This I didn´t mention.

[Guest]

We used a 5000px image for a hidpi site so the resulting image was 2500px...beautiful on large screens where it was being seen at hotels...loaded fast enough even at 800kb or so...but they loved the quality of the image...another intranet site for a large hotel chain...you can do a lot with muse...

[Ussnorway]

jarvis393  wrote

My Questions are:

1)  Should I just export just one image from photoshop then rescale it up or down (in MUSE) depending on responsive design requirements for each web page or should I export three different size images for three different sets of breakpoints?

2)  What would be the maximum viable size (quality level) of an image that would be viewed full screen on a 27 inch monitor or iPad type device?

1. one image at the big size then scale that down for phone... i.e, down is ok but up = bad
2. every image is different but I would make them all the same size and aspect ratio if I wanted to show 50 together

p.s imo 50 images is asking too much for any iphone device and I would cut it back to 10 with an option to display more if they click a link... less is more with web design.