Web Graphics are a double-edged sword, as much as they grab user’s attention and make our website more attractive, they also make our website slower. Google when they see huge size for images starts ranking our website lower because the images are just too big and Google can predict people may not like it. There must be a fine balance between the speed of the website, and the use of web graphics in the website to make it attractive.
In this article, we will discuss how to optimize web graphics so that your websites not only look wonderful, they also load up super fast and get ranked higher with Google SEO (Search Engine Optimization).
Optimising Web Graphics
What are Web Graphics?
All the visual elements that are present as a part of design in Websites or Web applications are considered as Web Graphics. When it comes to Web graphics, a smaller image size is better, that is because people don’t like waiting for an image to load for seconds when they come to your website. There is a ton of research about its website that loads slower actually loses sales and also has a poor rank in Google’s search engine.
If your website has larger size images, Google will rank your website lower because your images are just too big and Google can predict people may not like this. Therefore as a designer, we need to find the perfect sweet spot between the smallest file size possible and the best quality.
How to Optimize Web Graphics in Web Design?
- Pick the right file format: The first question that you need to ask yourself when you export your graphics is – What is the right file format for the image? You have to weigh the pros and cons of all the image formats and then come up with an answer. For Example, JPEG is a good option because most of the images on the web are JPEGs. JPEGs are a better choice when you want to use images that are using the whole area of the image with colorful pixels.
- Use PNGs for transparency: PNG besides color of pixel also supports transparency which means that in PNGs the pixels around the picture are actually transparent so if the image is not rectangular, then it looks better when we use transparency. Hence we can use PNGs file format at this case.
- Use Vectors for smallest size: SVGs which is actually a vector format is only a few lines of code that describes the where the shape is and the benefit of using this format is that it is the smallest size file format because it has no detailed pixels, it is just a shape with colors. Also it is infinitely scalable because vectors unlike pixels are just points in space and you can use that to scale it up. Therefore, you can use Vectors for logos and images with less details.
- Use WebP for high compression: WebP is a format that was developed a couple of years ago by Google and it is basically a higher end compression for JPEG. This means that you can get the same high quality of a good JPEG but on a much much smaller size. The problem that might arise with WebP is that it might not be supported by some application since it is a newer technology relative to others.
- Exporting images with the right size: The next way to optimize Web Graphics in Web Design is to export with the right size. With SVG Exporting images with the right size doesn’t matter at all because SVGs remain the same size irrespective the size of the vector. But for exporting JPEGs and PNGs we need to consider what is the size of the image and how many pixels are we exporting. Because more pixels means a bigger file size.
- Create different size images for different screen size: When people see your website on mobile, the images are much smaller. Because even if you had a high resolution image on a desktop, there is no use for loading that image to a screen which is about 700 pixels. So what you can do is have different sizes of images for your mobile, this gives better mobile experience as well as makes the website more optimized for a better rank in Google SEO.
Best Practices for Optimising Web Graphics
-
Recommended file sizes for web graphics:
- Large images should be 1 Megabytes or less
- Background images should be about 1500–2500 pixels wide
- Other smaller web graphics should be 300 Kilobytes or less
- Thumbnails you should about 165 x 165 pixels
- Add relevant name to image files: Make sure that the names of the image files are related to the image as well as to the topic of your website. This really matters in terms of Google SEO, so if you have a dog in the image, give the name to the image file as dog.png or dog.jpg.
- Use Alt Tags in the website: Alt tags are helpful in case the image doesn’t load as well as they help in getting a better rank in Google SEO. Make sure that to have an Alternative text to the image and that should be related to the image and the topic of the website.
- Compress images after exporting: One good method of having the same image but more optimized is by compressing it. Make sure to compress your images in order to optimize them but also remember that too much compression affects the quality of the image.
Conclusion
Web Graphics are a double-edged sword, as much as they grab user’s attention and makes our website more attractive, they also make our website slower. This makes it important for you as a web designer to export your images and optimize them to make sure that they are small enough but also look wonderful. Make sure to follow the points we discussed in the article when you design Web Graphics for your next website.