Placeholder Images for Instant Lorem Ipsum Images

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Richard Kershaw
Richard Kershaw creates websites for webmasters. He's the head honcho at Digital.com, and runs many other sites under the Quality Nonsense umbrella.

Last Updated on August 19, 2020

Welcome to our placeholder image service.

How Does It Work?

Just put your image size after the digital.com URL and you’ll get a placeholder image like this:-

Sample HTML:

<a href=”https://digital.com”><img src=”https://via.digital.com/350×150″></a>

Which Image Formats Work?

Placeholder work with GIF, JPEG, JPG or PNG formats.

Just add an image extension to render the image in the format you want. IT’s optional, and default is GIF.

How Can I Customize the Text

Just add this query string at the end of the URL.

Example:

?text=Hello+World

This is optional, and the default text is the image dimensions. A-Z (upper/lowercase), numbers, and most symbols will work.

NB: Spaces must be represented as a +

https://via.digital.com/300?text=digital.com+rocks!

How Do I Specify the Colors?

Colors are set using hex codes (for example, #ffffff is white)/

Colors must be specified after the placeholder image dimensions

https://via.digital.com/250/ffffff/000000

The first color is background color, and the second is text color.

How Do I Specify Size?

It’s width first, then height.

Height is optional, if no height is specified the image will be a square.

https://via.digital.com/300

NB: Size must be the first element in the url

Why Use Placeholder Images?

As a small business owner handling your own web needs, or a small business webmaster, you may find value in using placeholder images. Web designers find that placeholder images can save time in the early stages of drafting and iterating on designs: they don’t have to find and re-size images from public sources or pay to license images that clients may not want anyway. And they don’t have to waste time trying to find multiple images that produce a coherent visual effect that’s consonant with the brand.

Even if your stakeholders want to see specific images in a draft design, they may not have images ready for you. With placeholder images you can begin working on designs immediately. You simply type in the pixel size of the image that you need and you’re done.

Using Placeholder Images in Wireframes

Placeholder images are commonly used in the most fundamental of design drafts: wireframing. What is wireframing? It’s a rough sketch of a digital product such as a website or app. Wireframes are often clickable and include all pages of a design. They allow for quick iterations on initial ideas. And they’re often monochromatic.

Wireframes commonly adhere to a restricted set of fonts like Arial, use only blue for hyperlinks, and include no logos or actual images. This focuses attention on the big picture elements of design: namely the size, organization, placement, navigation, functionality, and interaction of elements.

As we noted in our explanation of Lorem ipsum dummy text, the use of actual text, real images, logos, and colors immediately distracts stakeholders and clients from the design itself. Web designers we interviewed agree: stakeholders will immediately become fixated on the colors or images you used in the draft design and begin asking questions about them or voicing their conflicting personal preferences. Soon everyone’s focus is on something other than the design itself.

Placeholder images are bland visually, which makes it easier for viewers to focus solely on the design. You can think of wireframing as a architectural floor plan draft: it may show proposed placement, shape and size of rooms, stairways, doors, hallways, and foyers, but not the color, materials, or finish that those will be made of. The floor plan is sufficient for clients to understand how they would navigate through the house and what the functions of the various rooms are. It’s also sufficient to surface top-level design questions, like “Is there a garage? Can we add a garage? What purposes do we need the garage to serve?” Likewise your monochromatic wireframe is sufficient and designed to help the viewer see the top-level features of your design, how they would navigate through it, and what the functions of the various areas are.

We mentioned that wireframes are often monochromatic or use a very restricted palette. Be aware that wireframing software often gives you the option to iterate all the way to final high-fidelity design prototypes.