How to Embed Pictures

PDF download Download Article
PDF download Download Article

Photos and other graphical images add interest to web pages and printed materials with a minimum of effort. Embedding pictures into your written text is quick and easy, although the process differs greatly depending on the application you are using. It is possible to embed pictures and other graphical images in Word, PowerPoint, Wordpress and HTML. This wikiHow teaches you how to embed an image in HTML.

Method 1
Method 1 of 3:

Using Word and PowerPoint

PDF download Download Article
  1. You can add a picture, graphic, clip art, or chart. You can also create a shape or graphic.
  2. Word has an icon that resembles a blue sheet of paper with a "W" over it. PowerPoint has an icon that resembles a red pie chart with a "P" over it. Click either icon in your Windows Start menu or Applications folder on Mac to open Word or PowerPoint. Both PowerPoint and Word require a subscription to Microsoft Office to be able to insert pictures or save your word.
    • A free version of Microsoft Office is available online at https://www.office.com/ . You can insert images into documents using the online version of Word. You can also use Google Docs.
    Advertisement
  3. It's the third tab at the top of the page. This displays all the options for inserting external media, such as graphics, shapes, spreadsheets, links, videos, and more in your document.
  4. This places the text cursor in the document. When you insert an image in Word or PowerPoint, it will insert where the text cursor is currently at.
  5. All the options to insert an image are in the box labeled "Illustration." You can insert a picture, shape, smart art, chart, or screenshot.
    • Pictures: This displays a drop-down menu that allows you to select an image from your computer (This device), stock images, or online image. Select the option that is appropriate for the image you want to insert. Select the image you want to insert and click Insert . [1]
    • Shapes: To insert a shape into your documents, click Shapes in the toolbar at the top. Then click the shape you want to insert. Click the Format tab at the top and use the options in the Format toolbar to change the color, border, color, text color, etc. [2]
    • SmartArt: SmartArt allows you to insert a variety of customizable charts into your document. Click SmartArt to open the SmartArt selection box. Click the SmartArt you want to insert and click Ok . Click where it says "[text]" in the SmartArt and type to enter your own text. When you click SmartArt inserted in the document, you can use the tools under the Design and Format tabs to customize the look of the SmartArt. [3]
    • Chart: The Chart option allows you to insert a graph into your document. To insert a chart, click Charts at the top and then click a chart type in the column to the left. Then click a chart and click Ok . Use the spreadsheet window to edit the data and labels in the graph.
    • Screenshot: This option allows you to take a screenshot of a window or area of the screen. To insert a screenshot, click Screenshot and then click the thumbnail of the Window you want to insert a screenshot of. To take a screenshot of an area of the screen, click Screen clipping and then click and drag a box over the area of the screen you want to take a screenshot of. [4]
  6. To adjust the size of the image, click the image to select it. Then click and drag the frame around the image or the corners of the frame to adjust the size of the image.
    7. Advertisement


Method 2
Method 2 of 3:

Using Wordpress

PDF download Download Article
  1. By default, the way you open the WordPress admin area is to go to your website's URL and type "/admin" at the end (i.g www.example.com/admin). Then enter the admin username and password and click Log In .
  2. Click Pages in the panel to the left and then click the page you want to edit. You can also click Add new page to create a new page.
  3. This places a text cursor in your blog or web page. You will see a bar with different icons appear above the cursor.
  4. It's the icon that resembles a camera and a pair of music notes. It's in the bar above the text cursor.
  5. You will see all the images you have uploaded to your library displayed on the screen. Select the image you want to embed and click Continue in the lower-right corner.
    • If the image you want to embed is not already uploaded, click Add new in the upper-left corner. Select the image you want to upload and click Choose . Alternatively, you can click the drop-down menu to the left and click Add via URL . Copy and paste the URL of the image you want to upload and click Upload .
    • If you want to edit the caption, description, title, or alternate text, click Edit . Then enter the text you want to edit in the appropriate field to the right of the image.
  6. To adjust the size of the image, click the image to select it. Then click and drag the small square handles in the corner to adjust the size of the image.
  7. When you have the image selected, you can click the icons that resemble lines aligned to the left, right, or center to adjust the alignment of the image. You can also click the boxes that resemble a square with lines around them to adjust how the text will wrap around the image.
    8. Advertisement
Method 3
Method 3 of 3:

Using HTML

