How to achieve dotted grid image rasterization (responsive image alternative technique)?
I’ve stumbled over an interesting technique as an alternative to the classical way of providing different image files for different breakpoints, as seen on this page
What they do is basically use the same masthead image of size 1024×1024 for all screen sizes / breakpoints. When the screen size is >= 768 px that image is then overlaid with a grid of black dots, which reminds one of the way pixels are arranged on tube monitors/TVs. This way the image can be stretched far beyond 1024px but still appear sort of sharp, because the black dots overlay any large pixels blocks and JPEG artifacts.
I can’t seem to figure out how this is done on their page with CSS or JS. Is there any CSS or JS framework / plugin that does this out of the box or can anyone help with identifying the styles / code required to achieve this effect?
To overlay an <img> with some other image (or text, for that matter) the general approach would be:
img { position: relative; /* make child elements move relative to this parent */ width: 100%; object-fit: cover; } img::before { position: absolute; /* move this element absolute within parent */ content: ''; /* needed as an empty :before will not get painted */ top: 0; left: 0; background-image: "image-URL"; ... additional background behaviour properties ... opacity: 0.25; /* some low value for tranparency */ /* either */ width : 100%; height: 100%; /* or */ right: 0; bottom: 0; } It may be advisable to use either a PNG with alpha channel (for transparent pixels) or an SVG with some pattern (smaller in size, more accurate pixel painting/scaling when rezing the page, ‘crispier’).
