Skip to main content
Anonymous
January 28, 2021
Answered

Dreamweaver and responsive images.

Hi All. I'm wondering what the point is of Dreamweaver's responsive image on the Bluetooth insert button. Does anyone bother to use it?

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Nancy OShea
    Nancy OSheaCorrect answer
    Community Expert
    January 29, 2021

    Nancy. I guess I am confused a bit.  I don't need to use the picture element because I am not swapping out different images at different sizes. I'm only trying to swap the same image but at different sizes using srcset and sizes.  Does that make sense?

     

     


    SRCSET:

    1 image at 4 different sizes = 4 images created by you in Photoshop.

     

    BOOTSTRAP:

    class="img-fluid" = 1 image that shrinks to fit smaller devices.

     

    Nancy O'Shea— Product User & Community Expert
    View reply

    11 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 29, 2021

    Sorry, I don't know what you mean.  Can you post a screenshot?

     

    Translate
    Nancy O'Shea— Product User & Community Expert
    Anonymous
    January 29, 2021

    Hi Nancy.  I have a screenshot below.  I am learning about srcset and sizes to make an image responsive.  In Dreamweaaver 2021 I learned to go to the insert panel, make sure bootstrap components is selected then click on responsive images. Then I got to thinking why would I bother to use this?  What is the point as it does not make the image responsive for all screens.

     

    Translate
    osgood_
    Legend
    January 29, 2021

    'srcset' and 'responsive' images are different.

     

    srcset uses a set of different sized images for browser viewports of various widths:

     

    https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

     

    A responsive image is just one that is set as a percentage width which will reduce and enlarge according to the size of the browser viewport width.

     

    Neither Dreamweaver or Bootstrap, as far as I know, has an option to include srcset - you have to introduce that manually into your code.

     

    Bootstraps css utility class 'img-fluid' will effectively not allow the image to grow any wider than its parent container or browser viewport width. The image will reduce in size as the container or viewport width is reduced. Not really sure that you will see too much difference when 'img-fluid' is applied to a small Facebook logo. The effect would be more obvious on larger images.

     

     

     

    Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices