Some Tools to Create Placeholder Images14th April 2018Tooling
When creating websites, the best approach is usually a content first approach. However there are times when you're waiting on imagery and you need to fill out a design with placeholder content to see how it will look. Rather than spending time searching on iStock or Getty there are a few free services you can use for placeholder images.
Placeholder.com allows you to create custom size placeholder images. By adding parameters on the end of the URL we can get different sized images. For example:
<!-- Add a 800x500 image --> <img src="//placehold.it/800x500" alt="placeholder image" />
You can also change the colours and text just by adding more modifiers to the URL:
<!-- Add colours (background/text) --> <img src="//placehold.it/800x500/0084b4/fff" alt="Twitter placeholder graphic" /> <!-- Add text --> <img src="//placehold.it/800x500/0084b4/fff&text=Twitter+Graphic" alt="Twitter placeholder graphic" />
Unsplash It allows you to use real images which is great for seeing how a page will look when it's populated with real content.
<!-- Add 800x500 image --> <img src="//unsplash.it/800/500" alt="Blog image" />
You can turn the image blurry or greyscale by modifying the URL.
<!-- Blurry image --> <img src="https://unsplash.it/800/500/?blur" alt="Random image" /> <!-- Greyscale image --> <img src="//unsplash.it/g/800/500" alt="Random image" />
You can also use a specific image to keep things consistent through the design process.
<!-- Waves image --> <img src="https://unsplash.it/800/500?image=1041" alt="waves" />
PlaceIMG allows you to choose images from a range of categories such as animals, nature, architecture, people and tech.
<!-- Architectural image --> <img src="//placeimg.com/800/500/arch" alt="architectural image" />
You can also further filter these images by adding a greyscale or sepia filter.
<!-- Nature image with a greyscale filter --> <img src="//placeimg.com/800/500/nature/grayscale" alt="Nature image" /> <!-- Nature image with a sepia filter --> <img src="//placeimg.com/800/500/nature/sepia" alt="Nature image" />
So the next time you need a quick filler image for a design you'll know where to go.