Skip to main content
B
beng2000
Known Participant
January 28, 2021
Answered

Dreamweaver and responsive images.

  • January 28, 2021
  • 1 reply
  • 3308 views

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 has been closed for replies.
    Correct answer Nancy OShea

    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.

     

    1 reply

    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?

     

    Nancy O'Shea— Product User & Community Expert
    B
    beng2000Author
    Known Participant
    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.

     

    O
    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.

     

     

     

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