content: Optimize CSS Background Images with Media Queries

[demianrenzulli]

A one to two sentence description of your post

• Guide: How to apply CSS media queries to request a background image for the user's device.
• Codelab: Using Webpack’s media query plugin, to extract each media query definition to its own CSS file. Loading the resulting CSS files with HTML media attribute and dynamic imports.

Target publish date: 2019-08-xx

• Check this box if this is a hard deadline.

Process
Make a copy of this template
and fill in the proposal and outline sections. When you're finished, drop a link
to the doc in the 1st step below and check the box. A member of the web.dev team
will assign this ticket to themselves and work as your reviewer to help you
complete the remaining steps.

• 1. I've done my proposal https://docs.google.com/document/d/1XuQegHCNCJnvEBkcqDFzYfwZq4ZRBUNpUwDz_0ySiws/edit?usp=sharing
• 2. Proposal approved — reviewer checks this
• 3. I've added a draft to my proposal doc
• 4. Draft approved — reviewer checks this
• 5. I've submitted a pull request #<add PR number>
• 6. Pull request approved — reviewer checks this

[demianrenzulli]

The article and codelab have been written already (in doc format), and is currently awaiting review.

[mfriesenhahn]

Hi, Demian, can you include the content from the "Propose New Content" issue template so we can move this through our review process more easily? Link: https://github.com/GoogleChrome/web.dev/issues/new?assignees=&labels=content+proposal&template=content_proposal.md&title=content%3A+%3CAdd+your+title%3E

(No need to fill out a proposal, of course, since you've already worked this through with @robdodson.)

[demianrenzulli]

Hi @mfriesenhahn, adding the content here.
Let me know if there's need for a separate issue:

A one to two sentence description of your post

- Guide: How to apply CSS media queries to request a background image for the user's device.
- Codelab: Using Webpack’s media query plugin, to extract each media query definition to its own CSS file. Loading the resulting CSS files with HTML media attribute and dynamic imports.

Target publish date: <2019-08-XX>

• Check this box if this is a hard deadline.

Process

• 1. I've done my proposal.
• 2. Proposal approved.
• 3. I've added a draft to my proposal doc
• 4. Draft approved — https://docs.google.com/document/d/1XuQegHCNCJnvEBkcqDFzYfwZq4ZRBUNpUwDz_0ySiws/edit?usp=sharing
• 5. I've submitted a pull request #<add PR number>
• 6. Pull request approved — reviewer checks this

cc @robdodson

[mfriesenhahn]

I think it needs to be in the body of the issue for the bot to work, so I'll just add it. Thanks!

[robdodson]

Hey folks, checking in. @demianrenzulli are you still planning to write this post? Is there anything blocking you?

[demianrenzulli]

Hi @robdodson! Thanks a lot for reaching out.

I think this topic was de-prioritized in favor of other ones that needed to be addressed more promptly at the moment (for example, the Link prefetch guide we released a couple of months ago).

While the draft of the article and codelab are ready, I would love to count with the feedback from some CSS experts to make sure we still want to follow the approaches outlined there.

Would be possible to work with @argyleink, for example, on this?
I'd be happy to re-do the article, if necessary.

What do you guys think?

[argyleink]

just re-read a couple times, seems good to me! The approach is stable, focused and articulated. I'd like to do another review when staged so the markdown is expanded, but otherwise I give it a thumbs up 👍

Was there anything in particular that you wanted me to check out?

[demianrenzulli]

Thanks a lot @argyleink for taking a look at it! Sorry I didn't provide more details before, here are some things I wanted double-check:

• If we should use image-set instead of @media. I guess nothing has changed since last time, and the paragraph I added at the end is the best we can suggest at this point.
• For the codelab part, If we should continue using media-query-plugin to split the CSS into different files, or if you know any other tool. I guess this one is tricky, as it took some time for us to decide. Assuming this is fine as it is also!

@robdodson I think we are good to go, should I move this to markup now so Adam can take a final look at it?

[demianrenzulli]

Hi @kaycebasques: this is an article that was submitted some months ago, as part of the "Optimize CSS" series of web.dev/fast and we decided to put it on hold because there were other higher priority guides.

@robdodson brought it to our attention this week, and we thought this could be a good time to move it to markdown. You can take a look at the previous comments in this thread for more context.

PS: since this was written before the content guidelines came out, I might need to give another pass to make sure it's aligned. with them if we decide to move to coding.

[kaycebasques]

@demianrenzulli please give me edit access to the draft.