Curso de HTML Completo: Aula 08 - Tudo Sobre Imagens

Understanding Image Tags in HTML

Introduction to Image Tags

• The speaker introduces the importance of images in web development, emphasizing that a website is primarily visual and that images often hold more significance than text or links.

• The lesson focuses on learning how to use the image tag (<img>), which is crucial for enhancing the visual appeal of websites.

Structure of the Image Tag

• The <img> tag is unique as it does not require a closing tag; it consists only of an opening tag with attributes.

• The src attribute specifies the path to the image file, indicating where the browser can find and display the image.

Using Absolute Paths for Images

• To demonstrate, an example is given using Google Images to obtain an absolute URL for an image. This involves copying the direct link from a browser.

• After pasting this URL into code, the image appears on the webpage but may be too large, necessitating size adjustments.

Adjusting Image Size

• The speaker explains how to set dimensions using width (abbreviated as w) and height (abbreviated as h) attributes in pixels.

• Pixels are described as units of measurement for screen dimensions, similar to centimeters or meters in real life.

Risks of Using External Images

• A cautionary note is made about relying on external images: if they are removed from their original source, they will appear broken on your site.

• It’s advised against using third-party images due to potential loading issues and copyright concerns.

Importance of Alternative Text

Understanding Image Accessibility and Usage

Importance of Alt Attributes for Visual Impairment

• The alt attribute is crucial for visually impaired users, as it provides descriptions of images. For example, describing an image as "blue car on asphalt with blue sky" allows screen readers to convey the content effectively.

• Properly describing images using the alt attribute not only aids accessibility but also helps search engines index images correctly, improving visibility in Google Images and overall site ranking.

Guidelines for Using Images in Projects

• When incorporating images into a project, it's essential to use your own saved images rather than directly copying from sources like Google Images.

• Be cautious about copyright issues; many images found online may have restrictions or require permission for use.

Recommended Sources for Free Images

• Pexels is highlighted as a reliable source for free stock photos and videos. All content on this platform is available at no cost.

• Other options include searching "free image banks" on Google or using sites like Freepik, which also offers a variety of free images.

Downloading and Organizing Images

• Users can filter their searches by orientation (horizontal/vertical/square) and size when looking for specific types of images on platforms like Pexels.

• To manage downloads efficiently, adjust browser settings to prompt where to save files before downloading them. This helps keep projects organized.

Implementing Downloaded Images in HTML Projects

• After downloading an image, create a dedicated folder within your project directory (e.g., named "img") to store all related visuals systematically.

Understanding Image Formats and Optimization

Importance of Image Formats in Web Projects

• Emphasizes the necessity of ensuring images are included within the project folder for proper functionality.

• Discusses how to view file extensions in a project, which is crucial for identifying image formats (e.g., .jpg).

• Highlights that specifying the correct image format is essential; omitting it can lead to broken images.

Image Dimensions and Quality

• Notes that hovering over an image reveals its dimensions, indicating high-quality images may exceed screen resolution (e.g., 2160x2160 pixels).

• Explains that while large images provide quality, they may not be necessary for web use; resizing can optimize performance.

Impact of Image Size on Website Performance

• Describes how larger image sizes (e.g., 301 KB) can slow down website loading times due to increased data transfer requirements.

• Introduces the concept of file size measurement units (bytes, kilobytes, megabytes), emphasizing the importance of keeping images lightweight for faster loading.

Techniques for Compressing Images

• Suggests using online tools to compress images effectively, improving load times without sacrificing quality.

• Recommends searching for "compress jpg" online to find suitable compression tools.

Step-by-Step Compression Process

• Demonstrates uploading an image to a compression site and notes a reduction in size by 23%.

• Continues with another compression attempt on an already compressed image, achieving further size reduction by 49%.

Additional Tools for Resizing Images

• Introduces Easy Resize as a tool for resizing images based on specified maximum weight and dimensions.

Image Resizing and Formats in Web Development

Understanding Image Resizing

• The speaker demonstrates how to resize an image, selecting a car image and downloading it at a specified size of 240x240 pixels, resulting in a lightweight file of 35 KB.

• The importance of maintaining the correct dimensions is emphasized; the image retains its original name but is now displayed with the new dimensions.

• A slight decrease in visual quality is noted when resizing images, but it remains acceptable for user experience on websites.

