CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queries
zbiber
zbiber

Reputation: 143

media queries / loading different image depending on screen size

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!

Upvotes: 4

Views: 7153

Answers (3)

scipilot
scipilot

Reputation: 7447

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.

Upvotes: 2

Ivan Ferrer Villa
Ivan Ferrer Villa

Reputation: 2158

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.

Upvotes: 2

Rolchau
Rolchau

Reputation: 114

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

Upvotes: 3

Related Questions