Using Image Placeholder Services For Web Development

by  
Share:
Using Image Placeholder Services For Web Development

How many occasions developers/designer waste their times in cropping, resizing images just to place image and that too just for testing with dummy image. Just to minimize this loss there are lots of placeholder service available to fill in that place, which provides good quality images. In this tutorial I will show you how to use image placeholder services for web development.

placehold.it

It’s a very simple and elegant site. You can use the images for content like banner ads or just placeholder image.The most impressive thing about this site is that the images load very quickly.

<!--Simple 250 by 250 Image-->
<img src="http://placehold.it/250" alt="">

<!--Different Width and Height-->
<img src="http://placehold.it/250X300" alt="">

<!--Different colors, First one for background, second for foreground texts-->
<img src="http://placehold.it/250X300/f00/fff/" alt="">

<!--With sample text-->
<img src="http://placehold.it/250X300/ff0/fff&text=sample text" alt="">

placekitten.com

If you love cats and want to use their pictures instead of dummy images, Surely this is the place to be. They have some amazing collection of cats and code is easy to use too.

<!--Simple 250 by 250 Image-->
<img src="http://placekitten.com/250/" alt="">

<!--Different Width and Height-->
<img src="http://placekitten.com/250/300" alt="">

lorempixel.com

We all use lorem ipsum text for demo content, now we can use images for dummy placeholder images too. They provide images related to different category like sports, fashion, nightlife, etc.

<!--you have to mention both width and height-->
<img src="http://lorempixel.com/400/200" alt="">

<!--Select category-->
<img src="http://lorempixel.com/400/200/fashion" alt="">

<!--Custom text on image-->
<img src="http://lorempixel.com/g/450/200/sports/Demo Text Goes here" alt="">

placecreature.com

Well.. if you love animals this image placeholder site is just for you. They provide the list for creatures image too if you want to use image for a particular creature. the list can be found here.

<!--you have to mention both width and height-->
<img src="http://placecreature.com/300/300" alt="">

<!--Get image for a specific category category-->
<img src="http://placecreature.com/Panda/300/400" alt="">

dummyimage.com

If you like placehold.it then you will surely like dummy image too. They not just provide placeholder image  but gives features like image format (jpg, png), and different ads image sizes are predefined. The code is very easy to use.

<!--Simple 250 by 250 Image-->
<img src="http://dummyimage.com/300" alt="">

<!--Different Width and Height-->
<img src="http://dummyimage.com/250X300" alt="">

<!--You can specify one dimension and a ratio and dummyimage will calculate the right value-->
<img src="http://dummyimage.com/16:9x1080" alt="">

<!--Different colors, First one for background, second for foreground texts-->
<img src="http://dummyimage.com/250X300/f00/000000" alt="">

<!--Diffent formats-->
<img src="http://dummyimage.com/250X300/ff0/000/fff.jpg" alt="">
<img src="http://dummyimage.com/250X300/ff0/000/fff.png" alt="">

<!--Custom Text-->
<img src="http://dummyimage.com/250X300/&text=Sample Text" alt="">

<!-- Ads size image -->
<img src="http://dummyimage.com/fullbanner" alt="">

These were the best sites that I personally feel provide best service. If you find some more good image placeholder site, feel free to share it below.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.