Images are an important element in a website. Apart from making the website look more attractive, images also help website visitors “take a break” before continuing to read text content.
However, displaying images in web design cannot be done haphazardly. Wrong, the website looks less aesthetic. Even worse, displaying the wrong image can affect the technical performance of the website.
In this article, you will find more about using images on websites. Starting from the reasons behind using the right images, various image formats for websites, and how to optimize images on websites.
Why Need the Right Image Format?
The selection of images for websites is often based on aesthetic reasons and marketing strategies. As many as 60% of internet users also admit that they tend to click on search results that have images. That’s why 32% of visual content is preferred as a marketing medium. Compare that to blogs (27%), videos (24%), live videos (9%), or podcasts (1%).
However, you also need to know that image formats also affect website performance. Especially in terms of loading time or what is more familiarly called page load speed.
Format, pixels, and image resolution determine the size of the image. The denser the pixels of an image and the greater the resolution, the larger the image size. Of course large images will take longer to load. That’s why such images can affect the loading speed of a website.
Types of Image Formats for Websites
There are various image formats for websites. Below, we discuss the various image formats that are widely used on websites.
1. Vector
Vector is a type of graphics made from connecting lines or curves. These connections then form various shapes such as polygons or n-sided shapes.
This type of image is very flexible. It will not lose the quality and sharpness of the image, even if it is enlarged several times. Vectors are also very easy to edit and have a fairly small file size. This is certainly very profitable for graphic designers.
However, vectors cannot be used directly on the web. This is because the vector format is not able to maintain consistency across different types of search engines. To be used, vector graphics need to be converted in raster format.
2. Rasters
Raster is a graph made from a collection of squares forming pixels. Unlike vectors, rasters are fairly consistent across search engines. That’s why you should be familiar with derivatives of this image format.
Although they look consistent, raster images need to be optimized for the web. This is because raster images tend to have large file sizes. Something that needs to be avoided if you don’t want website performance to decrease.
3. GIFs
Graphic Interchange Format or GIF (read: JIF) is a fairly popular image format. This format consists of 8-bits per pixel or limited to 256 colors in one image. With limited colors, this format is not suitable for displaying detailed visuals. Instead, this format is often used to display short animations on websites.
4. JPEG/JPG
JPEG or Joint Photographic Experts Group is the most commonly used format. JPEG format images are used by 72.5% of websites worldwide. This image format is capable of displaying various colors and gradients. You could say this format is capable of displaying visual illustrations in sufficient detail.
In addition, the JPEG format is quite popular because it can be compressed. This method is used to reduce file size with little effect on image quality, such as Progressive JPEG. Even so, it is recommended not to use the JPEG format for very detailed images such as typographic designs. Because most likely the details will be blurry.
Another drawback of JPEG is that it cannot contain transparent backgrounds.
5. PNGs
PNG or Portable Network Graphics is lossless compression. This means that even if the image is compressed, the quality remains close to the image before it was compressed. Therefore this format is suitable for displaying detailed images such as logos, typography, screenshots, and so on.
The PNG image format also supports transparent backgrounds. This is suitable for making logos.
How to Optimize Images for Websites
As previously stated, raster format images need to be optimized before being uploaded to the website. This can be done by reducing the resolution of the image or by reducing the file size of the image itself.
If you have already uploaded images without optimization, then you need to double-check which images need to be replaced. For that, you can use GTMetrix or Google PageSpeed Insights. Just enter the website address, wait a moment, and a list of sub-optimal images will appear.
After knowing what images need to be optimized, you can choose one of the following image optimization methods:
1. Microsoft Paint
Microsoft Paint is the most versatile software ever. This program is always on a computer based on the Windows operating system. Even better, because you can use it to optimize the images on your website.
Once you know which images need optimization, all you have to do is open them in the Paint program.
Then, select Resize on the Home tab. Click the pixel option and enter the desired resolution or according to GT Metrix’s recommendations.
After that, upload the changed image to the website to replace the less optimal image.
2. Media Libraries WordPress
Optimizing images in offline software may be considered less efficient. You will need to repeatedly upload to replace images that don’t quite fit. If you agree with this thought, maybe you need to optimize images directly from the Media Library in WordPress.
You just need to open the Media tab on the WordPress Dashboard. Then double click on the desired image and click the Edit Image option below the image.
In this section, you can crop the image as you wish. You do this by clicking the far left button at the top of the image. You can also simply reduce the resolution of the image by entering a number and clicking the Scale button.
You can also set anywhere these changes are displayed: all image sizes, only thumbnails, or all images except thumbnails.
3. Compress images via online
Sometimes, image optimization is not just reducing the image resolution. Even when done, there is still a possibility that the image has a large file size. That means, you need to take an additional step, namely compressing the image.
Images generally have hidden metadata. This metadata contains additional information about the camera’s focus distance, color profile, and the location and time of the shot.
This information is only important for photographers. For other users, this information will only increase the file size without significant effect. Therefore, it is better to delete this metadata.
To remove it, you can use various image compression options available online. However, in terms of effectiveness and user interface we recommend you to use TinyPNG or TinyJPG. Just upload the required images, let the software work for a moment, and you just have to re-download the images that have been optimized.
In order to save time you can upload a maximum of 20 images at a time.
4. Smush Image Compression and Optimization
Smush is a WordPress plugin that makes it easy to optimize images on your website. This plugin is able to optimize images without compromising the quality of the images themselves.
You also don’t have to worry about the pictures you upload on the web. Because with a single activation, this plugin automatically optimizes your images according to the settings. With the Bulk Smush feature, you can also optimize 50 images at once.
Apart from that, Smush is also able to show specific images that need to be optimized. To activate this feature, you can simply shift the Detect and show incorrectly sized images option to blue.
After the feature is active, you can evaluate images on your website live.
This feature will display a yellow notification. If clicked, there are recommendations for image optimization along with their size. You can change the image resolution manually in the ways mentioned earlier.
However, if you have Smush Pro, this plugin will optimize images automatically.
Conclusion
Images are not trivial elements on the website. Inappropriate images can slow down website loading times. As a result, you can lose ranking on search engines, lose visitors in an instant, and even lose transactions from potential customers.
Apart from paying attention to the image format, you also need to optimize the image for maximum results. In principle, there are two ways of image optimization: changing the resolution and compressing the image. You can do both in the various ways that we reviewed above.
Now, there are no more excuses for having a slow and lagging website on the SEO side. Remember, pictures are content.
[hurrytimer id=”247″]
