WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Graphics & Multimedia > Questions on image resize

Reply
  Thread Tools Display Modes
Old 20th January 14, 11:31 AM   #1
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 81
Default 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.

http://24ways.org/2011/adaptive-imag...nsive-designs/
(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)

http://www.w3.org/community/respimg/...ns-compromise/

http://coding.smashingmagazine.com/2...ve-web-design/

Last edited by hmds; 20th January 14 at 11:53 AM.
hmds is offline   Reply With Quote
Old 20th January 14, 11:52 AM   #2
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default 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.
ronaldroe is offline   Reply With Quote
Old 20th January 14, 11:55 AM   #3
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 81
Default 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.
hmds is offline   Reply With Quote
Old 20th January 14, 12:01 PM   #4
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default 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.
ronaldroe is offline   Reply With Quote
Old 20th January 14, 02:11 PM   #5
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default 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...

Code:
<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. -->
        <noscript>
            <img src="images/medium.jpg" alt="ALT GOES HERE" />
        </noscript>
    </span>

</div>
Phreaddee is offline   Reply With Quote
Old 20th January 14, 06:27 PM   #6
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 81
Default Re: Questions on image resize

Thank you

I prefer to try to stay away from java script only because some people turn it off
hmds is offline   Reply With Quote
Old 20th January 14, 08:41 PM   #7
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: Questions on image resize

Quote:
Originally Posted by hmds View Post
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.
ronaldroe is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:27 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.