MAQ Learning

HTML Images

Adding images to a web page is a simple process that involves using the <img> tag in HTML. The <img> tag is self-closing and requires at least one attribute src (source).

Syntax of HTML Image <img>

Here's an example of the basic syntax for adding an image:

<img src="image.jpg">

The "src" attribute specifies the URL or file path of the image

Example:

<!-- Relative path for image on your local website -->  
<img src="image.png">

<!-- Absolute path for image on other website -->
<img src="https://www.google.com/images/googlelogo.png">

alt Attribute of Image <img>

The "alt" attribute in the HTML <img> tag stands for "alternative text." It serves as a descriptive text that provides information about the content of an image in case the image cannot be displayed to the user.  

Example:

<img src="images/flower.png" alt="Flower Image">

When using the "alt" attribute, it's essential to provide accurate and descriptive text that adequately represents the image's content or function. This not only benefits users with disabilities but also contributes to better SEO and overall user experience on websites.

title Attribte of <img>

The "title" attribute in the HTML <img> tag provides additional information about the image when a user hovers over it with their cursor. Browser displays it as a tooltip.

Example:

<img src="images/flower.png" alt="Flower Image" title="This is flower">

When using the "title" attribute, aim to provide concise yet informative text that supplements the image content without being overly lengthy or redundant. Combining both the "alt" and "title" attributes appropriately can contribute to a more accessible, informative, and user-friendly web experience.

Height & Width of Images

In HTML, the "height" and "width" attributes within the <img> tag are used to define the dimensions (size) of an image displayed on a web page. Here is an explanation of how these attributes work:

  1. Height Attribute: Specifies the height of the image in pixels. It defines the vertical size of the image.
  2. Width Attribute: Specifies the width of the image in pixels. It determines the horizontal size of the image.

Example:

<img src="images/image.jpg" height="200" width="300">

Remember that specifying both the "height" and "width" attributes is recommended for optimal page rendering. Additionally, avoid using excessively large image sizes, as they may impact page loading times and user experience, especially on slower connections or mobile devices.

Image Placement in Your HTML Code

The image placement is important, because imge placement in different places in the code will produce different results. Here are few examples of image placement.

Image Placement Before A Paragraph

Placing an image before a paragraph will display the image above the paragraph text. The image will appear independently, not directly associated with the text of the paragraph. This method is suitable for standalone images or visuals that introduce or complement the subsequent text.

To place an image before a paragraph, use the <img> tag before the paragraph's content.

<img src="flower.jpg" width="100" height="100">
<p>This is sample code to place an image before the start of a paragraph.</p>

Image Placement Inside the Start of Paragraph

When an image is positioned at the start of a paragraph within the <p> tag, the image will be part of the paragraph itself, appearing before any text. This visually merges the image with the paragraph content, providing context to the text that follows the image.

To display an image at the beginning of a paragraph, include the <img> tag inside the paragraph tag.

<p> 
<img src="flower.jpg" width="100" height="100">
This is sample code to place an image inside the start of a paragraph.
</p>

Image Placement in the Middle of a Paragraph

Embedding an image in the middle of a paragraph separates the text before and after the image. The image interrupts the flow of the paragraph, visually breaking the continuity of the text. This method is useful when highlighting or illustrating a specific point within the paragraph.

For placing an image in the middle of a paragraph, separate the content with the <img> tag.

<p>This is a paragraph.
<img src="https://maqlearning.com/flower.jpg" width="100" height="100">
This is sample code to place an image in the middle of a paragraph.
</p>

Image Placement After the Paragraph

Placing an image after a paragraph will display the image below the paragraph text. Similar to placing the image before the paragraph, this method presents the image separately from the paragraph content. It's suitable for images that complement or conclude the information presented in the preceding paragraph.

To position an image after a paragraph, place the <img> tag following the closing paragraph tag.

<p>This is sample code to place an image after the paragraph.</p>
<img src="https://maqlearning.com/flower.jpg" width="100" height="100">

Complete Example, putting it all together:

<html>
<head>
</head>

<body>
<!-- Before paragraph -->
<img src="https://maqlearning.com/flower.jpg" width="100" height="100">
<p>This is sample code to place an image before the start of a paragraph.</p>

