Since 2011, the loading speed of a website has become one of the most influential factors in its search engine rankings. While a slower website is not entirely delisted from the search engine result pages (SERPs), they do however fall in the rankings. Needless to say, if your website has good traffic, then optimizing the loading speed should be a top priority. Despite the fact that internet connections are becoming faster over the years, it’s as important that your website loads as fast as well. One of the factors that can hamper the loading speed of a website, and in turn increase the bounce rate, is images. So today we’ll tell you how you can optimize the content images on your website to make it more responsive!
Compressing Images Needless to say, if you have a website with images, banners, and other web elements, you should compress them whenever and wherever possible. The image editor that you normally use should be able to help you downsize the images. Here is how you can optimize images with popular image editors: 1. Adobe Photoshop – When you are saving an image, use the ‘Save for Web’ in the Save As option, which will automatically create a compressed and web optimized version of the image. More often than not, the image quality will not be compromised as much, which is good for visual elements of your website. 2. Adobe Fireworks – This is another good image editor and in our opinion more aligned with the web image needs. Fireworks have a feature that allows you to have vector and bitmap elements in your single image file. As a result, this significantly maintains the image quality after compression, even better than Photoshop. 3. PicMonkey – Obviously Photoshop and Fireworks are not free and only available for Windows and Mac. That’s where you can use a free image editor like PicMonkey to downsize the photos. Once you’re done editing simply click on save and choose one of the three quality options, namely Roger, Pierce, and Sean, referencing the James Bond actors. 4. ImageMagick – This is a Linux command line tool that allows you to downsize images while maintaining the quality to 80%. The code can also be used in the PHP scripts on your web server.
Optimizing JPEG images with ImageMagick & PHP If the images are already on your website and you need to optimize them, then using the following code will help you make your website more responsive:
1 <?php
2 $dir = '/home/some_directory/'; // the directory with your files
3 $compr = 80; // the quality precentage
4 if ($handle = opendir($dir)) {
5 while (false !== ($file = readdir($handle))) {
6 $path = $dir.$file;
7 if (is_file($path)) {
8 $ext = pathinfo($path, PATHINFO_EXTENSION);
9 if (preg_match('/^(jpg|jpeg)$/i', $ext)) {
10 exec(sprintf('convert %s -quality %d %s', $path, $compr, $path));
11 }
12 }
13 }
14 closedir($handle);
15 }
16 ?>
Simply use the code in the directory where you would want to optimize the code as PHP script and execute. This will not only compress the JPEG files but all other photo elements on your website, significantly improving the responsiveness of your pages. To double check, run a speed test before and after the compression!
Team CometChat
