Images for old browsers

User 2924428 Photo


Registered User
1,718 posts

Does anyone apply the new <img srcset=""> code?
User 2088758 Photo


Senior Advisor
3,086 posts

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
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

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


User 271657 Photo


Ambassador
3,816 posts

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.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

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. :o (tearing hairs 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


User 271657 Photo


Ambassador
3,816 posts

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 love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

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. :o (tearing hairs out!)

Kind of like the collector that know every thing they have but has only seen everything they have probably one time.:lol:
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

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.