How to Optimize Images to Speed Up Your Website

High-quality images are one of the key ingredients for an attractive website. It helps you to affirm your websites authenticity, elevate aesthetics and attract more online customers. But while presenting ideas, stories and products with images on your website, the highest concern you may face down the line might be Google ranking or SEO as more images may compromise your website speed and the users that come to your website may leave even before reaching the landing page. In this blog, we will walk you through some ideas about “how to optimize images to speed up your website” to maintain consistent speed and increase website visitors.

Analyse your Website

First, we need to analyze the website to find which images need optimization. For this, we can use 365andUP.com, our free online performance analyzing tool.
The insights from 365andUP will give you an idea about which areas you need to concentrate on improving your website speed. This includes – full-page analysis, performance insights, image optimization, file requests, timings, response codes and more.


After the images that require optimization are found, you need to find the file size of these images and its quality.
If you’re on a Windows PC, right-click on the image file, choose “Properties” and then the “Summary” tab to the get the details of the image.
On a Mac, Ctrl+click on the image file and choose “Get Info.” to get the details.
Once you have collected the required details, you can start working on optimizing it.

Use the right file type: JPEG, GIF or PNG

Preserving the right balance in terms of the quality of the picture and the file size is highly significant while performing optimization.
There are two types of images; Raster images and Vector images.
Raster images are comprised of individual pixels of color.  Whereas Vector images are comprised of shapes, and each shape has its own color. Raster images are best for photos, while vectors are best for logos, illustrations and so on. Moreover, Raster files are categorized into different types: JPG, GIF, and PNG.
So in terms of the file types and compression methods, the following are the most relevant ones:
JPEG – best for photographs or designs with people, places or things in them. It uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
PNG – best for images with transparent backgrounds.  It produces higher quality images but also has a larger file size. It only uses lossless compression.
GIF – best for animated GIFs, only uses 256 Colors and incorporates lossless compression.

“As the saving of images with the above file types involves Lossy and Lossless compression techniques, you need to choose methods that serve best for your website”.

Here is a comparison of common image file types :

Lossy compression means that some data from the original image file is lost. This process is irreversible. When optimizing data such as source code on a page, it’s crucial to ensure that the code isn’t altered by the compression. One piece of bad data and your code can break. For other types of data, such as images or video, you can compress it without losing its meaning.
The biggest advantage of lossy compression is that it significantly reduces the size of the image file, while its major downside is that compression is achieved with a loss in quality.
Lossless compression means that you reduce the size of an image without any quality loss. Usually, this is achieved by removing unnecessary metadata from JPEG and PNG files.
Choosing the right amount of compression depends on many factors according to your need. For high-quality images, you should consider lossless compression. If you need your website to load fast in browsers, you should consider high image optimization.

Resize images to optimize Page Speed and Appearance

Considering the fact that Google uses page load time as a ranking factor in their algorithm, a larger image makes your website certainly slower and you are dropping your position in the ranking. A recent research indicates that at least half of the smartphone users indulging in online shopping, don’t wait more than 3 seconds for an e-commerce site to load.
To resize your images you will have to use some form of a program. For achieving basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to use photo editing software like Adobe Photoshop.
Before resizing your image, make note of the size of your image, resolution and, quality.

Before Compression : 9 MB [easy_media_download url=”https://www.dev.sysally.com/wp-content/uploads/2018/Image3.jpg” text=”Download” width=”300″]

After Compression: 754 KB [easy_media_download url=”https://dev.sysally.com/wp-content/uploads/2018/07/Image3_1.png” text=”Download”]
Size = pixels wide by pixels tall
Resolution = pixels per inch
Quality = amount of compression
With Adobe Photoshop, you can choose different dimensions for editing and the image can be resized, like width, height and resolution of the image. You can also use the “Save for Web” command in it.
When using this command, you can adjust the image file size as low as possible without compromising the image quality. Image downsizing and sharpening are also possible with software like Adobe Photoshop.

• If you are not using Photoshop, you can try plenty of online image resizers. Resizing images with these tools are as simple as inputting/selecting your image file, choosing the appropriate image size/resolution to just a click “Go” and you are all set.
• It’s always recommended to keep your original image somewhere in your computer so that you can experiment with different choices of image size (in pixels or percentage) and compare the output in terms of size and quality. For example, run your image through free programs like TinyPNG or TinyJPG. Both will significantly reduce your file size without interfering with the quality.

Reduce the resolution

Image resolution is typically described in PPI (Pixels Per Inch). The PPI refers to how many pixels are displayed per inch of an image. Images with more resolutions will have more PPI while images with lower resolutions have fewer PPI.
For years we have been practicing that images should be saved with a resolution of 72 PPI for the web. However, this is a common misconception backed by the idea that, resolution or PPI value is the deciding factor of image quality for web images, while originally its the pixel dimensions.
The Adobe Photoshop, as well as many other online image optimizer tools, are available to lower the resolution of your images as per the requirement. For example, photo programs like Pixlr and Canva will automatically reduce your image resolution to a “web-friendly” size (72dpi and 92dpi, respectively).




One thing to be noted here is that though the terms DPI (dots per inch) and PPI (pixels per inch) both describe the resolution (or clarity) of an image, they’re not the same thing. PPI describes the number of square pixels that show up in an inch of digital screen (usually between 67-300). DPI, on the other hand, is a printing term referring to the number of physical dots of ink in a printed document.

Optimize alt attributes carefully

Alt attributes are the text alternative to images when a browser can’t properly render them. They’re also used for web accessibility. the term “alt tag” is a commonly used abbreviation of what’s actually an alt attribute on an img tag.
Here is a complete HTML image tag:
<img src=“image.jpg” alt=“image description” title=“image tooltip”>
Google Image Publishing Guidelines have clearly explained how to use descriptive alt text properly :

“When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. “

Adding appropriate alt attributes that include relevant keywords to the images help your website rank higher on Google search. Better the alt attribute, higher your e-commerce products place in the web search.

WordPress Image Optimization Plugins

If you are using WordPress, you should know that it compresses your images by default. Your JPEG images are compressed at 82 % when WordPress creates the preview images. You can modify the level of compression used by your CMS in the functions.php file.
You can also make use of WP plugins without going for manual optimization, so they automatically resized and refined as the images are uploaded. The most common plugins to do the job are WP Smush, Ewww Image Optimizer, Kraken Image Optimizer, Compress JPEG & PNG Images, Optimus and ShortPixel Image Optimizer.
Here is a comparison of these plugins in terms of the compression method and optimization degree.

Name the image file correctly for SEO

Once you have resized your images with proper dimensions and resolution, you need to carefully rename them before uploading to your website. This helps Google to find your images easily as you have named your images with proper descriptions and keyword-rich file names.
In Google’s Search Engine Optimization Starter Guide it says:
“Like many of the other parts of the page targeted for optimization, filenames and alt text are best when they’re short, but descriptive.”.
Google recommends writing crisp and clear file names, rather than copy-pasting the entire sentences.

Conclusion

Optimizing images by using the above methods can dramatically increase website performance and SEO, and in turn, results in better website traffic and more customers. It should be kept in mind that, a well-optimized page should only take 5 or less second to load. Moreover, Image optimization when done right will also help to reduce disc space usage, so you can conserve more space on your hosting account. Finding the optimal settings for better image optimization requires careful analysis and trial of different methods. It’s always better to do repeated testing and working on various angles of the image processing to achieve complete image optimization.
Thanks for dropping by. Ready for the next blog?
https://dev.sysally.com/blog/cloudflare-experiments-with-hidden-tor-services/