PDF download Download Article
  1. You can upload your image using an FTP client . Some web servers allow you to upload files directly using cPanel.
  2. If the HTML document is already uploaded to your server, you can edit the HTML file on the server in the cPanel. You can also [[Edit-HTML-Files}edit HTML files]] saved to your computer using a text editor like Notepad or TextEdit, or you can use an HTML editor like Adobe Dreamweaver or Kompozer. [5]
  3. This places a text cursor on the HTML page. This is where the image will be inserted.
  4. This is the start of the HTML tag used to insert an image.
  5. Copy and paste the URL of the image in quotation marks. You'll need to get the URL of the image you uploaded to your server. Paste the URL in quotation marks after the equals sign in the HTML tag (i.g <img src="https://www.example.com/image.jpg").
  6. Alternate text is the text that will appear if the viewer cannot view the image for whatever reason. If you want to add alternate text to the image, type "alt=" followed by the alternative text in quotation marks (i.g <img src="https://www.example.com/image.jpg" alt="image text").
  7. If you want to adjust the size of the image, you can do so by typing "width=" or "height=" followed by the width or height number in pixels in quotation marks (i.g <img src="https://www.example.com/image.jpg" alt="image text" width="600" height="500"). Alternatively, you can type a percentage (i.g. "75%") instead of a pixel number.
  8. This closes the HTML tag. The entire tag should look something like the following: [6]
    • <img src="https://www.example.com/image.jpg" alt="image text" width="600" height="500">
  9. 9
    Upload the HTML document to the server. Once you have completed the HTML page, upload it to the server using an FTP client, or by uploading it in cPanel.
    10. Advertisement

Community Q&A

Search
Add New Question
  • Question
    I add the photo and send the document as an attachment or copy/paste, but the text goes and the photo doesn't. What do I do?
    Community Answer
    Reload and try again until you get the desired results.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 10 Helpful 1
  • Question
    Why is my picture not showing on my web page when my code is correct?
    Free Eagle
    Community Answer
    Often the URL for the image is missing the h-t-t-p, or h-t-t-p-s. Double check that and double check for missing quote marks or some times a missing < or > sign. Often it's just a very small thing missing in the code.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 2 Helpful 0
  • Question
    How do I embed a photo to my Facebook post?
    Waqas Ahmad
    Community Answer
    To embed a photo in a Facebook post, follow these steps: Go to your Facebook profile or page and click on the "Create Post" button. Click on the "Add Photo/Video" button to open the photo uploader. Select the photo you want to embed from your computer or mobile device. You can also drag and drop the photo into the photo uploader. Once the photo has been uploaded, it will appear in the post composer. You can add a caption or other text to the post if you like. When you're ready to post the photo, click on the "Post" button. The photo will be embedded in the post and will be visible to your friends or followers.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 0 Helpful 0
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      Warnings

      • Only insert graphic images that are expressly yours, or that are designated free for personal use. Using someone else's images without permission and attribution is theft of intellectual property.
        Thanks
        Helpful 1 Not Helpful 0
      Advertisement

      You Might Also Like

      How to
      Search and Find About Someone Using Image Easily
      Deep Web Guide: Getting There & How It Differs from the Dark Web
      Easy Ways to Find Your Apple ID
      Turn Off Reddit's NSFW Filter to Unblur Adult Photos & Posts
      17 Easy Ways to Speed up Your WiFi or Internet Connection
      How to
      Create a Link: Easy, Step-by-Step Instructions
      How to
      Get the URL for Any Image
      How to
      Remove Bing Wallpaper
      4 Ways to Find Old Websites Using Archive Tools
      Easy Ways to Make a Website Shortcut on Windows or macOS
      How to
      Browse and Archive Websites with the Wayback Machine
      8 Easy Ways to Fix Instagram Invite Collaborator Not Showing
      The Ultimate Guide to Searching By Image
      How to
      View Your Google Search Activity & Browsing History
      Advertisement

      References

      1. ↑ https://www.youtube.com/watch?v=DxEj2-XxDg0
      2. ↑ https://www.youtube.com/watch?v=AAYIjxDNvx4
      3. ↑ https://www.youtube.com/watch?v=O-AtmfhCbJQ
      4. ↑ https://www.howtogeek.com/369365/how-to-use-microsoft-word-built-in-screenshot-tool/
      5. ↑ https://www.inmotionhosting.com/support/website/how-to-edit-a-file/
      6. ↑ https://www.w3schools.com/html/html_images.asp

      About This Article

      Article Summary X

      1. Open an HTML document.
      2. Type "".7. Upload the HTML file to your server.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 311,632 times.

      Is this article up to date?

      Advertisement