Images

There are CSS properties, such as background images, border images, masking, and clipping properties, with which you can directly add images to web pages and control their behavior. However, there are also less frequently mentioned image-related CSS properties that work on images added with the <img> HTML tag, which the preferred way of adding images to web pages.

The job description of these latter properties varies from controlling the image shadow to setting the sharpness, helping us better control the appearance and the position of images added with the <img> tag. Let’s see them one by one.

The CSS data type represents a two-dimensional image.

Syntax

• The <image> data type can be represented with any of the following:

• An image denoted by the <url>() data type
• A <gradient> data type
• A part of the webpage, defined by the element() function
• An image, image fragment or solid patch of color, defined by the image()() function
• A blending of two or more images defined by the cross-fade() function.
• A selection of images chosen based on resolution defined by the image-set() function.

Description

CSS can handle the following kinds of images:

Images with intrinsic dimensions (a natural size), like a JPEG, PNG, or other raster format. Images with multiple intrinsic dimensions, existing in multiple versions inside a single file, like some .ico formats. (In this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.) Images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and height, like an SVG or other vector format. Images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a CSS gradient.

Practical Information

Search Engine Optimization (SEO): Is a huge topic talking about optimizing techniques that help your site appear nearer the top of search engine results. There are three ways that SEO optimization work with:

1- Basics: The idea is working out which terms people are likely to enter into a search engine to find your site and then using these terms in the right places on your site to increase the chances that search engines will show a link to your site in their results.

2 -On-Page Techniques: The main component of this is looking at keywords that people are likely to enter into a search engine if they wanted to find your site, and then including these in the text and HTML code for your site in order to help the search engines know that your site covers these topics. Ensuring that any images have appropriate text in the value of their alt attribute also helps search engines understand the content of images.

3- Off-Page Techniques: Getting other sites to link to you is just as important as on-page techniques. Search engines help determine how to rank your site by looking at the number of other sites that link to yours.Search engines also look at the words between the opening tag and closing tag in the link. If the text in the link contains keywords (rather than just click here or your website address) it may be considered more relevant.

to read more about Images & Practical Information you can read this book