Copy link to clipboard
Copied
Just having completed my new web-site, I was trying it out in a web browser, and found it too heavy - the pages loading way to slowly. On the pages are many single photos and slide-shows. I guess one problem-solving act would be to diminish them - but how small can they be not to give a low-quality appearance? And are there other things I can do to solve this problem? There are no other heavy ingredients in the web-site, just text. Lisa
Concerning images:
If you make your images in pixel dimensions exactly(!) as big as you need them, you have total control over its quality.
If you place your images at 100% pixel size without any scaling, Muse won’t touch these images at all. Output quality will be exactly the same as input quality.
Best practice to achieve this: Don’t place an image
into your layout, but an image placeholder
Now scale your original image in Photoshop to exactly the dimensions of this placeholder, and place this ima
...Copy link to clipboard
Copied
Concerning images:
If you make your images in pixel dimensions exactly(!) as big as you need them, you have total control over its quality.
If you place your images at 100% pixel size without any scaling, Muse won’t touch these images at all. Output quality will be exactly the same as input quality.
Best practice to achieve this: Don’t place an image
into your layout, but an image placeholder
Now scale your original image in Photoshop to exactly the dimensions of this placeholder, and place this image directly into the placeholder frame.
Do this by using the biggest representation of your image (at widest breakpoint, if you use responsive layout). Muse will optimise the picture automatically for the smaller breakpoints. (If necessary, you may want to optimise the images in smaller breakpoints as well by yourself. You can do this, by right clicking onto the placed image in a smaller breakpoint and choose "Hide in Breakpoint", then place your self optimised image instead, right click this one and choose "Hide in Other Breakpoints".
Note: If you are creating a HiDPI site, do the same, but instead of pixel size, use double pixel size for your images. That means: if you need 300 x 400 px, place an image with 600 x 800 px.
Copy link to clipboard
Copied
Thanks for this informative answer! Now I just need to know: what exactly is a placeholder and how do you make it?
Lisa
Copy link to clipboard
Copied
Look at the little screenshots!
An image placeholder simply is an empty image frame, which can be filled later by dragging an image into it or using the "Place"command.
There are 2 ways to apply these "placeholders":
1. Select the "crossed out" rectangle from the vertical toolbar and "draw" a rectangle onto your page.
2. Place an image, double click onto it to select the image within its container and press backspace to delete the image content. What remains, is an empty image container (= placeholder) waiting to be filled later on.
Copy link to clipboard
Copied
I´m sorry - but there still are some things that I don´t understand. The pictures on my pages have a certain size, chosen by me. All my original photos I have made 567 pixels high, for then to up- or down-size them on the pages.
So. If I do as you say - copy one of those, let´s say, up-sized photos on one of the pages, double-click on it and delete the picture, I then have a place-holder of the correct size. But how do I then get it into PhotoShop? I tried to copy/paste it, but that didn´t work. So I still don´t understand the connection with the pictures of the sizes that I have chosen in Muse and how to get them exactly right-sized in PhotoShop. I don´t find any information of the pixel-size of the place-holder, and don´t know how big it is, where it is.
Copy link to clipboard
Copied
Hm. You don’t get me, I think.
If you want to optimise your image assets:
Before placing an image, use placeholders in Muse to check the optimum size.
You obtain the pixel size by looking at the upper command strip, the transform panel or the tool tip, appearing, when resizing the container:
In Photoshop create an image in exactly this pixel size, save it and place it into the corresponding placeholder frame in Muse.
This may be quite a lot of work, and is only necessary, if you want your assets to have the very best compromise of "size" (kb/mb) – what means load time – and quality.
Normally Muse does this for you, but since Photoshop produces significant higher quality, it is highly recommended to do this job in PS instead of leaving it to Muse, if you want to obtain best possible quality.
If this procedure doesn’t help in reducing load times, you could try to use some jpg optimiser tools like the highly effective "JPEG mini (http://www.jpegmini.com)
The next step, if nothing helps, is reducing the amount of images on one page and eventually relinquish fashionable and fancy "one pager" in favour of an "old school" multi page site.
Copy link to clipboard
Copied
Now I get you! - quite a lot of work, you´re right. But thank you for all the information and your patience.
:)Lisa