{"type":"rich","version":"1.0","provider_name":"phorkie","provider_url":"https:\/\/p.cweiske.de\/","title":"HTML: responsive images with srcset and sizes","author_name":"Christian Weiske","cache_age":86400,"width":900,"height":900,"html":"<!-- embedding all files of https:\/\/p.cweiske.de\/925 -->\n<link rel=\"stylesheet\" href=\"https:\/\/p.cweiske.de\/css\/embed.css\"\/>\n<div class=\"phork\" id=\"925\">\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1024x768.png\" alt=\"1024x768.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1024x768.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#1024x768.png\">1024x768.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1280x960.png\" alt=\"1280x960.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1280x960.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#1280x960.png\">1280x960.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1400x1050.png\" alt=\"1400x1050.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1400x1050.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#1400x1050.png\">1400x1050.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1600x1200.png\" alt=\"1600x1200.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/1600x1200.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#1600x1200.png\">1600x1200.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/3200x2400.png\" alt=\"3200x2400.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/3200x2400.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#3200x2400.png\">3200x2400.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/320x240.png\" alt=\"320x240.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/320x240.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#320x240.png\">320x240.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/640x480.png\" alt=\"640x480.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/640x480.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#640x480.png\">640x480.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <div class=\"image\"><img src=\"925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/800x600.png\" alt=\"800x600.png\"\/><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/800x600.png\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#800x600.png\">800x600.png<\/a>\n <\/div>\n<\/div>\n    <div class=\"phork-file\">\n <div class=\"phork-content\">\n  <style type=\"text\/css\">\/**\n * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2014 Benny Baumann\n * (http:\/\/qbnz.com\/highlighter\/ and http:\/\/geshi.org\/)\n *\/\n.xml .de1, .xml .de2 {font: normal normal 1em\/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}\n.xml  {font-family:monospace;}\n.xml .imp {font-weight: bold; color: red;}\n.xml li, .xml .li1 {color: #DDD;}\n.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}\n.xml .es0 {color: #000099; font-weight: bold;}\n.xml .br0 {color: #66cc66;}\n.xml .sy0 {color: #66cc66;}\n.xml .st0 {color: #ff0000;}\n.xml .sc-1 {color: #808080; font-style: italic;}\n.xml .sc0 {color: #00bbdd;}\n.xml .sc1 {color: #ddbb00;}\n.xml .sc2 {color: #339933;}\n.xml .sc3 {color: #009900;}\n.xml .re0 {color: #000066;}\n.xml .re1 {color: #000000; font-weight: bold;}\n.xml .re2 {color: #000000; font-weight: bold;}\n.xml span.xtra { display:block; }\n<\/style><div class=\"code\"><table class=\"xml\"><tbody><tr class=\"li1\"><td class=\"ln\"><pre class=\"de1\">1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50\n51\n52\n53\n54\n55\n56\n57\n58\n59\n60\n61\n62\n63\n64\n65\n66\n67\n68\n69\n70\n71\n72\n73\n74\n75\n76\n<\/pre><\/td><td class=\"de1\"><pre class=\"de1\"><span class=\"sc0\">&lt;!DOCTYPE html&gt;<\/span>\n<span class=\"sc3\"><span class=\"re1\">&lt;html<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;head<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;title<span class=\"re2\">&gt;<\/span><\/span><\/span>Responsive image test<span class=\"sc3\"><span class=\"re1\">&lt;\/title<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;meta<\/span> <span class=\"re0\">name<\/span>=<span class=\"st0\">&quot;viewport&quot;<\/span> <span class=\"re0\">content<\/span>=<span class=\"st0\">&quot;width=device-width, initial-scale=1&quot;<\/span><span class=\"re2\">\/&gt;<\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;style<\/span> <span class=\"re0\">type<\/span>=<span class=\"st0\">&quot;text\/css&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160; &#160;img {\n&#160; &#160; &#160; &#160;width: 100%;\n&#160; &#160; &#160; &#160;height: 200px;\n&#160; &#160; &#160; &#160;object-fit: cover;\n&#160; &#160;}\n&#160; &#160;div.c5050 {\n&#160; &#160; &#160; &#160;background-color: #EEE;\n&#160; &#160; &#160; &#160;display: flex;\n&#160; &#160;}\n&#160; &#160;div.c5050 &gt; div {\n&#160; &#160; &#160; &#160;flex: 1 1 0;\n&#160; &#160;}\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;\/style<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/head<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;body<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;h1<span class=\"re2\">&gt;<\/span><\/span><\/span>Full width<span class=\"sc3\"><span class=\"re1\">&lt;\/h1<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;img<\/span> <span class=\"re0\">alt<\/span>=<span class=\"st0\">&quot;full width&quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; <span class=\"re0\">src<\/span>=<span class=\"st0\">&quot;3200x2400.png&quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; <span class=\"re0\">srcset<\/span>=<span class=\"st0\">&quot;320x240.png 320w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 640x480.png 640w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 800x600.png 800w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1024x768.png 1024w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1280x960.png 1280w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1400x1050.png 1440w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1600x1200.png 1600w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; 3200x2400.png 3200w<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; <span class=\"re0\">sizes<\/span>=<span class=\"st0\">&quot;(max-width: 320px) 320px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 640px) 640px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 800px) 800px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1024px) 1024px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1280px) 1280px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1400px) 1440px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1600px) 1600px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;3200px<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160;&quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; <span class=\"re2\">\/&gt;<\/span><\/span>\n&#160;\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;h1<span class=\"re2\">&gt;<\/span><\/span><\/span>50:50 container<span class=\"sc3\"><span class=\"re1\">&lt;\/h1<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;div<\/span> <span class=\"re0\">class<\/span>=<span class=\"st0\">&quot;c5050&quot;<\/span><span class=\"re2\">&gt;<\/span><\/span>\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; &#160; 50-50-left\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; &#160; <span class=\"sc3\"><span class=\"re1\">&lt;img<\/span> <span class=\"re0\">alt<\/span>=<span class=\"st0\">&quot;full width&quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; &#160; <span class=\"re0\">src<\/span>=<span class=\"st0\">&quot;3200x2400.png&quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; &#160; <span class=\"re0\">srcset<\/span>=<span class=\"st0\">&quot;320x240.png 320w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 640x480.png 640w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 800x600.png 800w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1024x768.png 1024w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1280x960.png 1280w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1400x1050.png 1440w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 1600x1200.png 1600w,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 3200x2400.png 3200w<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; &#160; <span class=\"re0\">sizes<\/span>=<span class=\"st0\">&quot;(max-width: 320px) 320px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 640px) 320px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 800px) 640px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1024px) 640px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1280px) 640px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1400px) 800px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;(max-width: 1600px) 800px,<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;3200px<\/span><\/span>\n<span class=\"sc3\"><span class=\"st0\"> &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;&quot;<\/span><\/span>\n<span class=\"sc3\"> &#160; &#160; &#160; &#160; <span class=\"re2\">\/&gt;<\/span><\/span>\n&#160; &#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160; <span class=\"sc3\"><span class=\"re1\">&lt;\/div<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<span class=\"sc3\"><span class=\"re1\">&lt;\/body<span class=\"re2\">&gt;<\/span><\/span><\/span>\n<span class=\"sc3\"><span class=\"re1\">&lt;\/html<span class=\"re2\">&gt;<\/span><\/span><\/span>\n&#160;<\/pre><\/td><\/tr><\/tbody><\/table><\/div>\n <\/div>\n <div class=\"phork-meta\">\n  <a href=\"https:\/\/p.cweiske.de\/925\/rev-raw\/d5a6a401aec8311a06a44432d4fe65227d2d53df\/responsive-test.htm\" style=\"float: right\">view raw source<\/a>\n  <a href=\"https:\/\/p.cweiske.de\/925#responsive-test.htm\">responsive-test.htm<\/a>\n <\/div>\n<\/div>\n<\/div>\n"}