<!-- Inside start of paragraph -->
<p> 
<img src="https://maqlearning.com/flower.jpg" width="100" height="100">
This is sample code to place an image inside the start of a paragraph.
</p>

<!-- Middle of paragraph -->
<p>This is a paragraph.
<img src="https://maqlearning.com/flower.jpg" width="100" height="100">
This is sample code to place an image in the middle of a paragraph.</p>

<!-- After paragraph -->
<p>This is sample code to place an image after the paragraph.</p>
<img src="https://maqlearning.com/flower.jpg" width="100" height="100">

</body>
</html>

Output:

This is sample code to place an image before the start of a paragraph.

This is sample code to place an image inside the start of a paragraph.

This is a paragraph.This is sample code to place an image in the middle of a paragraph.

This is sample code to place an image after the paragraph.

 

Each placement method provides a different visual representation of the relationship between the image and the surrounding text. Please, remember these points while image placement.

  • Block Level Elements always appear on new line. Examples of block level elemnts are <p> paragraph, <h1> heading and <div>. In this case if you place an image before or after a paragraph, the paragraph will be placed in new line. As you can see in example 1 where image is placed before the paragraph and example 4 where image is placed after the paragraph.
  • Inline Elements do not start on a new line. Examples of inline elements are <span>, <img>, <em> and <b>. In this case, if the image element is inside a block level element, any text or other inline elements will wrap around the image element. As you can see in second example where image is placed in the start of paragraph (a block level element) and in example 3 where image is placed in the middle of the paragraph.

Aligning Images Horizontally

To align images horizontally, you can use the align attribute in the <img> tag or CSS. However, note that the align attribute is deprecated in HTML5, and CSS is the preferred method for styling.

The recommended method is to use float: left and float: right properties. The float: left property aligns the image to the left, allowing text or other elements to flow around the image on the right side. Similarly, float: right aligns the image to the right, with text or other elements flowing around it on the left side.

Using align Attribute (Deprecated in HTML5):

<!-- Aligning image to the left -->
<p>
<img src="image.jpg" align="left">
This is sample code to show image is left align.
</p>

<!-- Aligning image to the right -->
<p>
<img src="image.jpg" align="right">
This is sample code to show image is right align.
</p>

Using Inline Style (Not Recommended - for demo purpose only)

<!-- Aligning image to the left -->
<img src="image.jpg" style="float: left;">

<!-- Aligning image to the right -->
<img src="image.jpg" style="float: right;">

External CSS (Preferred Method):

HTML:

<img src="image.jpg" class="left-align">
<img src="image.jpg" class="right-align">

CSS:

/* CSS */
.left-align {
  float: left; 
}

.right-align {
  float: right;
}

Image as a Link in HTML

To create an image as a link in HTML, you can wrap the <img> tag inside an <a> (anchor) tag. This allows users to click on the image and be directed to another webpage or resource.

Here's an example:

<a href="https://google.com">
  <img src="image.jpg">
</a>

By wrapping the <img> tag with the <a> tag and specifying the href attribute in the <a> tag, the image becomes a clickable link. When users click on the image, it will navigate them to the specified URL or destination.

Different Types of Images and Their Properties

There are different types of images that can be used on a webpage, each with their own properties. Some common image formats include JPEG, GIF, PNG, and SVG.

  • JPEG (Joint Photographic Experts Group) is a compressed image format that is best suited for photographs and complex images with a lot of colors and details.
  • GIF (Graphics Interchange Format) is a lossless image format that supports animation, making it ideal for creating banners or buttons on a webpage.
  • PNG (Portable Network Graphics) is also a lossless image format that supports transparency, making it suitable for logos, icons, and other graphics that require a transparent background.
  • SVG (Scalable Vector Graphics) is an image format that uses vector graphics, which means it can be scaled without losing quality. This makes it perfect for creating logos, charts, and other graphic elements on a webpage.

How to Optimize Images for Faster Loading Times

