Online image resizing & optimization

If you have a cluster of amazing pictures then I am sure you would love to share it with your clients on your website. You can make a lovely slideshow, make galleries or simply insert image in a single page or blog. Whatever option you will select, there will be single difficulty that you came across with non-specialist content editor: the image resizing.

Below there, some recommendations for image resizing that will be helpful for you.

Adapt the size to fit your content

Always resize your images according to the size of the content or as per the width of the content. For example, if your content area is limited to 650 pixels wide then, there is not any requirement to size your image outsized than 650 pixels, because your page will display only up to 650 pixels. If the image size property is smaller or bigger than the container the display quality will be deteriorated.

Adapt image resolution for the web

There will not be any impression of “per inch” in any website outline. PPI, that is pixels per inch and DPI, that is dots per inch, is not having any relevance when you edit or resize your picture for any purpose like emailing, blogging or for sharing over social media. Except for print, on screen display, you won't be able to make any differentiation in image feature or quality.

This is especially the case for the PDF, avoid making available PDF for web reading that contains images with resolution higher than 72dpi. In this case the ImageRecycle PDF optimizer can help, optimize a PDF with 300dpi images inside and you can save 98% of the pdf size with a perfect quality to be read on the web. 

The best JPG export quality with ImageRecycle

Using Photoshop, the recommendation for the web is to save your JPEG images with max. 20% of compression. You can also do some testing with diverse JPEG virtues that works finest for you. Applying a global compression is a matter of balance between size and quality.

Now with ImageRecycle image optimization algorithm, the process is quite different. ImageRecycle is detecting the current image compression ratio and, regarding that, optimize the image. Because compression is not applied on the whole image, you'll be genuinely amazed by the test bellow.

Keep in mind: less the original image is compressed, better optimization and size will be.

In the example bellow I have exported 4 jpg images using photoshop at quality level: 60% | 80% | 90% | 100%
Then I've optimized images using ImageRecycle, here's the size result. About the quality the 90/100% are a bit better than the 2 others. The lesson here is: export your jpg images the less compressed as possible, ImageRecycle will do the rest!

Optimize the final images

Depending of the website you're running, the same images can be displayed on different pages with diferent sizes. This is tipically something you'll find on an Ecommerce with Slider, product listing, product details,...
The resizing process is usually done by an online php library like GD. Make sure of the quality and weight of your ORIGINAL vs FINAL user images. Don't trust online libraries and cache generator or you can have problem of quality and size. If your original image is already optimized on your side (by making a fine tune between quality, colors, compression) to save bandwith and page loading, with some web extension resizing libraries, you can lose all that!

The solution:

• Apply optimization on image that is displayed on your final client browser. You can do that manually on each image and for each size or use our API or CMS extension of ImageRecycle to select the folder where your final images are stored. Then run automatic optimization on it.
• Use our resizer for original images. You can save server storage, manipulate faster your images and usually you don't need image with width superior to 1600px on final display

What’s next: HTML5 & the <picture> element

Responsive design techniques that includes media queries is the way for webdesigners to adapt a site layout to a wide range of devices, from desktops to smartphones, and have it consistently look sharp. The problem here is not the display but the performance, this is the desktop image that is displayed and loaded on smartphone and tablet.

The <picture> HTML5 element is trying to solve this problem. The benefit from natively-optimized image resource is loading time - especially important for users on slower mobile internet connections. The <picture> element make a real dynamic resizing possible by just giving an HTML instruction to the browser.

Code excerpt:

The limit at the moment is that this require a very recent chrome version (39) and some JS to work properly. In a near future, with this technology associated with an image optimizer, we can expect the best for the website loading time.