How to Embed Images in Documents and Websites

PDF download Download Article
Make your websites and documents more appealing with images
PDF download Download Article

Photos and other graphical images add interest to web pages and printed materials with minimal 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, Google Docs, WordPress, and HTML. This wikiHow teaches you how to embed an image in HTML.

Embed Pictures

  • On Word and Google Docs, click the Insert tab and select the option to insert an image or picture.
  • On WordPress, type "/image". Then select one of the options to select or upload a picture.
  • Type "<img src=[image URL]>" to embed an image with HTML.
Method 1
Method 1 of 4:

Using Word and PowerPoint

PDF download Download Article
  1. You can add a picture (i.e., a JPEG or PNG image), 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 work.
    • A free version of Microsoft Office is available online at 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.
  5. All the options to insert an image are in the box labeled "Illustration." The options may vary depending on which version of Word or PowerPoint you are using. The options are as follows:.
    • Pictures: This displays a drop-down menu that allows you to select an image from your computer (This device), OneDrive, stock images, or an 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]
    • Drawing: This option is only available on the free online version of Microsoft Word. This opens a window you can use to draw shapes, insert text boxes, insert images, and draw freehand using various drawing tools.
    • 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. This option is not available on the free online version of Microsoft Word; however, you can use the Drawing option to create shapes. [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. This option is not available on the free online version of Microsoft Word. [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. This option is not available on the free online version of Microsoft Word. However, you can use the Drawing option to create charts.
    • 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. This option is not available on the free online version of Microsoft Word. However, you can take a screenshot using your device's built-in screenshot functionality and import it as an image. [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.
    • You can also use the options at the top of the page to select a border for the image, select the text wrap options, rotate the image, and adjust the image alignment.
    7. Advertisement
Method 2
Method 2 of 4:

Using Google Docs

PDF download Download Article
  1. 1
    Decide what type of image you want to embed. Google Docs allows you to embed a picture (i.e., a JPEG or PNG image), a drawing, a chart, or a symbol.
  2. 2
    Go to the Google Docs website. To do so, go to docs.google.com in a web browser.
    • If you are not signed in to your Google account, go ahead and sign in with the username and password associated with your Google account.
    • You can also use the Google Docs mobile app, but it doesn’t have as many features as the web version of the app.
  3. 3
    Click the Insert tab. It’s at the top of the page. This displays a drop-down menu.
  4. 4
    Select an option to embed a picture. The options are as follows:
    • Image: This displays a fly-out menu with options for embedding an image. You can select Upload from computer to select an image on your device. You can also select Drive to select an image from Google Drive, or Photos to select an image from Google Photos. Select Camera to take a picture with your webcam. Select By URL to insert the URL of an image online. Select Search the web to search for pictures online.
    • Drawing: This option allows you to insert a drawing from Google Drive or create a new drawing by clicking + New . This will open a window you can use to create a drawing using the tools. You can insert shapes, lines, arrows, text boxes, and an image. Click Save and close in the upper-right corner to save your drawing.
    • Chart: This option allows you to insert a chart. You can select Bar , Column , Line , and a Pie chart. This will insert a chart from Google Sheets. Click Edit in sheets at the bottom to adjust the labels and values.
    • Symbols: This option allows you to insert an Emoji , Special Characters , or an Equation . Click the emoji or special character you want to insert, or you can use the search bar to search for an emoji or special character. You can also use the box on the right to draw the special character you want to insert.
  5. 5
    Adjust the size of the image. 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.
    • You can also click the icon with three dots (â‹®) below the image and select Size & rotation . This displays options to change the size of the image as well as rotate the image.
  6. 6
    Select a text wrap function. Click the image to select it and then click one of the text wrap features below the image. You can select In Line to have the image on its own line, Wrap text to have the text wrap around the image, Break text to place the image in between two paragraph breaks, Behind text to place the image behind the text, or In front of text to place the image in front of the text.
    7. Advertisement
Method 3
Method 3 of 4:

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 .
    • Alternatively, if you have a blog on WordPress.com , you can log in there.
  2. Click Pages or Posts in the panel to the left and then click the page you want to edit.
    • If you want to create a new page or post, click + New in the upper-left corner and then click Post or Page . Then enter a title for the page at the top.
  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. 4
    Add an image block. To do so, click the Plus ( + ) icon in the upper-left corner and then enter Image in the search bar. Click Image . Alternatively, you can type /image to add an image block.
    • There are other types of image blocks you can add. You can add a gallery, tiled gallery, featured image, cover image, slideshow, Flickr embed, Instagram embed, and more. Search the different blocks under the plus ( + ) icon to see what your options are.
  5. 5
    Select an image upload option. There are four options you can choose from. They are as follows:
    • Upload: This option allows you to select an image from your computer and upload it.
    • Select image: This option allows you to select a photo from your media library, your phone, or a few cloud-based services, such as Google Photos or Openverse.
    • Generate with AI: This option allows you to enter a prompt to create an AI-generated image. You can select an image style using the drop-down menu in the upper-right corner. You may have a limited number of requests depending on your account options. Free accounts have 20 requests.
    • Insert from URL: This allows you to copy and paste a URL from an image that’s already been uploaded to the internet.
  6. 6
    Adjust the size of the image. To adjust the size of the image, click the image to select it. Then click and drag the small round handles on the sides of the image and the top and bottom.
  7. 7
    Make adjustments to the image. Click the image to select it. Then, one of the options above the image will be used to make adjustments. The options are as follows:
    • Align: This option allows you to select an alignment for the image. You can align the image left, right, or center.
    • Apply duotone filter: This option allows you to select a two-color tone filter for the image. You can do black and white, greyscale, or another two-tone filter.
    • Link: This allows you to add a link to another website and turn the image into a clickable link.
    • Crop: This allows you to crop the image. You can use your mouse wheel to zoom in on the image. Then click or drag the image to adjust its position in the image frame.
    • Add text over image: This allows you to add text that displays on top of your image.
    • Add caption: This allows you to add a caption that appears below your image.
    8. Advertisement
Method 4
Method 4 of 4:

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 has already been uploaded to your server, you can edit the HTML file on the server in cPanel. You can also 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. 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. 7
    Add an alignment to the image (optional). You can add an alignment to the image to align the image to the left, right, center, top, or bottom. To do so, type "align=" into the image tag. Then enter "left", "right", "center", "top", or "bottom" after the equals sign in quotation marks (i.g, <img src="https://www.example.com/image.jpg" align="center" ).
  8. 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.
  9. 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" align="center">
  10. 10
    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.
    11. 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 2
  • 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 4 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 1 Helpful 1
See more answers
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 0 Not Helpful 0
      Advertisement

      You Might Also Like

      Turn Off Reddit's NSFW Filter to Unblur Adult Photos & Posts
      Deep Web Guide: Getting There & How It Differs from the Dark Web
      How to
      Search and Find About Someone Using Image Easily
      How to
      Turn On Incognito Mode & Start Private Browsing
      Easy Ways to Find Your Apple ID
      How to
      Use ChatGPT: Everything You Need to Know
      How to
      View Your Google Search Activity & Browsing History
      17 Easy Ways to Speed up Your WiFi or Internet Connection
      4 Ways to Find Old Websites Using Archive Tools
      How to
      Browse and Archive Websites with the Wayback Machine
      Easy Ways to Make a Website Shortcut on Windows or macOS
      The Ultimate Guide to Searching by Image: Google, Bing, & TinEye
      How to
      Create a Link: Easy, Step-by-Step Instructions
      11 Things to Do If You’re Connected to Wi-Fi But Have No Internet
      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 314,091 times.

      Is this article up to date?

      Advertisement