Results 1 to 5 of 5

Thread: Responsive Image Confusion

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Responsive Image Confusion

    I've been reading different articles on responsive images until I feel like my eyes are about to bleed. One of the articles that seemed less confusing was this one: https://developer.mozilla.org/en-US/...ponsive_images

    So I understand the principal, it makes sense to not overload phones with unnecessarily large images, and I think I get the basics of the code. I create and upload my image in 3 different sizes:
    http://cismiami.org/img/thankyoukids_480.jpg
    http://cismiami.org/img/thankyoukids_768.jpg
    http://cismiami.org/img/thankyoukids_1100.jpg

    Then I code and upload my test page:
    Code:
    <picture>
    <img src="/img/thankyoukids_1100.jpg"
    alt="Thank you for supporting Communities In Schools of Miami"
    srcset="
    http://cismiami.org/img/thankyoukids_480.jpg 480w,
    http://cismiami.org/img/thankyoukids_768.jpg 768w,
    http://cismiami.org/img/thankyoukids_1100.jpg 1100w"
    sizes="(max-width: 1100px) 100vw, 1100px">
    </picture>
    With the result: http://cismiami.org/volunteerthanks2.html

    But no matter what device or screen size I test this on, I keep getting the large image served to me. I would love any assistance in understanding what I'm doing incorrectly.

    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    482
    Thanks
    0
    Thanked 61 Times in 57 Posts

  3. The Following User Says Thank You to styxlawyer For This Useful Post:

    dmwhipp (03-06-2018)

  4. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,227
    Thanks
    1
    Thanked 236 Times in 231 Posts

    Default

    HI there dmwhipp,

    personally, I would not bother with three images.

    Instead, I would compress the larger one, without
    any loss of quality, and just use that.

    Check out the attachment to see an example.


    coothead
    Attached Files Attached Files
    ~ the original bald headed old fart ~

  5. The Following User Says Thank You to coothead For This Useful Post:

    dmwhipp (03-06-2018)

  6. #4
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    Thanks - it did help a bit. I think I really need to look into this more when not under pressure, but I'm using that page as a guideline for pages I create with full-width images. Thanks again!
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  7. #5
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Thank you coothead - I've found some online compressors, but am trying to be forward thinking and figure out the srcset code. Of course, with the way my life works since I'm going with the img srcset route it will be obsolete by this time next year. Thanks again!
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

Similar Threads

  1. responsive image with a div as background
    By jonnyfreak in forum CSS
    Replies: 7
    Last Post: 06-24-2016, 01:28 PM
  2. Responsive landscape image
    By theremotedr in forum CSS
    Replies: 4
    Last Post: 03-03-2016, 08:19 PM
  3. Image Trail Script Responsive Image
    By jundo12 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-20-2016, 12:47 AM
  4. Replies: 5
    Last Post: 01-14-2015, 10:26 AM
  5. responsive image grid?
    By mlegg in forum CSS
    Replies: 8
    Last Post: 09-24-2014, 04:57 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •