advertisement
Displaying Graphics - Graphic formatting in Web pages
Introduction
After the release of HTML5 and CSS3 on the market, most web designers have been developing graphics-based web pages. CSS3 has allowed designers to style their Web pages graphically with ease. Currently, HTML5 applications provide amazing experiences using new CSS3 animations. The introduction of mobile applications has allowed users to expand their Web usage to mobile devices. CSS3 has introduced new features specifically for mobile devices.
Graphical Format
There are many graphic formats available; the most commonly used are Joint Photographic Experts Group (JPEG), Graphics Interchange Format (GIF), and Portable Network Graphics (PNG).
The difference between each graphic format depends on the following characteristics:
1. Color Depth:
It is defined by the number of distinct colors that are represented by hardware and software. Color depth is defined by the number of bits per pixel (BPP) and it is also called bit depth. Higher color depth indicates the higher range of colors used.
2. Compression/file size:
Graphic files are large, so images are compressed using various techniques. Compression stores the original images in a reduced number of bytes using an algorithm. This image can be expanded back to its original size using a decompression algorithm. In some compression formats, images with less complexity result in smaller compressed file sizes.
The two types of image file compression algorithms used are as follows:
- Lossless compression - In this algorithm, the file size is reduced but preserves a copy of the original uncompressed image. Lossless compression avoids accumulating stages of re-compression when editing images.
- Lossy compression - In this algorithm, a representation of the original uncompressed image is preserved. The image appears to be a copy of the original image but in actuality, it is not a copy. Lossy compression achieves smaller file sizes when compared with lossless compression. Generally, lossy compression algorithms allow variable compression that comprises image quality for file size.
3. Animation:
Some graphic format consists of a series of frames that are played one after the other giving the impression of animation. Animated graphics are typically used on a Web page to attract visitors' attention.
4. Transparency:
It is very common on the Web to display an image on a Web page that appears directly against the background color of the page. The background color of the Web page shows through the transparent portion of the image. In a transparent image, one and only one color can be hidden. If the color chosen to make it transparent is the same as the background of the inserted image, then an irregularly shaped image appears floating on the page.
Graphic Format for the Web
For Web pages, the use of JPEG and PNG graphics is recommended as it provides maximum compatibility with all devices that might be accessing a Web page. For photos, the use of JPEG graphic format, and for screen-shots and drawings, the use of PNG graphic format is recommended. Both these formats compress the picture information to reduce the download time and increase the downloading speed.
- JPEG - It uses lossy compression which means that the image quality is lost in the process of compressing the image. It is recommended that for continuous tone pictures such as photos JPEG should be used. Most JPEG editors allow the user to specify the amount of detail that the user is prepared to lose. If the quality is reduced, then the loss is visible: JPEG is about half the size of PNG.
- PNG - It uses lossless compression, which means there is no loss of any image detail. PNG was designed for transferring images on the Internet and not for professional-quality print graphics; therefore it does not support non-RGB color spaces such as CMYK. It supports high color and partial transparency using Alpha channels.
Note - An alpha channel is a special type of channel used in graphics software for saving selections. - GIF - It uses lossless compression which means that there is no loss of quality when the image is compressed. The uncompressed image linearly stores its information. Each line of pixels is read from left to right. An interlaced GIF file stores the lines of the image in a different order. Animated graphics are stored in GIF format.
Compatibility and appearance are keywords on the Web. The inserted images must be visible and undistorted when appearing on any recipient's device. The Web designer can make assumptions that the Website will open on a computer that will have a minimum resolution of 800x600 pixels display capability. If a mobile-based Web page has to be created, then the specifications will change.
Graphics Insertion
The IMG element is an empty element, which allows the user to insert an image into a Web page. It allows the insertion of images and diagrams. Commonly used graphic formats that are supported are namely, GIF, JPEG, BITMAP (BMP), and PNG. The <img> tag reserves a space for the image and does not insert the image into the HTML page. It creates a link between the image and the HTML page.
Lists commonly used attributes of IMG elements.
- Src: Specifies the path of an image that is to be displayed.
- height: Specifies the height of an image.
- width: Specifies the width of an image.
How to display an image on a Web page using the IMG element?
The code uses the SRC attribute of the IMG element to insert a JPEG image. The attribute specifies the name of the image and also indicates that the image is present in the same folder where the HTML file is saved. The width and height of the image are set to 225 and 151 pixels respectively by using the width and height attributes. A pixel refers to the smallest dot on the monitor screen.
An image can also be stored in a subfolder of the folder containing the HTML file. In such cases, a reference to the image is made by using the sub-folder name.
To align the image the float style attribute can be used to specify the inline style for the element. This will force the image to be aligned to the left or right side of the screen and wrap the surrounding text around the image. Code Snippet 3 demonstrates the use of the floating style.
Lists the values of the float property in the <img> tag.
- left: The element floats to the left.
- right: The element floats to the right.
- none: The element does not float and is the default value.
- inherit: The element specifies that the value of the float property should be inherited from the parent element.
HTML5 introduced a new <figure> tag. The <figure> tag acts as a container containing the <img> tag. In other words, it is not a replacement for <img> tag but acts as a container into which the <img> tag is placed. The <figure> tag specifies self-contained content, such as illustrations, diagrams, photos, code listings, and so on.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it does not affect the flow of the document.
The use of <figure> tag.
The main advantage of using the <figure> tag is that it allows the user to use the <figcaption> tag along with it. The <figcaption> tag allows the user to add a caption to the image. The caption always appears along with the image even if the image floats in the Website layout.
The use of <figcaption> tag.
The <figure> tag can also assign styles and other attributes to the <figure> element using an external or internal style sheet. A single caption for a group of images can be added using the <figure> tag.
How to assign a single caption to a group of images?
CSS Image Sizing and Padding
The size of an image is specified in pixels. The height and width property sets the height and width of the image respectively. One can specify whether the width and the height will be resized or vice versa.
Note: The height and width property does not include padding, borders, or margins.
CSS code for setting the image height and width properties.
List various values used with the height and width properties.
- auto: The browser calculates the height and is the default value
- length: Defines the length in pixels (px)
- %: Defines the height of the containing block in percent format
- inherit: Specifies that the value of the property should be inherited from the parent element
Padding
The CSS padding property is used to specify the space between the element's border and the element's content. It is used to separate them from the surrounding elements. The background color of the elements affects the padding property. Using separate properties such as top, right, bottom, and left, different padding values can be specified and the padding can be changed separately.
List various values used in the padding property.
- length: This property specifies a fixed value for padding in pixels, pt, em, and so on
- %: This property specifies a value for padding in % of the containing element
The CSS code is used for specifying different padding values for different sides.
In the code, the value for padding was set for all the sides.
Instead of using different padding for different sides, users can use a shorthand property. A shorthand property is one where all the padding properties for different sides are specified in one property. This will result in a shortened code.
The shorthand property for all the padding properties is padding. The property can be used to specify one to four values for each side. Code Snippet 9 demonstrates the use of the shorthand proper for padding.
Where the top padding is 25 px, the right padding is 50 px, the bottom padding is 75 px, and the left padding g is 100 px.
Lists all CSS padding properties.
- padding: The browser calculates the height and is the default value
- padding-bottom: Defines the length in pixels (px)
- padding-left: Defines the height of the containing block in percent format
- padding-right: Specifies that the value of the property should be inherited from the parent element
- padding-top: Sets the top padding of an element
Thumbnail graphics
The speed of loading a page on a website is reduced if high-resolution graphics are used. High-resolution graphics are required to improve the effectiveness of the site and cannot be avoided. Hence, to avoid this issue, thumbnails are used.
A thumbnail is a small image or part of a larger image. Clicking on the thumbnail image will link to the larger original image, which can be viewed and downloaded. Even a hover effect can be given through CSS and JavaScript.
Working with CSS3 Transitions
Interactivity is one of the important aspects of animation. Earlier, a combination of HTML, CSS, and JavaScript was used to animate objects on the Web. In 2007, Apple introduced the CSS transition, which later became a proprietary feature of Safari called CSS Animation. Representatives from Apple and Mozilla began adding the CSS transitions module to the CSS level 3 specification, closely modeled on what Apple had already added to Webkit and Moz.
All browsers do not support CSS3 transitions. Browsers that support CSS3 Transitions are as follows:
- Apple Safari 3.1 and later which requires the prefix -webkit-
- Google Chrome which requires the prefix -webkit-
- Mozilla Firefox 3.7 alpha and later which requires the prefix -MOZ-
- Opera 10.5x and later which requires the prefix -o-
For performing CSS transitions, the two required specifications are as follows:
- CSS property that requires the effect
- Duration of the effect
The effect will start when the specified CSS property changes value. The CSS property changes its value typically when a user moves the mouse over an element. Thus, the user can set the hover for <div> elements.
Lists all the transition properties.
- transition: This is a shorthand property and is used for setting the four transition properties into a single property
- transition-property: Is used for specifying the name of the CSS property for which the transition value is set
- transition-duration: Is used for defining the duration of the transition. The default value is 0
- transition-timing-function: This is used for describing how the speed during a transition will be calculated. The default value is "ease".
- transition-delay: This is used for defining the start of the transition. The default value is 0
advertisement
Conversation
Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!
Join the discussion and share your insights now!
Comments 0