WDD 131 – Dynamic Web Fundamentals

Image Placeholders

Overview

A placeholder in web design is a space that is intentionally left blank to provide a visual cue to the user that additional content will be placed there. Image placeholders are used to reserve space for images that have not been loaded yet or to provide a representation of a missing image that is still being developed or acquired.

Application

These example image placeholder services are free to use and do not require an account to generate an image placeholder. The basic application is to use the provided URL services to generate a random image placeholder based upon desired dimensions in pixels (width/height).

picsum.photos

Website: picsum.photos

<img src="//picsum.photos/200/300/">

Temporary Image Placeholder 200px width by 300px height
picsum Placeholder
Temporary Image Placeholder 200px width by 300px height
picsum Placeholder with grayscale parameter

placehold.co

Website: placehold.co

<img src="https://placehold.co/900x300?text=Hero+Image&font=Montserrat">
Hero Image Placeholder 900x300
Hero Image Placeholder 900x300

loremflickr.com

Website: loremflickr.com

<img src="https://loremflickr.com/460/230/paris">

Flickr Placeholder 320x240
Flickr Placeholder 460x230