1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Responsive Images Help

Discussion in 'Web Design & Development' started by howard.a.s, Sep 9, 2018.

Thread Status:
Not open for further replies.
Advertisement
  1. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    490
    The index page of the website I am currently working on has 5 rows of image placers, each containing 4 columns. The individual image placers are of dimensions 270px x 160px. I originally sized my images to match these exact dimensions.

    Using the responsive design checker in Firefox web developer tools, as my page is resized down to around 990px, my 4 columns become 2 columns.

    At 750px my 2 columns become 1 column, with much larger images. It is at this point where my 270px x 160px images are becoming pixelated, as they are scaled up to fill the available window of roughly 750px x 420px.

    In an effort to overcome this problem I sized all of my images to 750px x 420px, which now means that my images remain of good quality even when viewed in the larger dimension viewport.

    The problem with this is that Google Pagespeed now gives my index page (which only needs the 270px x 160px images) a very low speed result which can only be resolved by again replacing my 750px images with the 270px.

    I have been reading that there is a way to present different sized images depending on the viewport, and yet despite experimenting for several hours I am still unable to work out how to do this.

    Please can anyone reading this post explain in very simple terms how I would go about overcoming this problem, or whether I would just be best to stick with my larger images and ignore the Google page speed check altogether, which deep down I know isn't really the right idea!

    This is the markup I am currently using in order to link to an image.

    Code:
    <img class="img-responsive" src="assets/img/main/my_image.jpg" alt="image">
    How would I alter this code in order to serve both my 270px and 750px images and for the browser to choose which one is best to use?

    Any constructive help and advice would be very gratefully received.
     
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,214
    First Name:
    Colin
    Howard,

    Have you optimised your newly resized larger images? If not that will probably help there are several online tools that do this for you like http://webresizer.com/ I would try this first.

    If that doesn't work then take a look at this tutorial as it covers what you asked.
     
  3. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    490
    Hi Colin and thanks for your reply - at 5.10am! Early riser!

    Anyway, yes, I did originally follow the advice of pagespeed insights by downloading the zip file containing all of the images that required optimization, but then discovered that my larger images were being sized down, as well as optimized. Wanting to keep my larger images, I then used TinyJPG.com to optimize them, while retaining the larger dimensions.

    Google shows my page as having optimizations already present, including: no redirects, compression enabled, css minified, javascript minified, above the fold content properly prioritized, fast server response.

    It then goes on to say that I should consider enabling leverage browser caching, although I've had discussions about this in the past and there appears to be pros and cons, so I haven't implemented it. It also suggests I should eliminate render blocking Javascript and CSS in above the fold content, which I have done in so far as seems possible without breaking the functionality of my page. It also suggests I should minify HTML, which I have tried, but which then makes working on my markup so much more tricky because of the entire markup being presented in one single block.

    In all fairness I did try speed testing my page with minified HTML and the difference, according to the speed test, was 77 to 78.

    I'm going to read the tutorial you suggest and see if it makes any more sense to me than previous ones I've read. I'll post back to let you know how I get on! Thanks Colin :)

    BTW. I tried testing the speed of my existing page with larger images by using Pingdom. This gave me a score of 83 and told me my site was responding quickly, compared to Googles pityful 53. I do question whether all of the work involved in potentially going down the route of serving different sized images is really necessary, or whether I'm just spending lots of important time on something not really that necessary?
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,214
    First Name:
    Colin
    Howard

    Given what you have done and the Pingdom results I think I would call it quits at that. I suspect you may be causing yourself a lot of work for not much benefit.

    BTW I am in Europe so in a different timezone to the site :)
     
  5. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    490
    Following your advice, and after optimizing everything else possible, I decided to run with the larger images so as to save more time spent for possibly limited returns. Thanks so much for your help Colin.
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1216303

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice