WeLoveCSS (http://welovecss.com/index.php)
-   Graphics & Multimedia (http://welovecss.com/forumdisplay.php?f=21)
-   -   Questions on image resize (http://welovecss.com/showthread.php?t=9101)

hmds 20th January 14 12:31 PM

Questions on image resize
I am not sure if this belongs here, or html or css.

I am looking to create a responsive website. It is my first serious attempt to create a responsive site.

I know that images can be resized with html or css, but what I want to know is it possible to replace images based on screen width with another image but with a smaller file size. The reason for this is I want to create a fast loading webpage for mobile. Using a image designed for a full screen application is much larger than one for the mobile.

I used to program all the time in the old html and css but I have stopped for about 3 years. The new HTML 5 and CSS 3 is a little foreign to me and I do not know it as well.

Doing a google search I found these references but they are dated more than 6-8 months ago and wince the web technology is always changing I am not sure if there is a better option out there yet.

(this one seems to have to use an extra program or set of commands installed on the server. not sure how I feel about that)



ronaldroe 20th January 14 12:52 PM

Re: Questions on image resize
There is,but there isn't, but there will be.

There is, because if you load the image as a background or as content within a pseudo-element, you can swap it out with media queries.

There isn't a built-in way to swap out content images loaded with the <img> tag.

There will be soon, as the W3C recently made the <picture> element a recommendation, so it will be arriving in Webkit/Blink soon, and it's already arrived in FF's nightly builds.

Alternatively, you could use javascript to grab viewport width and set image sources, but that could get messy.

hmds 20th January 14 12:55 PM

Re: Questions on image resize
I edited my post probably during your response.

I did find some interesting articles but I am still not sure how good of a solution they are.

ronaldroe 20th January 14 01:01 PM

Re: Questions on image resize
Well, Mat posted a link to a polyfill in the W3C article. Maybe give that a try?

I wouldn't worry too much about the age of articles on this one, unless they're older than 2012. There was a pretty heated debate on how to handle it.

Phreaddee 20th January 14 03:11 PM

Re: Questions on image resize
if it's for a client to update this isn't the solution, but if you've got the time and the energy to make the multitude of images and use the picturefill.js this works a treat, tested on a stack of devices...


<div id="container">
<span data-picture data-alt="ALT GOES HERE">
        <span data-src="images/small.png"></span>
        <span data-src="images/smallx2.png"      data-media="(-webkit-min-device-pixel-ratio: 2.0)"></span>
        <span data-src="images/smallx3.png"      data-media="(-webkit-min-device-pixel-ratio: 3.0)"></span>
        <span data-src="images/medium.png"        data-media="(min-width: 640px)"></span>
        <span data-src="images/mediumx2.png"    data-media="(min-width: 640px) and (-webkit-min-device-pixel-ratio: 2.0)"></span>
        <span data-src="images/large.png"        data-media="(min-width: 960px)"></span>
        <span data-src="images/largex2.png"      data-media="(min-width: 960px) and (-webkit-min-device-pixel-ratio: 2.0)"></span>
        <span data-src="images/extra-large.png"    data-media="(min-width: 1280px)"></span>
        <span data-src="images/extra-largex2.png" data-media="(min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2.0)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <img src="images/medium.jpg" alt="ALT GOES HERE" />


hmds 20th January 14 07:27 PM

Re: Questions on image resize
Thank you

I prefer to try to stay away from java script only because some people turn it off

ronaldroe 20th January 14 09:41 PM

Re: Questions on image resize

Originally Posted by hmds (Post 37928)
Thank you

I prefer to try to stay away from java script only because some people turn it off

That's an edge case. Less than 1% turn off JS, and they'll still get the normal-size image, which won't break the layout, it might just load slowly.

All times are GMT. The time now is 10:05 AM.

Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.