René's URL Explorer Experiment


Title: Responsive images  |  Articles  |  web.dev

Open Graph Title: Responsive images  |  Articles  |  web.dev

Description: A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes. With responsive web design not only can our layouts change based on device characteristics, but images as well.

Open Graph Description: A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes. With responsive web design not only can our layouts change based on device characteristics, but images as well.

Opengraph URL: https://web.dev/articles/responsive-images

direct link

Domain: web.dev


Hey, it has json ld scripts:
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "dateModified": "2014-04-29",
    "headline": "Responsive images"
  }
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [{
      "@type": "ListItem",
      "position": 1,
      "name": "Articles",
      "item": "https://web.dev/articles"
    },{
      "@type": "ListItem",
      "position": 2,
      "name": "Responsive images",
      "item": "https://web.dev/articles/responsive-images"
    }]
  }
  

google-signin-client-id157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com
google-signin-scopeprofile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award https://www.googleapis.com/auth/devprofiles.full_control.firstparty
og:site_nameweb.dev
og:typewebsite
theme-color#3740ff
NoneIE=Edge
og:localeen

Links:

Skip to main content https://web.dev/articles/responsive-images#main-content
https://web.dev/
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Patterns https://web.dev/patterns
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
Articles https://web.dev/articles
https://web.dev/
Discover https://web.dev/discover
Baseline https://web.dev/baseline
How to use Baseline https://web.dev/how-to-use-baseline
Blog https://web.dev/blog
Case Studies https://web.dev/case-studies
HTML https://web.dev/html
CSS https://web.dev/css
JavaScript https://web.dev/javascript
Performance https://web.dev/performance
Accessibility https://web.dev/accessibility
Identity https://web.dev/identity
Learn HTML https://web.dev/learn/html
Learn CSS https://web.dev/learn/css
Learn JavaScript https://web.dev/learn/javascript
Learn AI https://web.dev/learn/ai
Learn Performance https://web.dev/learn/performance
Learn Accessibility https://web.dev/learn/accessibility
More courses https://web.dev/learn
AI and the web https://web.dev/explore/ai
Explore https://web.dev/explore
PageSpeed Insights https://pagespeed.web.dev/
Patterns https://web.dev/patterns
Podcasts & shows https://web.dev/shows
Developer Newsletter https://web.dev/newsletter
About web.dev https://web.dev/about
Home https://web.dev/
Articles https://web.dev/articles
X https://twitter.com/petele
GitHub https://github.com/petele
Mastodon https://techhub.social/@petele
Homepage https://petelepage.com/
responsiveimages.org/demos/https://responsiveimages.org/demos/
https://www.udacity.com/course/responsive-images--ud882
Udacityhttps://www.udacity.com
Take Coursehttps://www.udacity.com/course/responsive-images--ud882
CSS functionhttps://web.dev/articles/responsive-images#use_image-set_to_provide_high_res_images
Picturefill polyfillhttps://scottjehl.github.io/picturefill/
ResponsiveImages.orghttp://responsiveimages.org/#implementation
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/media.html
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/sizes.html
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/breakpoints.html
study participantshttps://developers.google.com/web/fundamentals/getting-started/principles/#make-product-images-expandable
compressive image techniquehttp://www.html5rocks.com/en/mobile/high-dpi/#toc-tech-overview
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/compressive.html
great supporthttp://caniuse.com/svg-html5
optimization toolshttps://sarasoueidan.com/blog/svgo-tools/
jpillora.com/base64-encoderhttps://jpillora.com/base64-encoder
well supportedhttp://caniuse.com/datauri
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/conditional-mq.html
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/image-set.html
device pixel ratiohttp://www.html5rocks.com/en/mobile/high-dpi/#toc-bg
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/media-query-dppx.html
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/icon-svg.html
Example of a page that uses FontAwesome for its font icons. https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/icon-font.html
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/icon-font.html
Font Awesomehttps://fortawesome.github.io/Font-Awesome/
Pictoshttp://pictos.cc/
Glyphiconshttps://glyphicons.com/
vector imageshttps://en.wikipedia.org/wiki/Vector_graphics
raster imageshttps://en.wikipedia.org/wiki/Raster_graphics
SVGhttps://css-tricks.com/using-svg/
jpegtranhttp://jpegclub.org/
jpegoptimhttp://freshmeat.net/projects/jpegoptim/
OptiPNGhttp://optipng.sourceforge.net/
PNGOUThttp://www.advsys.net/ken/util/pngout.htm
Try ithttps://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/image-sprite.html
Creative Commons Attribution 4.0 Licensehttps://creativecommons.org/licenses/by/4.0/
Apache 2.0 Licensehttps://www.apache.org/licenses/LICENSE-2.0
Google Developers Site Policieshttps://developers.google.com/site-policies
File a bug https://issuetracker.google.com/issues/new?component=1400680&template=1857359
See open issues https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc
Chrome for Developers https://developer.chrome.com/
Chromium updates https://blog.chromium.org/
Case studies https://web.dev/case-studies
Podcasts & shows https://web.dev/shows
@ChromiumDev on X https://twitter.com/ChromiumDev
YouTube https://www.youtube.com/user/ChromeDevelopers
Chrome for Developers on LinkedIn https://www.linkedin.com/showcase/chrome-for-developers
RSS https://web.dev/static/blog/feed.xml
Terms https://policies.google.com/terms
Privacy https://policies.google.com/privacy
Manage cookies https://web.dev/articles/responsive-images

Viewport: width=device-width, initial-scale=1


URLs of crawlers that visited me.