Skip to main content

Dealing with low resolution images on the web

Posted: 19 Apr 2020. Updated: 03 Jun 2020

I've recently migrated content from my old Tumblr blog and inherited a bunch of small images without easy access to the originals.

Image for Gallery with pictures

A little 400px problem

I've recently migrated content from my old Tumblr blog. Migrating the text content was painless, but the real problem was being left with images that had been automatically resized to 400px in width, without easy access to the originals.

What's a web designer suppose to-do with 400 pixels I hear you say.

Making the most of what you have

TV programmes that feature user submitted content filmed at strange aspect ratios, center the original content on screen, whilst blurring and scaling another version in the background to fill any remaining space.

With this idea in mind, I set out to replicate this effect for my old travel notes.

<div class="c-block c-block--smallimage">
<div style="background-image: url([email protected]);"></div>
            <img src="[email protected]" srcset="[email protected] 2x" height="267" width="400" alt="Small image">
  • Line 2: Contains the blurred background. It will be positioned absolute to .c-block--smallimage on Line 1
  • Line 3: The figure element will be positioned relative, so it sits on top of the blurred background div
  • Line 5: Contains an img element with the original 400px image and a scaled up version for retina devices
.c-block--smallimage {
    position: relative;
    overflow: hidden;

.c-block--smallimage > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(10px);
    background-size: cover;
    background-position: 50%; 

.c-block--smallimage figure {
    position: relative;

.c-block--smallimage picture {
    text-align: center;
    display: block;
    line-height: 0;

.c-block--smallimage img {
    max-width: 100%;
    height: auto;
  • Line 1: Overflow hidden helps contain the blur to the box - it keeps all the edges clean and crisp
  • Line 2: Filter is used to blur the background. Background-size and background-position are set to cover and center the image within the box
  • Line 17: Position relative positions the image on top of the blurred background
  • Line 27: Max-width displays the image no larger than the original 400px width, but allows the image to go smaller if required

The end result

Image for Varanasi
In this example, the image is aligned to the left to suit my site design

You can see more of this technique used in my travel notes.

Read this next

Welcome back

What better way to break my 10 year silence than to mark a special milestone.

  1. Home
  2. Notes
  3. Dealing with low resolution images on the web
Illustration of Jon Leverrier

Ready to discuss your next project?