• Emphasizes the necessity of optimizing image sizes for web use to enhance loading times and overall performance.

• Introduces PNG format as another common image type used on the web, highlighting its advantage of having a transparent background.

Creating Images with Transparency

• The speaker mentions using Photopia, an online tool similar to Photoshop, for creating images directly in the browser.

• Encourages viewers to explore basic photo editing skills through resources available on their YouTube channel related to Photoshop tutorials.

• A new project is created with dimensions set at 300x300 pixels and a transparent background, demonstrating how transparency works visually.

• An example creation of a simple star shape illustrates how layers can be manipulated within the editor while maintaining transparency.

• The process of exporting this created image as a PNG file ensures that it retains its transparent background.

Practical Application of Image Formats

• After creating and saving an image named "estrela.png," the speaker integrates it into their project code using HTML tags to display it correctly on their site.

• Demonstrates how setting a red background color reveals only the visible parts of the PNG due to its transparency feature.

Understanding Image Formats

Key Image Formats and Their Uses

• The PNG format allows for transparent backgrounds, making it ideal for images that require a clear background.

• GIF is a common animated image format; it supports simple animations and is widely used on the internet.

• Demonstration of GIF: An example of an animated bear shows how GIFs can create moving images, enhancing visual engagement.

• Historically, the internet was filled with GIF animations; tools like Photoshop can be used to create such animations but require some knowledge in animation techniques.

Using Icons Effectively

• Flat AI is recommended as a resource for finding icons; users need to log in (e.g., using Gmail) to download icons freely.

• When searching for icons (e.g., star), options are provided, with paid icons marked by a crown symbol. Users should select free options without this symbol.

• Attribution may be required when using certain images; however, basic shapes like stars are generally safe to use without attribution concerns.

Implementing Icons in Web Pages

• Example of adding an icon to a webpage: A star icon is integrated into the main page using HTML <img> tags.

• Adjustments can be made to icon size through attributes (e.g., setting width), ensuring proper display on the webpage.

Image Optimization Techniques

Importance of Image Compression

• Compressing images is crucial for website performance; smaller file sizes lead to faster loading times and improved user experience.

Exploring Advanced Features

• Introduction of image maps (image map feature in HTML); these allow specific areas within an image to link to different destinations or actions.

Image Mapping and Clickable Areas in Web Design

Introduction to Image Mapping

• The speaker discusses the concept of image mapping, where specific areas of an image can be made clickable. This allows users to interact with different parts of an image, such as clicking on a computer or a pencil.

Using Image Map Generators

• To create an image map, one can use online tools like "image map generator." The speaker suggests searching for this tool on Google.

• After selecting an image from the computer, users can define clickable areas by drawing shapes over the desired sections of the image.

Defining Clickable Areas

• Users can add multiple clickable areas in various shapes (e.g., circles, polygons). Each area can link to different URLs.

• The speaker demonstrates creating a circular area linked to a website and emphasizes organizing items within the image for clarity.

Adjusting Coordinates and Links

• The process includes adjusting coordinates accurately when defining polygonal areas for more complex shapes.

• Once all areas are defined, users can generate HTML code that maps these clickable regions to their respective links.

Implementing Image Maps in Code

• The generated code includes a <map> tag that defines the clickable areas based on their coordinates.

• It’s important to ensure that images are sized correctly before mapping; otherwise, it may lead to misalignment of clickable areas.

Finalizing Clickable Images

• Users should maintain original dimensions for images when implementing mappings; resizing after mapping could disrupt functionality.

• Demonstrates how clicking on mapped items leads to designated links (e.g., YouTube), reinforcing the importance of correct sizing prior to mapping.

Conclusion: Making Images Interactive

• Beyond just using image maps, any image can be made clickable by wrapping it in anchor tags (<a>), linking it directly to other pages or resources.

How to Use the MG Tag for Images in Projects

Understanding Image Sizing with MG Tag

• The discussion begins with how to incorporate images into projects using the MG tag, specifically focusing on the src attribute.

• It is highlighted that when specifying image dimensions, both width and height attributes are important; if height isn't specified, it defaults to automatic sizing.

• An example is provided where setting the width to 150 pixels results in a slight increase in image size, demonstrating practical application of these attributes.

• Further adjustments are made by changing the width to 50 pixels, which visibly reduces the image size even more.