Importance of Images
CSS Images Images are an important part of any web application. Including a lot of images in a web application is generally not recommended, but it is important to use the images wherever they required. CSS helps us to control the display of images in web applications.
CSS helps us to control the display of images in web applications. The styling of an image in CSS is similar to the styling of an element by using the borders and margins. There are multiple CSS properties such as border property, height property, width property, etc. that helps us to style an image.
Why we add images :
We add images to our web pages to create interesting and engaging content for our readers. Images create a visual connection with the viewer and trigger emotions in a way text can’t.
With the exception of the first two, we read because we want to learn something new – and in order to learn, we need to be engaged and understand the content clearly.
Images help us with both of these factors and are the reason it is so important to include them in the content of our web pages.
Importance of
Relevant Images:
instead of “filler” images that only have the purpose to look pretty – enhance the user experience. They deliver a contextual message, which answers the need for information. Naturally, when guests visit the website of a hotel, they are looking for information and images deliver it quickly and explicitly. An image gallery optimized for stress-free browsing is another UX plus.
Better Experince:
When it comes to websites, images matter because their role is to capture the attention of the visitor. They can convey complex messages in the blink of an eye. Looking at the image of a hotel room, the site visitor can see the décor of the room and some of its amenities without the need of reading lengthy descriptions immediately.
Add Some Personality:
How do you make a photo to become more interesting? By giving it some personality. A good method you can use to give photos more personality is to try and add an individual, or a few individuals to as many of your web images as you possibly can. You can show some of the people working in the brand, and where you can, with your product images also.
Design:
Design The first and most obvious purpose of images in web design is to make the website look good. A website with no images just doesn’t look right.But the trick isn’t just to use any old image and expect people to flock to and adore your website. Choosing the right images is a crucial part of the process. The images you choose need to be high.
Pictures Help in Painting a Clearer Picture:
The adage “a picture paints a thousand words” comes into use here. Website visitors easily get tired of skimming through websites as they read the content present in them. But, when there’s imagery, it helps to offer some context as well as break down the monotony of reading text, especially for people who like to skim through content fast. Images help to grab the attention of a reader and assist them to momentarily move away from the text as they get drawn to the scene depicted by the photo.
Make Proper Use of Stock Photos:
Stock photos come in handy when dealing with city scenes or with general topics. Whenever possible, try and only use professional websites on your blog. This shows that you have given them some thought and that you want potential clients to have a better view of what it is that you intend to sell to them. If they are unavailable, use stock images and ensure that you get to add captions to each image.
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
- src – Specifies the path to the image
- alt – Specifies an alternate text for the image
Syntax:
The required src attribute specifies the path (URL) to the image.
Example:
<img src=”img_chania.jpg” alt=”Flowers in Chania”>
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user find some problem and cannot view it (because of slow network connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
<img src=”img_flower.jpg” alt=”Flowers”>
Width and Height, or Style?
You must resize the dimensions of your image in HTML, if your image does not fit in the layout of the webpage. This is very useful and could be easily achieved with the help of using height and width attributes in the img tag. The default value inside these attributes is in pixels.
The width, height, and style attributes are all valid in HTML.
<img src=”flower.png” alt=”Flower Icon” width=”128″ height=”128″>
<img src=”flower.png” alt=”Flower Icon” style=”width:128px; height:128px;”>
Shape of Images:
You must define the shape of the clickable area, and you can choose one of these values:
Rect– defines a rectangular regionCircle– defines a circular regionPoly– defines a polygonal regionDefault– defines the entire region
HTML Image Tags
| Tag | Description | |
| <img> | Defines an image | |
| <map> |
|
|
| <area> | Defines a clickable area inside an image map | |
| <picture> | Defines a container for multiple image resources |
Changing Image Size in CSS for Responsive Web Design:
As we discussed above, changing height and width values in the HTML does not bring many deals to the responsive aspect of the image in a webpage. Therefore, developers widely opt for CSS to achieve responsive web design on images on their webpage.
Now, let’s unlock more power in achieving responsiveness with the help of CSS.
Using relative units:
If you use relative units, it will make your images fluid, irrespective of the screen size it is viewed in and works the same for all the screen size.
Using media queries
Media Queries are only used when you want to give different sizes to your image when it is displayed in different viewports. For example, you want your image width to be 50% when displayed on a desktop and 70% when displayed on mobile phones. Moreover, media queries are one of the most used ways to make your page responsive.
Max-width property
One other feature in CSS is to use the max-width property. It prevents the image width from becoming larger than the value of max-width specified by you. However, it is not widely accepted for making images responsive, especially when your image is being viewed on a variety of devices.
For an instance, if the size of the image is 600px and the device width is 400px, then the complete image is not visible, due to lack of space.
Object-fit property
After a lot of attempts to make the image responsive, the ultimate attempt to bring all the responsive features under one roof is achieved when the object-fit property is introduced. The object-fit property brings the most amount of control when customizing the CSS for responsiveness.
- Contain: It resizes the image to make it fully visible, keeping the original aspect ratio intact.
- Cover: It resizes the image to cover the entire container, keeping the original aspect ratio constant.
- Fill: The image will be filled in the given area, even if it means breaking the original aspect ratio of the image.
- None: The image will remain as it is and will fill the given area.
Images in Another Folder:
If you have your images in a sub-folder, you must include the folder name in the src attribute:
Example:
<img src=”https://www.__.com/images/images_flower.jpg” alt=”Flower”>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Float left:
Float Right
Center an Image:
To center an image, set left and right margin to auto and make it into a block element:
Example:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
Background Images
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:
Example:
<p style=”background-image: url(‘girl_img.jpg’);”>
You can also specify the background image in the <style> element, in the <head> section OR in CSS file….
Example
Specify the background image in the <style> element:
<style>
p {background-image: url(‘girl_img.jpg’);}
</style>
<table>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>Willims</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetana</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>