The age-old phrase “a picture paints a thousand words” is often used in marketing ventures to illustrate the significance of an image in selling a product successfully. This is because, the customers rely a lot on the product illustrations (to understand the quality, color and other specifications of a product) over written content. You website-visit-rates can rise or fall drastically, depending on the quality of its images. So, it goes without saying that the images you provide in your website should be of high resolution and crisp. However, there’s a catch.
Improperly exported low-quality images tend to look drab on a webpage and images of extremely high-quality cause a site to load slowly and hence, in both cases, you end up losing engagement from your users. Research shows that 53% of people leave a mobile site if the site takes more than 3seconds to load. Websites that take too long to load also tend to suffer from high bounce rates which ultimately lead to Google hating your website. This, in turn, affects your SEO rankings to a great extent.
So as you see, to increase your conversation rates, and maintain your SEO ranks along with the performance of the website, it will be of utmost importance to decrease your page load time. As images account for a significant portion of a websites load time. It becomes essential to find a perfect balance between the image quality and image file size to improve the websites load time and in turn, improve the SEO.
There are certain tricks and techniques you can use to optimize your images for the web so that those blank spaces and slow-loading high definition photographs don’t make your visitors turn away in frustration. Take a look at these five top-notch ways to optimize your images to make sure every graphic is beautiful, crisp and pleasing to the eyes.
1. Save images in proper colour space
Computers use two colour spaces to display images; RGB and CMYK. RGB, which stands for Red, Green and Blue is the default colors space used by digital devices like camera and computer. Besides this, you will also come across another color profile CMYK (that stands for cyan, magenta, yellow and black) which is generally used in printers. If you want to use these images for your website, it will be essential to convert the colors to RGB in order to make the image look vivid and bright.
You can use software like Illustrator or Adobe Photoshop to convert the CMYK image to RGB. For example, if you have Photoshop installed on your system, just go the “Image” option in your menu bar and select the dropdown “Mode” and opt for RGB color. Then visit the File section to Save the file. You will instantly notice the colors appear to be more glossy and vibrant once you finish editing.
2. Compress the file sizes
Image quality is largely dependent on factors such as the final file size and compression settings. Moreover, you will also need to ensure that the images are sharp and not pixelated. While saving the image form the web, make sure file size is less than 2MB (2048 kilobytes) in order to maintain fast page loading speeds.
With the correct compression settings, you will be able to achieve good image quality along with optimal file size. Generally, to avoid pixelation, you can try to save the file with an image compression level of 70-80% or the individual points of color. However, you must keep in mind that the amount of compression will vary on a number of factors that involve the original image’s format and file size. You can use free tools like Imagify if you want to compress the file size further.
3. Use the correct file format
There are mainly four major file types that you can use to save the images and graphics form the web: PNG, GIF, JPG, and SVG. Each of these formats has its drawbacks, benefits and intended use case, and you will need to know the specific image type before you start to format those pictures.
Firstly, you must check whether your file is a raster or vector image and save the file accordingly. Raster images are generally captured with a camera or scanners that are created with pixel-based programs. These types of images have a finite number of pixels and quickly lose their quality when you try to scale it to a larger format. PNG, JPEG and JPG formats best suited for raster images.
On the other hand, Vector graphics are created with the vector software and can be infinitely sized (that too without losing the quality). SVG and GIF file formats are best suited for vector images, while it can also be saved as a JPG or PNG. However, in the latter case, you might lose the ability to scale your graphic infinitely.
4. Export multiple image sizes
As mobile devices have higher resolution screens than their typical desktop computer counterparts, users mostly prefer using mobile devices to view digital content. These high-density displays with HiDPI, Retina technology have more than 200 pixels per inch (PPI) when the standard for most desktop computers is 72 PPI. If someone views a 72 PPI image on their mobile device instead of viewing it in a computer, it will not look as crisp as compared to an image saved out with more pixels.
Here’s an effective way of ensuring your picture quality is apt for mobile as well as desktop browsers:
Export your image in @2x and @3x scales, i.e. the revised version of your image will be 2x (200%) or 3x (300%)
the original size. This will allow the user mobile web browser to automatically display the image in 2x or 3x of the original size in the same space.
5. Use alt text to describe the image source
Alt texts, also known as alternative texts or alt attributes, are short phrases written in HTML codes that give information about the source of the image. Google places the alt-text-images at a relatively high value as these images not only serve the basic purpose of pleasing your audience but also as it plays a vital part in your websites SEO optimizations. This is because you get the opportunity to include texts and phrases with the SEO keywords to obtain a high rank in Google. For example, an HTML code without alt text appears as, https://pexels.com/photo/dog
whereas when alt text is included, it appears as
<img src=http://pexels.com/photo/dog.jpg alt=“dog-play-in-the-stairway”>
These alt texts are also useful for website readers with visual impairments. The screen reader reads aloud these alt texts and explains what the image is about as well as the function of the image on the page. It also helps the users with slow internet connections to understand the context of the photograph and reduces your bounce rates in the process.
There are also various online platforms like compressPNG.com, Smush.it, webresizer.com etc. that you can use to optimize your website images without compromising too much on the image quality.
Seems to be a lot of hassle, why bother?
Well, as discussed earlier, the impact of large images on the websites loading time will be detrimental to your its growth. And besides that, you need to take into account the following repercussions as well,
Google will penalize the data-hungry, slow websites, giving them a lower priority in SERP results.
Large images take up a significant amount of server space which will eventually cost you more money.
The bigger your webpage is the more data your users will require to view and add to your bounce rates (as the user with restricted mobile data allowance will be skeptical about staying on your site for too long)
The way I perceive it, image optimization is mainly about respecting your website users. Your audience is bound to appreciate a slick and speedy experience and will be more likely to return to your page time and again. And of course, it will be appreciated by Google as the quick loading, mobile-friendly sites are highly favored by the search engines.
Needless to say, your level of compression will keep differing according to the complexity of your images. This blog aims to provide you with the basic strategies so that you can perform the essential optimizations in minimal time. However, there a whole lot of information available on the internet and in case you want to enhance your knowledge just type in your search engine “image optimization for the web without compromising on quality” and dive right in.