Large images can significantly slow down the loading time of a webpage, which can lead to a poor user experience and lower search engine rankings. To optimize images for faster loading times, consider the following tips:

  • Use image compression tools to reduce the file size without compromising on quality.
  • Set the dimensions of the image to match its display size on the webpage.
  • Choose the appropriate file format based on the type of image and its intended use.
  • Use CSS sprites to combine multiple images into one, reducing the number of server requests and improving loading times.

List of Websites for Stock Photos

Here is a list of websites where you can find high-quality stock photos:

  • Unsplash: Offers a vast collection of free high-resolution images contributed by photographers worldwide.
  • Pexels: Provides high-quality stock photos and videos under the Creative Commons Zero (CC0) license, allowing free use for personal and commercial purposes.
  • Pixabay: A platform offering a wide range of images, illustrations, vectors, and videos free for commercial use with no attribution required.
  • StockSnap.io: Curates beautiful and high-resolution stock photos released under the Creative Commons CC0 license.
  • Burst (by Shopify): A platform offering free stock photos for commercial use, primarily focused on business and e-commerce-related imagery.
  • Adobe Stock: A premium stock photo platform providing a vast collection of high-quality images, videos, illustrations, and templates.
  • Shutterstock: Offers a massive library of stock images, videos, music, and illustrations, both free and premium.
  • iStock (by Getty Images): Provides a comprehensive selection of stock photos, illustrations, vectors, and videos for purchase.
  • Depositphotos: A stock photo platform with millions of high-quality images and videos available for purchase or subscription.
  • Reshot: A platform showcasing curated and authentic images from emerging photographers, available for free download.
  • Freepik: Offers free and premium graphics resources, including stock photos, vectors, icons, and PSD files.
  • Rawpixel: Provides diverse and creative stock photos, illustrations, and vectors, with free and premium options available.

When using stock photos, be sure to review the licensing terms and conditions for each image to understand how you can use them legally and appropriately for your intended purposes.

Tools to Edit and Save Images

There are numerous tools available for editing and saving images, ranging from simple and free online editors to more advanced and feature-rich software. Here's a list of some commonly used tools:

  • Adobe Photoshop: A professional-grade software with comprehensive image editing capabilities.

  • Adobe Illustrator: Primarily used for vector graphics but also has image editing features.

  • GIMP (GNU Image Manipulation Program): A powerful and free open-source image editor with a wide range of features.

  • Pixlr: An online photo editor available in both free and premium versions.

  • Canva: Web-based design platform with easy-to-use image editing tools.

  • Paint.NET: A lightweight yet capable image editor for Windows users.

  • Skylum Luminar: A user-friendly editor with AI-powered tools for quick enhancements.

  • Affinity Photo: A professional photo editing software offering extensive editing features.

  • PicMonkey: Online photo editing tool with a user-friendly interface.

  • Snappa: Web-based graphic design software suitable for social media images and marketing materials.

Common Mistakes to Avoid When Using HTML Images

When using HTML images, it's important to be aware of common mistakes that can affect the overall quality and functionality of a webpage. Some common mistakes to avoid include:

  • Not providing alt text or using generic alt text such as "image" or leaving the attribute blank.
  • Using large images without optimizing them for web use.
  • Using inline CSS to style images instead of external CSS, which can make it difficult to maintain consistency across multiple pages.
  • Not considering accessibility when choosing color combinations for image backgrounds and text overlays.
  • Using images with a low resolution, resulting in pixelated or blurry images on high-resolution screens. Overall, understanding the basics of HTML images and implementing best practices can greatly enhance the visual appeal, accessibility, and overall user experience of a webpage. By optimizing images for faster loading times and writing effective alt text, web developers can ensure that their content is accessible to all users and effectively communicates their message. Remember, images are a powerful tool that can greatly enhance the impact of your content, but it's important to use them responsibly and with proper consideration for accessibility.

Summary:

HTML images are an essential element of web design that can greatly enhance the visual appeal and user experience of a webpage. By understanding the different types of images, their properties, and how to optimize them for faster loading times, web developers can effectively use images to convey information and engage users. It is also important to keep in mind that accessibility should always be considered when using images on a webpage, and writing effective alt text is crucial for making the content accessible to all users. With these tips in mind, you can take your web page design to the next level and create an engaging and visually appealing online experience for your audience.