#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    774
    Rep Power
    42

    do I need to swap out images or do media queries for the images


    I have a site and was wondering if I need to do media queries or swap out the big images to fit on smaller devices.

    The site is really small right now, so you can see the big images here:Bullet Hats

    I have the row for the image as such:
    Code:
                  	<div class="col-md-12 col-sm-12 col-xs-12">
    
                  <img src="images/-white-straw-hat-w-bow/layout.jpg" alt="">
    IDK?

    Thanks!
    ~Sean
    Last edited by lelales; April 8th, 2018 at 08:32 PM.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Somerville, MA
    Posts
    51
    Rep Power
    72
    What you are looking for is
    Code:
    srscet
    here is a basic example that lets the browser decide what image to serve based on some sizes and and an array of options srcset. You should add your media queries in the sizes attribute.
    here is a basic example:

    Code:
    <img srcset="https://paulkinchla.com/wp-content/uploads/2016/09/home-2-2000x0-c-default.jpg 2000w, https://paulkinchla.com/wp-content/uploads/2016/09/home-2-1200x0-c-default.jpg 1200w, https://paulkinchla.com/wp-content/uploads/2016/09/home-2-600x0-c-default.jpg 600w, https://paulkinchla.com/wp-content/uploads/2016/09/home-2-300x0-c-default.jpg 300w, https://paulkinchla.com/wp-content/uploads/2016/09/home-2-150x0-c-default.jpg 150w" src="https://paulkinchla.com/wp-content/uploads/2016/09/home-2.jpg" sizes="(min-width:120em) 62vw, (min-width:64em) 72vw, (min-width:40em) 57vw, 100vw" alt="Troy">
    here is a link to the specs and documentation for responsive images: Grid system demo
    Web Developer/Designer here

IMN logo majestic logo threadwatch logo seochat tools logo