Using images in responsive design

Discussion in 'General Muse' started by nancy sheridan, Jun 17, 2016.

  1. nancy sheridan

    nancy sheridan Member

    Hello Everyone,

    I'm wondering what everyones thoughts are of using images in the new muse responsive. I've read some conflicting advice around the web regarding how muse handles images.

    I'm creating a portfolio site and it will contain quite a few images. I've found that some images are blurry or pixaleted at smaller break points even though the images are of good quality.

    I've read advice online that roughly divides up between 2 schools of thought.

    a) you should place your images at the dimensions and images size that you want them to appear on your largest breakpoint. Apparently this means that muse doesn't screw around with them with scaling down to smaller breakpoints.


    b) you should double (x2) the size of your images because muse scales them down at smaller breakpoints.

    I've changed my site properties so that HiDPI x2 is enabled and have unchecked the box to turn opaque png to jpg.

    I've dabbled with various sizes of images and different formats to test it all out.

    I've also read online that you if you fill a rectangle or text box with an image rather than placing it then muse also scales it down with poor results.

    Does anyone have any definitive advice and a workflow that i could adopt to ensure that my images are clear at all breakpoints without compromising on browser load time?

    Thanks in advance!


Share This Page