How to create an image placeholder?

[nelsonic]

In a project we are currently working on, people can upload images of content when one is available.
We want to display a "placeholder" image to signal to users that there is currently no image available,
and to remind the content owner that there is a "gap" that needs to be filled.

Todo

• Create a basic image placeholder from scratch in a freely available drawing program
• Export the placeholder image as an image file (e.g: .jpg, .png or .gif)
• Upload the image to GitHub (so we use Microsoft's infinite bandwidth on AWS S3/Cloudfront CDN)
• Display the image on a page centred within a div
• Display the pixel dimensions as a reminder to the content owner what the ideal dimensions for the image are.
• Document and explain how it works to other people!

Background / Context

We have been using this image in our project:
http://www.camera-m.com/img/placeholder-image-wide.png

The image is insecure. (served over HTTP not HTTPS) which prompted us opening this issue.

Research

A Google Image Search for "image placeholder" returns many similar results:
https://www.google.com/search?tbm=isch&q=image+placeholder

This type of generic image on a grey background appears to be the consensus for "image placeholder".

[nelsonic]

I made a slightly modified version of the placeholder image in dwaw.io in (less than) 2 minutes:
https://drive.google.com/file/d/1gOdr5EXzodSFRNU_7BLCgckPrghUGkx4

[nelsonic]

Exported form Draw.io the .png is 3KB:

The original used is 5KB:

So in 5 minutes I've saved 40% bandwidth for the users

[nelsonic]

Draw.io export image:

Wrap the image in a bit hot HTML + Tachyons:

    <div class="center bg-light-gray ba b--gray tc"
      style="width: 800px; height: 300px;">
    <img class="center v-mid pt5"/
     alt="Placeholder Image - Please upload an appropriate one."
     src="https://user-images.githubusercontent.com/194400/49571717-f392d480-f931-11e8-96f2-a8d10cfe375e.png">
      <p class="v-btm fw1">This is a placeholder image. <br />
        Please upload a more relevant one. Ideal dimensions:<br />
        <b class="fw5 pt2">Width: 800 pixels, Height: 300 pixels.</b></p>
    </div>

A versatile/customisable image placeholder we can drop into any project.

Done.