Graphic means any visual element represented by the computer. Web Graphics are those graphics that are used in a website. These graphics can be photos, videos, logos, banners, etc. Humans are more attracted to visual elements rather than textual elements. So, to make a website more appealing and user-friendly addition of web graphics is a necessity.
Types of Graphics on the Web
2D Graphics
2D Graphics are commonly used animations on the websites. These are very simple looking and easy to use for the users. The 2D image can be animated only in two directions: horizontal and vertical. On those axes the objects and characters are still capable of moving parallelly, but they can only be moved by X and Y axes in your animation. So, you can not add depth to them.
- Canvas: The Canvas API allows graphics to be drawn by using JavaScript and HTML <canvas> element. It is used in animation, gaming graphics, data visualization, photo editing, and real-time video processing.
- SVG: SVG stands for Scalable Vector Graphics. It is an XML-based vector image format for defining two-dimensional graphics which supports interactivity and animation.
3D Graphics
3D Graphics are different from 2D graphics and the main difference is that 3D Graphics have Z-axis which means you can animate the object horizontally and vertically as well as forwrard and backward. By using 3D Graphics you can convert square to cube, circle to cylinder etc. which makes them look more realistic than the alternative.
- WebGL: WebGL (Web Graphics Library) is a rasterization API for rendering 2D and 3D graphics in a web browser. WebGL uses hardware acceleration which enables developers the ability to build high-performance real-time rendering interactive graphics in the web browser.
Video Graphics
Video Graphics are those visual effects that have elements of motion to them. Video Graphics are really important in animated films, UI/UX Designs, infographics and many other visual media platforms. Video graphics are a way to communicate with the audience, which adds depth to your narrative.
- Using HTML audio and video: The “audio” and “video” tags are inline elements that are used to embed sound files and video files into a web page.
- WebRTC: WebRTC stands for Web Real-Time Communication. WebRTC API allows the secure access to the input peripherals such as microphones and webcams on a device to share or exchange the media-data, real-time data with a remote device in a peer-to-peer manner.
Elements of Web Graphics
There are many types of Web Graphics but let us understand only the most used Web Graphics.
- Pictures: Pictures can convey information much faster and effectively than text as the average person responds far better to visual information compared to just plain text. Pictures are not only more effortless to recognize and process than words but also easier to recall. There are many image formats such as jpg/jpeg, png, etc.
- Videos: Video can be part of the website UI or be used to convey additional information that can’t be conveyed using text or images. But videos can slow down the site and take much more time to load than any other graphic so it’s better to embed video from other platforms. Some video formats are mkv, mp4, etc.
- Animations: We can use animations such as GIF in the website or code directly in the site using CSS, JSS or any other technology. Animation can be very helpful to boost the UI look and feel. Clever use of animation make the user experience must better and worth remembering. Micro interactions are commonly used animation in the websites.
- SVG (Scalable Vector Graphics) : One of the most popular format used in the website to display icon or any scalable graphics. It is because the width and height of the graphic can be change to any size which is good for a responsive design. If we want to make our page responsive then raster images should be changes to SVG if possible.
- Logo: A SVG or image used in the sites to represent brand identity. A logo if very important for the site because the user can forget the site name or URL but most of the time user will remember the logo. It better to create a logo that matches the site name or brand name.
Benefits of Using Web Graphics
Web Graphics use in not only limited to websites visual appeal but it is used for many other reasons:
- Brand Image: We can use logo, banner, videos to increase the brand identify and its goals. Graphics can be used to sell the brands products. We always want user to revisit our website so incepting the brand logo helps a lot. Wherever it is appropriate we must use brand logo and imagery.
- User Interactions: A button designed to look different is a guaranteed method to attract attention. User can also get the idea which button is what based on the looks thus increasing instant response from the user. A good looking button or micro interactions always provide a good user experience but overwhelming amount of it can cause repercussions.
- SEO (Search Engine Optimization) : A site with moderate use of graphics can result in high page rank and can bring more traffic to the page. Nowadays crawlers are design to parse the pages as closely as a normal users would so, adding graphics increases the chance to show up in the search results.
- Promotion: We can use graphics to promote products or put advertisement in the site. Most websites are filled with adds and these add maximum of the time used pictures to advertise. These pictorial adds are easy to load and very easily catch the attention of the users.
- Scalable: Some graphics are device independent and can be use in site used in different devices with different width and height. For a responsive design its better to use SVG as it is scalable and take up very less size when compare to a raster image of same width and height.
How to use Web Graphics?
We must judiciously use graphics in our site and follow these steps:
- Less File Size: The graphics used in the site must not have a huge file size as it can take time to load and can degrade the user experience. There are many users who does not have proper internet connection so, to make out site universal its better to make the overall website download size as less as possible.
- Color: The color of the graphics should have good contrast and match with the brand colors and design. Good color choice is very important for a site to be successful and the graphics must look good for both light, dark theme or any theme provided by the site. The text color in the graphic can match the sites accent color like green in GFG.
- Design: The graphic design must be user-friendly and if there is text in the graphic than it must be readable. The design of the graphic with respect to typography, font size, weight, background color all must give the same feels as the site. The design of the graphic must be cleverly and judiciously selected.
- Layout: The graphic should fit well with the site layout and its size should also change with respect to different devices. Its better to use scalable graphic for responsive sites. Sometime pictures and videos size may not look good when width or height is increased or decreased beyond a limit so, its better to first decide the quality and resolution of the graphic.
- Accessibility: We must also provide alternative text for images and maintain the site accessibility. The graphic must be interactable or understood but users using accessibility tools such as screen readers. We should have descriptive file names, consider proper color contrast and provide transcripts or captions for videos in least English language to further enhance accessibility.
Example
We can see the GFG site containing various Graphics. The three sections to read, practice and learn are easily recognized and understandable because of the picture used. A banner picture for campus training is also used with the GFG logo which both convey the required information and increases brand identity. All these web graphics creates a good looking UI which is very appealing for the user and also the user can directly look at the pictures and know what is happening which leads to fast interaction good user experience.
Conclusion
To conclude, we can say that web graphics play a big role in building a website. Humans are more attracted to visual elements rather than textual elements. So, to make a website more appealing and user-friendly addition of web graphics is a necessity. There are many types of web graphics we can use in a website but always use elements according to the users need.