Image Optimization Tips and Tricks

The speed of your website is very important; a speedy website have reader which sticks around and online seller which sells more. The website speed enhancement is not about a button to press and voila! It’s complex but main speed monitoring tools like Pingdom or GTMetrix agreed on the fact that the heavy resource to load are usually images.

Here’s a shortlist that you may consider when building or updating a website.

To begin with

Adapt the image size to fit your content

Display image at its natural size, do not use HTML resize. A scaled image is an image that has been scaled to match the size that it is displayed. It happens usually when you’re using a WYSIWYG editor and you use handles to resize an image.

Seems basic but it can generate a lot of impact regarding loading time. Experienced webdesigner knows this fact, it is less clear in the case of final clients that update content every day.

1

Image size and screen resolution

“Pixel dimensions measure the total number of pixels along an image’s width and height. Resolution is the fineness of detail in a bitmap image and is measured in pixels per inch (ppi). The more pixels per inch, the greater the resolution. Generally, an image with a higher resolution produces a better printed image quality.”

Reference: https://helpx.adobe.com/photoshop/using/image-size-resolution.html

On a web display environment, the resolution has no effect on the image visual quality but it has on image weight.You got 2 images of 250px x 250px loaded on a webpage @72dpi and @ 300dpi, the final screen display will be totally similar. Higher resolution will be interesting only for the print if you resize the image. For example, to print it on an A4 paper support.

Avoid loading massive image amount on the same page

Regarding image gallery, there’s also something you can do. Don’t load thousands of images on the same page, even little thumbnail. Consider using a progressive loading script, Facebook, Flickr all social media are using it. A web page witch uses those scripts will defer the media loading until you scroll down and want to display this media.

2

Image specifications and screen

Raster and vector images

A raster image is made of pixels; a vector image is made of basic geometric shapes.

Commons usage of vector images on the web is for:

-          Logo design

-          Icons

So a raster image will be dependent on resolution, if you to enlarge or reduce a raster image, you’ll shrink pixels.  Vector images do retain appearance regardless of size.

icon-svg

Types of compression algorithms: lossy and lossless

This is also something you can find in the recommendation of Google and in speed testing tools. There’s several scripts to do image compression on the web. We can distinguish:

  • Lossy compression
  • Lossless compression

Lossless and Lossyimage compression terms determine in a file compression if all original data can be recovered when the file is uncompressed. With lossless compression, all of the information can be completely restored after uncompressing. With a Lossy compression some data can be lost because, for example, on a png image, quantization of color reduces the color number. OK, but why would I take the risk to make Lossy compression, even if I have a huge image amount?

3

There’s always a but

And the “but” is that the Lossy compression is far effective than the Lossless one, regarding web display. Check the landscape images bellow before and after a Lossy compression. Quality is similar and images weight goes from 254KB to 39KB. At the opposite, a Lossless compression returns an image of 180KB. For a final usage of an image Lossy compression seems really better.

landscape-compressed OLYMPUS DIGITAL CAMERA

Cropping and resizing images in Photoshop

When you’re building a website from a Photoshop design, one big part of your job is to find the best format and compression to apply on images. Finding the best export ratio between weight and quality is the key. As Photoshop is applying a global compression on images it’s quite complex to have both light and high quality images.

5

Considering 30 images per page creation that includes the content and theme design images, how much time do you spend on image export? The process is quite long and include several tries with several compression levels.

Considering that, you can use a tool to compress final image during the creation process or let a CMS extension doing the job automatically.

Image compression tools

There’s some image compression tool on the market. The 3 above got definitively the most effective algorithms that compress images (and PDF for ImageRecycle).

-          ImageRecycle is offering the largest range of CMS integrations (WordPress, Joomla, Shopify, Magento)and both Lossy and Lossless + resizing + PDF compression. A free trial of 100MB of content optimization is available: https://www.imagerecycle.com

-          Kraken: also provides a WordPress plugin. It compresses images + resizing.A free trial of 100MB of content optimization is available: https://kraken.io

-          TinyPNG: provides a WordPress and Magento plugin. https://tinypng.com

uploader

ImageRecycle online optimizer preview.

In conclusion

Images represent 60-70% of your content, even using advanced browser side & server side cache system the first loading time is mainly based on the page weight. This is even more important on mobile because 3G connectionare usually slower.

Keep a nice looking and fast website, optimize images!

This entry was posted in Illustrations. Bookmark the permalink.