• Graphic Design

Image Optimization Tips and Tricks

The speed of your website is very important; make a website speedy and you’ll get a reader who sticks around and an online seller who sells more. The website speed enhancement is not about a button to press and voila! It’s complex but the 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. An experienced web designer knows this fact, it is less clear in the case of final clients that update content every day.

Image size and screen resolution

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 A4 paper support.

Avoid loading massive image amount on the same page

Regarding the image gallery, there’s also something you can do. Don’t load thousands of images on the same page, even a 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.

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.

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 are 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?

There’s always a but

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

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 to images. Finding the best export ratio between weight and quality is the key. As Photoshop is applying global compression to images it’s quite complex to have both light and high-quality images.

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 includes several tries with several compression levels.

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

Image compression tools

There is 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.

–          Kraken: also provides a WordPress plugin. It compresses images + resizing. A free trial of 100MB of content optimization is available.

–          TinyPNG: provides a WordPress and Magento plugin.

In conclusion

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

Keep a nice looking and fast website, optimize images!