Images for old browsers - Post ID 239432
Does anyone apply the new <img srcset=""> code?
Hey Matt,
I have never used this code before because there is not enough support for it across browsers. Here is a graph showing the different browsers and their support level.
http://caniuse.com/#feat=srcset
It is best to handle image size through css. Here is a great source that shows how you would do it not only with images but with any element you want to work with.
http://www.w3schools.com/css/css_dimension.asp
Hope this helps
I have never used this code before because there is not enough support for it across browsers. Here is a graph showing the different browsers and their support level.
http://caniuse.com/#feat=srcset
It is best to handle image size through css. Here is a great source that shows how you would do it not only with images but with any element you want to work with.
http://www.w3schools.com/css/css_dimension.asp
Hope this helps
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
The srcset as far as I know is supposed to deliver different images for different resolutions and screen sizes. As long as the browser support is fairly limited, however, I would use media queries in css.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
It's going to be awhile before the best responsive image option is determined. Check this out:
https://docs.google.com/spreadsheet/ccc … 2OXc#gid=0
If you want some coding practice, you could try this method (besides HTML and CSS, you'll use JS and PHP):
http://www.smashingmagazine.com/2014/02 … ve-images/
(scroll down to Our Solution)
For now, the easiest solution is basic CSS as in Steve's link. Just be aware of your image sizes, be sure to optimize them as much as possible and don't use images that serve no purpose. Also, use an icon font instead of images where possible. For image-heavy pages, you could also use gallery software that handles all the sizing and optimization for you.
https://docs.google.com/spreadsheet/ccc … 2OXc#gid=0
If you want some coding practice, you could try this method (besides HTML and CSS, you'll use JS and PHP):
http://www.smashingmagazine.com/2014/02 … ve-images/
(scroll down to Our Solution)
For now, the easiest solution is basic CSS as in Steve's link. Just be aware of your image sizes, be sure to optimize them as much as possible and don't use images that serve no purpose. Also, use an icon font instead of images where possible. For image-heavy pages, you could also use gallery software that handles all the sizing and optimization for you.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
The site in your first link, Paintrush, was unknown to me. I have bookmarked it.
The fact is, that I have so many bookmarked resources, but hardly any time to check them out.
(tearing hairs out!)
The fact is, that I have so many bookmarked resources, but hardly any time to check them out.

Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
I know, Inger... I save so much stuff. Most of the time I forget I have it bookmarked and end up finding it again online when dealing with the same issue. Probably easier than going through my bookmarks.
I've started saving things in Evernote. It's got me a bit more organized and it can be searched by keywords.
As for all the info/tutorials I've hoarded on resp. images, most of it didn't seem worth bothering with since by the time you decide which method to use (and get all the js and browser work-arounds in place), something else will have replaced it!
I'm waiting to see what finally makes it to the CSS3 candidate level.
For anyone wondering how things end up included in our every-day, common CSS – A brief overview:
http://css-tricks.com/css-standards-process/
I've started saving things in Evernote. It's got me a bit more organized and it can be searched by keywords.

As for all the info/tutorials I've hoarded on resp. images, most of it didn't seem worth bothering with since by the time you decide which method to use (and get all the js and browser work-arounds in place), something else will have replaced it!
I'm waiting to see what finally makes it to the CSS3 candidate level.
For anyone wondering how things end up included in our every-day, common CSS – A brief overview:
http://css-tricks.com/css-standards-process/
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Inger wrote:
The site in your first link, Paintrush, was unknown to me. I have bookmarked it.
The fact is, that I have so many bookmarked resources, but hardly any time to check them out.
(tearing hairs out!)
The site in your first link, Paintrush, was unknown to me. I have bookmarked it.
The fact is, that I have so many bookmarked resources, but hardly any time to check them out.

Kind of like the collector that know every thing they have but has only seen everything they have probably one time.

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.