DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Discussing alternatives for various sizes of the same image & introducing src property in CSS as an option

Discussing alternatives for various sizes of the same image & introducing src property in CSS as an option

Robert Nyman user avatar by
Robert Nyman
·
May. 31, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
2.24K Views

Join the DZone community and get the full member experience.

Join For Free

Today I was just about to write a blog post about images and serving different sizes depending on the device accessing it. Then the Adaptive images post came up on the public-html@w3.org mailing list. So let’s look at that and add my thoughts.

The problem

When we develop a web site we need to cater to a great amount of varying resolutions, and one major problem is serving images with an appropriate size (i.e. width and height – file size is a discussion for another day). We have CSS3 Media Queries helping us detect available width, like this:

.navigation {
float: left;
width: 300px;
}

.main-content {
float: right;
width: 500px;
}

@media screen and (min-width: 1000px) {
.navigation {
width: 350px;
}

.main-content {
float: right;
width: 650px;
}
}

But there is unfortunately no way to load different images based on this approach.

Suggestions in the mailing list

These are two of the suggestions brought up for doing this in the HTML code, and both seem interesting:

New @srclist attribute point to list of sources

<img src=default.jpg srclist=alternativeSizes alt="Picture of
Unicorn">
<sourcelist id=alternativeSizes>
<source src="big.jpg" media="min-width: 600px" width="600"
height="400">
<source src="small.jpg" media="max-width: 600px" width="320"
height="320">
</sourcelist>

(<sourcelist> could maybe be replaced by another existing element?
<map>? <datalist>? SVG's <switch>?)

New image format that points to alternative resolutions

<img src="image.list" alt="Picture of Unicorn>

image.list:
Content-Type: image/list

URI: big.jpg
media: (min-width: 600px)

URI: small.jpg
media: (max-width: 600px)

Alternative take, src attribute in CSS: Content or presentation?

Looking at the above examples, though (especially the first one), that’s a lot of code that has to be written. The downside of the second one is that it will be listed in a completely separate (and new kind of) file.

This led me to thinking whether various sizes of the same image is really content or presentation? And if it’s regarded as vital content, could we rely on CSS to do it anyway and have alternate text as a sufficient fallback?

My suggestion would be to have a src attribute in CSS, to combine with CSS Media Queries, and this could apply to image elements as well as video, audio and others. Then we would be able to do something like this:

.my-image {
src: url(images/really-small.png);
}

@media screen and (min-width: 1000px) {
.my-image {
src: url(images/decent-size.png);
}
}

Thoughts on this?

Looking at the suggestions in the mailing list with srclist attribute or new image (list) format, or the alternative approach with a src attribute in CSS to combine with CSS Media Queries, what do you think about them?

Pros and cons, what’s your take?

From http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/

CSS Property (programming)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Functional vs. Non-Functional Requirements: The Full Guide, Definitions, and Technical Examples
  • How Database B-Tree Indexing Works
  • Top 7 Automated Testing Trends of 2022
  • Usage of Java Streams and Lambdas in Selenium WebDriver

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo