HTML Images

Spread the love
Image-HTML Images
Image-HTML Images

In HTML Images know what the different image formats are? Insert images on web pages and view them on different devices. File formats such as GIF and SVG are line art whereas JPEG is for photos. Choose SVG when it comes to drawing an icon or a logo. The optimization process for images is called compression. The essentials of placing an image on a web page are the element and the ‘src’ attribute. Some of your website users may be visually impaired. The images can be made accessible to them by using the ‘alt’ attribute (alternate text). The ‘alt’ text provides a description for such users who cannot see the screen. These users can access through a screen reader. Rightclick on any image and find out the width and height from the image info. Resize dimensions to the right size if needed by using the width and height attributes.

To refresh the basics of HTML, click on ‘Introduction to HTML‘.

HTML Images: File Formats

Web browsers normally support popular image file extensions such as a .jpg & .gif. JPG or JPEG which is one and the same stand for ‘Joint Photographic Experts Group’. GIF stands for ‘Graphics Interchange Format’. PNG (Portable Network Graphics) format is similar to GIF abbreviated as .png.

JPEG & GIF

Loading of images on a web page depends on the website speed. Here compression of images is necessary for quick display on the internet. Saving images for a GIF will reduce file size and limit the colors to 256. This will affect the quality of the image. The JPEG image format has millions of colors. It is not limited to 256 colors as is the case with the GIF file format. Expect some loss in quality while compressing the original image to a JPEG format with a little high file size. However, JPEG is a better option for the internet.

JPEG is a loss compression format whereas GIF is a lossless compression format. This means that the more the images are compressed and uncompressed for JPEG the quality of the image goes down. This is not the case with the GIF format. The GIF Image format makes it possible to have transparent background and animations which are not possible with the JPEG.

As a rule, if your image is less than 256 colors then save it as a GIF. If the colors in the image are more than 256 and you do not want the quality to be affected then save the image in a JPEG format. Read more by clicking on Optimize Images for Web.

SVG & PDF

SVG – Use Scalar Vector Graphics to create and save 2D vector images. There is no loss of quality when the SVG image is increased as a whole or part. Text editing in the SVG image is possible with views possible in any browser. It represents the images (logos and icons) and its elements eg figures, objects, drawings, etc in an XML text format.

Unlike JPEG and PNG which are Raster formats, SVG and PDF are vector formats. In an SVG image, the pixels are not stored but get stocked as a sequence of shapes. The file commands notify browsers what geometric shapes to draw from stocks. The other formats GIF, JPEG, and PNG deal with images as a framework of individual pixels. Thus the enlarged images inflate the pixels, thereby giving the image a ragged and distorted appearance.

HTML Images: Inserting Images

For example, create an HTML page eg ‘RRD.html’ using a TextEdit (Mac) or Notepad (Windows) or any integrated development such as Brackets which works on Windows, Mac, and Linux. Save the file in a folder and name it as ‘Project’ or any other name. Find an image file eg handshake.jpg and save it in the Images subfolder located in your ‘Project’ folder.

HTML Images: Path of the file

  • <IMG SRC=handshake.jpg> (In the example we are putting the image element into the RRD.html file).
  • <IMG SRC=Images/handshake.jpg> [The image – handshake.jpg is in the Images folder].
  • <IMG SRC=Project/Images/handshake.jpg> {The folder Images/handshake.jpg is in the Project folder}.
fig1-IMG SRC=/Users/rosanadsilva/Desktop/Project/Images/handshake.jpg
fig1-IMG SRC=/Users/rosanadsilva/Desktop/Project/Images/handshake.jpg
fig2-IMG SRC=../Project/Images/handshake.jpg
fig2-IMG SRC=../Project/Images/handshake.jpg
fig3-HTML Images~Output for figs (1) & (2)
fig3-HTML Images~Output for figs (1) & (2)
fig4-Image info of fig 3
fig4-Image info of fig 3

HTML Images: For Mac Users

Path of the file (HTML file) for the above webpage is-
file:///Users/rosanadsilva/Desktop/Project/RRD.html
Path of the Image file for the handshake image displayed on the above web page is-
 /Users/rosanadsilva/Desktop/Project/Images/handshake.jpg
OR
../Project/Images/handshake.jpg

The .. after SRC and a forward slash in fig 2 indicates to move up one folder. The browser then looks for the folder ‘Images’. Next, it searches the ‘Images’ folder for the specific image ‘handshake.jpg’.

