DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Data Engineering
  3. Data
  4. Fake Images Please?

Fake Images Please?

Paul Underwood user avatar by
Paul Underwood
·
Jan. 28, 13 · Interview
Like (0)
Save
Tweet
Share
3.69K Views

Join the DZone community and get the full member experience.

Join For Free

when you are designing a new website you normally go through a few steps until you have the finished design.

first you will get the requirements for the design from the client, this will lead you to create a wireframe to show the client so you can make sure that it is what they hoped for.

with a wireframe you will get the basic layout of the website but won't really get the look and feel of site for this you need to start the prototyping stage. this is where you will create the site in html including dummy text and dummy images.

the easy thing is to include dummy text as you can use lorem ipsum . but it takes more time to create these images and make sure they are the right size for your design. then if you want to change the sizes of these images you have to go back to your image editor and change the sizes, save the file and add these images back to your prototype page.

fake images please

the solution is using a placeholder service like fake images please . this service allows you to create fake images at the create sizes using their api, which means you can quickly add these placeholders to your design but just typing in the image url.

just like the examples below.

create an image 300x300

the simplest form of creating an image is to pass in 1 parameter for the size of the image, this will create an image 300 x 300.

<img src="http://fakeimg.pl/300/">

create an image 250 x 100

you can pass in 2 sizes as the first parameter and an image will be created in this size width x height.

<img src="http://fakeimg.pl/250x100/">

create an image 250 x 100 with a red background

a second parameter can be passed to the image for the background color just like the code below will create an image 250 x 100 with a background color of red.

<img src="http://fakeimg.pl/250x100/ff0000/">

create an image 250 x 100 with a red background black text

a third parameter can be passed to set the color of the text to use. the below code will create an image 350 x 200 with a background color of red and a text color of background.

<img src="http://fakeimg.pl/350x200/ff0000/000">

create an image 350 x 200 with text hello

you can change the text that is added to the image by passing in a query string parameter text, the value of this will be the text that is added to the image.

<img src="http://fakeimg.pl/350x200/?text=paulund">

create an image 350 x 200 with text world

another query string parameter of font can be passed in to change the font style, you can use google fonts to select a new style to use on your image.

<img src="http://fakeimg.pl/350x200/?text=world&font=lobster">

conclusion

as you can see it's very easy to create placeholder images for your prototypes and all you have to do change the image source and you can have a different sized image, you can even change the text displayed on your images.

why not try fake images places for your next prototype?

fake images please



Design Google Fonts Prototype Strings Pass (software) Data Types Database Typing

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Configure AWS Glue Job Using Python-Based AWS CDK
  • Distributed Stateful Edge Platforms
  • How to Use MQTT in Java
  • 2023 Software Testing Trends: A Look Ahead at the Industry's Future

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: