Mastering Web Image Techniques

What are the most common image formats used on the web?

• BMP

• TIFF

• JPEG, PNG, GIF, SVG

• WEBP

How do you insert an image in HTML?

• 

• 

What is the purpose of the 'alt' attribute in an image tag?

• The 'alt' attribute describes the content of an image for accessibility and when the image cannot be displayed.

• The 'alt' attribute specifies the size of the image.

• The 'alt' attribute changes the image's color when hovered over.

• The 'alt' attribute is used to link to a different webpage.

What is a responsive image and how can it be implemented?

• A responsive image is a static image that does not change size.

• A responsive image is implemented using CSS media queries only.

• A responsive image is an image that adapts to different screen sizes and resolutions, implemented using the 'srcset' and 'sizes' attributes in the tag.

• Responsive images are only for mobile devices and do not work on desktops.

Why is image optimization important for web design?

• Image optimization is important for web design because it improves loading speed, enhances user experience, reduces bandwidth usage, and boosts SEO.

• Image optimization has no impact on SEO rankings.

• Image optimization is only necessary for mobile devices.

• Image optimization is primarily for aesthetic purposes.

What are some common strategies for optimizing images?

• Avoiding any form of compression

• Common strategies for optimizing images include using the right file format, compressing images, resizing, using responsive images, and implementing lazy loading.

• Using only high-resolution images

• Always using PNG format for all images

How can CSS be used to style images on a webpage?

• CSS can only change the color of images.

• CSS styles images using properties like width, height, border, and filters.

• CSS is not applicable to images on a webpage.

• CSS styles images using JavaScript functions.

What does it mean for an image to be accessible?

• An accessible image is one that is only available in high resolution.

• An accessible image is one that can be understood and used by individuals with disabilities.

• An accessible image is one that is visually appealing to everyone.

• An accessible image is one that can be printed without any issues.

What is the difference between JPEG and PNG formats?

• JPEG is lossy and suitable for photos; PNG is lossless and ideal for graphics with transparency.

• JPEG supports transparency while PNG does not.

• JPEG is used for animations while PNG is used for static images.

• JPEG is lossless and ideal for photos; PNG is lossy and suitable for graphics.

How can you ensure that images load quickly on a website?

• Increase the size of images for better quality.

• Use high-resolution images without compression.

• Disable image loading entirely.

• Optimize images and use lazy loading.