HTML Images: For Window Users

C:\Users\Owner\Desktop\Project\Images\handshake.jpg    // An example of Absolute Path. It refers to the path of the image file on your computer. If the image has been saved in the documents folder, the desktop in the above path may be replaced by 'Documents'.
fig5-HTML Images~Relative Path that displays output as shown in fig 3.
fig5-HTML Images~Relative Path that displays output as shown in fig 3.

Relative Path fig 5 is the image file – ‘handshake.jpg’ that works only if all images and HTML files for your website are located in the same folder eg ‘Project’ in this case.

fig6-HTML Images~Project Folder
fig6-HTML Images~Project Folder

The ‘Project’ folder fig 6 located on the desktop contains all the HTML files and images for the above.

HTML Images: Attributes

ALT Attribute

<IMG SRC=Images/handshake.jpg ALT=handshake><IMG>

 fig7-HTML Images~ALT Attribute
fig7-HTML Images~ALT Attribute

The image will not display, as we write ‘Image’ in place of ‘Images’ fig 7 in the code of RRD.html file. This RRD.html file serves as an index.html file in case other HTML files get added. ‘ALT’ means alternate text.

fig8-Output of alt tag

Users will then see the text ‘handshake’ in the output fig 8.

Height and Width Attributes.

fig9-HTML Images~Height & Width Attributes
fig9-HTML Images~Height & Width Attributes

With the Image tag, specify a new height and width fig 9 such as <IMG SRC=Images/handshake.jpg HEIGHT=300 WIDTH=300>.

fig10-HTML Images~Output of Height & Width Attributes of 300*300px
fig10-HTML Images~Output of Height & Width Attributes of 300*300px

The original image was 580H*508W pixels. By changing the Height and Width attributes of the <img> tag to 300*300 (fig 10), we have decreased the size of the image. But the decreased image takes the same time to load in the browser as the size of the .jpg file has not been changed. This means that the same download time is used for this small image. The best practice would be to scale the image ‘up’ for size but not ‘down’. However, if images are too big image editing software should be used to reduce the Height and Width of the Image.

The USEMAP Attribute

The usemap attribute turns specific areas of an image into clickable links. The <map> element relates to an image-map whereas the <area> element describes clickable areas inside an image map. The usemap attribute of the HTML <img> element point to an image-map.

fig11-Image Map
fig11-Image Map

We do not want the entire image to be a hyperlink but only the persons in the box 1, 2 and 3.

fig12-GIMP-x,y coordinates
fig12-GIMP-x,y coordinates

Coordinates for a rectangular shape will be [x, y, x+width, y+height] which can be read from the above image. In the case of a Polygon, x and y coordinates for each point need to be taken. Hence, a triangle will have 6-coordinates, a pentagon will have 10-coordinates and so on.

JS Fiddle

In JS Fiddle click on the ‘HTML’ tab to view the code. The ‘Result’ tab will take you to the image. Hold the mouse outside the person image (represented in the box-1,2,3). Note that the pointer does not change. But as you hold your mouse on the person image within the box-1,2,3 the pointer changes indicating it is a link. This has been achieved with the usemap attribute.

The usemap attribute code – <img src=https://sapcanvas.com/wp-content/uploads/2019/10/handshake.jpg usemap=#imageMap>. We have two MAP tags. The start one takes the NAME attribute – imageMap and the end one takes the AREA tag. The AREA tags contain attributes of its own – SHAPE, COORDS and HREF. The box 1,2,3 denoted in fig 12 needs the coordinates to be specified. The HREF attribute is the page the user will be taken to. When the box 1 area in the image is clicked the user is taken to the bing website. We have typed the # symbol for the HREF attribute for boxes 2 and 3. This means to remain on the same page when boxes 2 and 3 are clicked.

fig13-GIMP~x,y coordinates, radius
fig13-GIMP~x,y coordinates, radius

A circle would require the x,y coordinates from the center of the circle, and the radius (1/2diameter).

fig14-Circle1 Image Map
fig14-Circle1 Image Map

JS Fiddle

Click on the ‘HTML’ tab in JS Fiddle and view the Code. When the ‘Results’ tab is clicked the circle image is displayed. Note that the outer area in blue is not clickable. The red color inside the circle is the hotspot area. When clicked it will land on the website of Sap Canvas.