3

This might be basic but I'm getting lost in all the solutions I've managed to find on the web. I have a running website (www.webstalab.com) based on Twitter Bootstrap 3 but the image used (depicting two statues holding a ball) is quite big in size (around 900kb) therefore loads way too long on slower internet connections. The present photo is 1920 pixels wide, is responsive and it is not a background image. (I couldn't achieve the desired layout with the background image approach).

All I want to do is create 3 different size versions of the same photo (one around 800px wide, one around 1200px wide and keep the original at 1920px wide) and get the browser load the appropriate version of the image depending on what screen size and resolution is used to view the website. I also plan to cut the size of the original (1920 pixels wide) photo a bit so it loads a bit faster.

I suppose CSS3 media queries is the way to go with this? Will media queries also solve the retina display issue? Can anyone suggest a good article covering the basics? I'd prefer a solution without javascript (just in case the user has it switched off). The website is online so you can check the source code.

Thanx all!

zbiber
  • 113
  • 2
  • 9

3 Answers3

3

If you use the img tag for showing the image, then yes, you will need a JS solution.

So if you want to use media queries, you will need to use the images as a background on for example a div tag:

Example with background-image on a div

The example is without retina display handling, but here is an article on handling that: Retina Display Media Queries

Rolchau
  • 94
  • 6
  • Forgot to mention - If you use media queries its important to set the smallest image first, if you don't it will still load the large images on the smaller devices. – Rolchau Jan 29 '14 at 21:07
  • Thanks Rolchau, this helped a lot, will probably look into some JS solution just for the sake of learning/practice. Wanted to upvote your answer but don't have enough reputation... – zbiber Jan 30 '14 at 10:43
  • Just detect the viewport width using jQuery, and bunch of if else loops should help you replace the source. – Thilak Rao Jan 30 '14 at 16:54
3

Note this doesn't help with load speed, see comments.

Bootstrap 3 has some responsive utilities which allow you show/hide elements via media queries.

http://getbootstrap.com/css/#responsive-utilities

e.g. Give an element the class visible-xs and it will only show on XS sized devices.

I've just implemented this in my view, rather than in CSS, as I wanted to use a straight img not a "div with background image"

<div class="navbar-header">
    <a href="/home" class="navbar-left" >
        <img class="logo visible-sm visible-md visible-lg"
             src="/images/logos/logo-trans-96-wht-250x70.png"
             width="250" height="70"
             alt="Home"/>
        <img class="logo visible-xs"
             src="/images/logos/logo-trans-96-wht-200x56.png"
             width="200" height="56"
             alt="Home"/>
        </a>
</div>

It doesn't feel very elegant from a CSS point of view, but this is one of the few times you can't control something from CSS.

It gives you a potentially powerful yet simple technique for responsively swapping entire HTML structures.

scipilot
  • 5,127
  • 1
  • 38
  • 55
  • Note your solution loads all images and displays the appropriate one. Question was how to load only the appropriate one. – tao Apr 21 '19 at 23:12
  • @AndreiGheorghiu that's a good point, this would be a poor solution to load-speed as it would load all variants not just the big one! It might be possible to add display:none to the mechanism and take advantage of browser optimisations noted here: https://stackoverflow.com/a/12158668/209288 – scipilot Apr 23 '19 at 04:16
  • The answer you linked states the same. `src="data:{data-image-here}"` is far from being an optimization (image data is placed in the tag itself), difference being it's part of the markup instead of being placed in a separate file. `src="about:blank"` doesn't, indeed, load anything - but you need your own JavaScript to replace `about:blank` with the proper URL when the image should be loaded - or otherwise it remains a dead tag, not displaying anything. What browser optimizations are we talking about? – tao Apr 23 '19 at 05:02
  • The point being: CSS is not capable of loading sources based on media queries, and that's by design (because media queries can change fast - i.e.: a simple rotation of your device). Currently, the only way to do it is using `srcset` attribute. – tao Apr 23 '19 at 05:07
2

As long as cookies are sent with all image requests, you can redirect to low res images using rewrite rules in .htaccess file depending on the value of a cookie set at the very beginning of the page load using JavaScript.
index.html:

<head>
(...)
        <script type="text/javascript">           
            document.cookie = "res=" + (screen.width <= 700 ? "low" : "high");
        </script>
<!--styles-->
(...)
<head>

.htaccess in /images folder:

RewriteEngine on
#if cookie res=low exist, redirect to low/ folder
RewriteCond %{HTTP_COOKIE} res=low
RewriteRule ^(.+)$ low/$1

#if low/ image does not exist, use default (hi res)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^low/(.+)$ $1 [END]

I don't know about possible performance hit. Just trying it right now.

Ivan Ferrer Villa
  • 1,960
  • 1
  • 24
  • 21