Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101
Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > Images > Edit Image
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   Images: Edit Image

Sometimes the image you want to use is not in a browser-safe format, GIF, PNG, JPG. You can use a graphics program to save the image into a new format. Some HTML editors will do that for you. As the previous lesson pointed out, the results may not be what you expected!

In this lesson you will use Paint to save an image in a format that will work in all browsers.

 Image formats available in Paint (Win7) Image formats for saving (PaintShopProX5)

Image formats available: Paint (Win7, 8, 8.1, 10); PaintShopPro has many more
Not all of these formats are good for browsers!

Icon Step-by-Step

Step-by-Step: Edit Image

  Icon Step-by-Step
What you will learn: to add WMF image to page
to use Paint to save WMF as PNG
to use new PNG image

 Start with:  Icon: Class USB ,  hector12-Lastname-Firstname.htm, resource files

Add WMF Image to Page

The format WMF is one of many that browsers do not know how to display. What does your browser do with such an image? Let's find out.

  1. Open in your text editor the page hector12-Lastname-Firstname.htm from the folder web project2 on your Class disk.
    Yes, we are going back to the version before you saved versions 13 and 14 in different locations.

  2. Icon: Class USB Save As with the name  hector15-Lastname-Firstname.htm  in the folder web project2 with the other versions of Hector's page.
  3. Place the cursor to the right of the tag H1 near the top of the source code.

  4. Add an IMG tag for the image hchavez.wmf that is on your Class disk in the web project2/HTML folder.
    This is an image of Hector's signature.

    • Do not include the width and height for now. File Explorer does not show the dimensions for images with this format.

    • Make the image float at the right.

    • Edit the next tag H2 to clear both.

      <body>
      <h1><img src="HTML/hchavez.wmf" style="float:right;">Home page of Hector Chavez</h1>

      <h2 style="clear:both;">My house is your house!</h2>

      <h3>My Job</h3>

  5. Icon: Class USB Save.
    [hector15-Lastname-Firstname.htm]

  6. Switch to your browser and view the page, hector15-Lastname-Firstname.htm.

    The image was in WMF format. IE shows an image but Chrome and Firefox do not. Looks like you need a different image format.

    hector15 with WMF signature (IE 11) hector15 with WMF signature (Chrome 34) hector15 with WMF signature (Firefox 29)

    Different browsers handle WMF images differently. 

Use Paint to Save As PNG

Paint is a simple image editor but the newer versions of Paint can save an image in several formats that browsers understand.

  1. Right Click Menu: Open with > Paint (Win8.1)Open File Explorer to show the file hchavez.wmf on your Class disk.

  2. Right click on the file name and hover over Open with... to expand the menu.

    The menu items will be different depending on the version of Windows and what programs you have. Your computer may show more or fewer commands.

  3. Click on Paint.

    The program opens and loads the image automatically.

    hchavez.wmf loaded (Paint - Vista) Paint with hchavez.wmf (Win8.1)

  4. Save As:
    Icon: WinXP Icon: Vista     Icon: Win8 Icon: Win8.1 Icon: Win10 WinXP,Vista, Win8,Win8.1, Win10:  File > Save As > Select PNG file type.

    Menu: File > Save As > GIF (Paint-Vista) Paint: menu > Save As > PNG (Win8.1)

    Icon: Win7Win7: Paint menu Button: Paint menu (Win7) at the top left > Save As > PNG picture.

    The Save As dialog opens to the same folder as the image hchavez.wmf with a default name hchavez.png.

  5. Message: transparency will be lost

    Click on Save.
    A message window warns that the transparency will be lost.

    Hmmm. Do we know whether or not the image had any transparency to start with? No, we do not! Unfortunately, Paint can NOT save a transparent color, even for the GIF and PNG formats that support transparency. Boo!

  6. Click on OK to close the message and save the image.

Use New PNG

  1. Switch back to your editor and change the IMG tag to use hchavez.png.

  2. Add the correct dimensions from File Explorer.

    <body>
    <h1><img src="HTML/hchavez.png" width="206" height="43" style="float:right">Home page of Hector Chavez</h1>

    <h2 style="clear:both">My house is your house!</h2>

    <h3>My Job</h3>

  3. hector15 with GIF signature (browser)Icon: Class USB Save As hector16-Lastname-Firstname.htm to the web project2folder on your Class disk.

  4. Switch to your browser and edit the Address Bar to show the new version, hector16-Lastname-Firstname.htm.
    All browsers now show the signature image at the right.
    The background of the page is white and the background of the image is white. No transparency needed at this point.