Web Design tricks and tips — Part 1: Media Placeholders
Web Layout creation is a slow and tedious process, as a part time web designer I like to streamline this process as much as possible, I will be creating a number of articles on tricks, tips and hacks to show you how to design websites at the speed of a pro.
In this article I will be covering media placeholders, it can be time consuming to jump into photoshop and create an image of set dimensions, drop it in your development environment and insert it into your webpage. Never-mind trying to source a video of the exact dimensions and length.
Fortunately there are free Web Applications to do all of this for you, below you can find a list of the top 5 with examples.
Number 5
Placeholder.com is fairly featured, it allows the creation of images on the fly with text, various dimensions, background colours and formats.
Using placeholder.com is simple, generate a 150x150px image using:
https://via.placeholder.com/150
or a 100x200px image using https://via.placeholder.com/100x200.png
This can be put in an img tag and embedded directly onto your webpage:
<img src=”https://via.placeholder.com/100x200.png">
There are many more features of placeholder.com which can be found on their webpage.
Number 4
Temp.media has considerably less image features compared to most other placeholder webpages however it is the only placeholder website to support videos.
Creating an image is just as simple as other sites, this will create a 100x100px image:
https://temp.media/?height=100
or a 100x150px image:
https://temp.media/?height=100&width=150
Embedding this into HTML is also easy:
Get James Dawson’s stories in your inbox
Join Medium for free to get updates from this writer.
<img src=”https://temp.media/?height=100&width=150”>
Creating Videos
Creating a video with temp.media is almost as straight forward as creating an image. A 10 second 150x150px video can be created as follows:
https://temp.media/video/create/?height=150&width=150&length=10&load=yes
This can be embedded into HTML just as easily as a image:
<video width=”1024" height=”768" controls> <source src=”https://temp.media/video/create/?height=150&width
=150&length=10&load=yes” type=”video/mp4"> </video>
Number 3
placeimg.com offers the same URL/API examples as above but I’m not going to go into details on this, they also have a nice frontend. No Blank images here! You can get actual photos from various categories in any dimension.
Number 2
Much like the above this one has a useful frontend and the same style API/URL examples. It does just about anything you could need an image placeholder website to do. This site also uses real photos that can be made in almost any dimension.
Number 1
picsum.photos has a massive feature set, its pretty much the same as the others on this list in terms of use:
Create a 200x300px photo
Use a random image:
https://picsum.photos/200/300?random
make it greyscale:
https://picsum.photos/g/200/300?random
Seriously, this is a powerful tool. It does everything you need a placeholder image site to do! I seriously recommend checking this out.
Conclusion
If you want to generate media to use on your mockup/layout design then these tools will do everything you need. https://picsum.photos/ is great for placeholder images and https://temp.media is the only quick and easy placeholder video site I could find. Stay tuned for the next Web Design tricks and tips.
