When you are writing a page – either an actual page or a test page – it is handy to have images of the correct size already available. Suppose, however, that you don’t have a suitable picture but you just want to see how the layout will work.

placeholder.com

The free website placeholder.com allows you to generate arbitrary sized placeholder images anywhere you like. This paragraph has a small image generated on the fly from the site.

Whenever an image is added in the Gutegberg editor, you are likely to be given options for the source. One of those options is to provide an URL.

The image in this section was generated with the URL
https://via.placeholder.com/120x80.png.
It should be pretty obvious just from that example how you can generate any image you like.

Gallery blocks don’t really work with placeholders because they cannot determine the size of the image before loading it.

Here are a couple of other examples:


Picture Placeholders from Lorem Picsum

For prettier placeholders

These kinds of placeholders are useful because it is clear that the image is a placeholder and it is clear how big it is. Sometimes though, you might want an actual picture. So long as you don’t care exactly what the picture is, you can use another service called lorem picsum. This site will serve out randomized photos in sizes you specify. For example the following photo was generated from the URL https://picsum.photos/400/300. Since the image is served from the lorem picsum server, you will get a different image every time the page is refreshed.

You can view the entire lorem picsum image set here: https://picsum.photos/images. If you want to be sure of getting a specific imahe, include its ID in the URL like this: https://picsum.photos/id/1015/600/400 which should be a scenic view of a river.


Replace your Placeholder

Choose an actual image using a keyword search

Another option is to use a plugin installed on this site and grab an image from pexels. First, create your image and make is a placeholder. Then select the image and choose ‘replace’ from the block menu. You should see an option there to get an image from pexels. In the windows that opens up, type a search term, hit enter and choose your image. these are all free images and have appropriate attribution added to the caption. Note that the image will be copied into the media library and served locally, not from the Pexels server. Once these images are in the media library, then you can use them in galleries.

train with smoke
Photo by Gabriela Palai on Pexels.com
boy in white shirt holding yellow plastic toy
Photo by cottonbro on Pexels.com