Size Matters

Size Matters

No not what you were thinking - in the world of online images size really does matter. If you have ever published an image and thought ‘That just doesn't look like it was on my screen’ it probably means you have gotten one of the size dimensions wrong.

When creating and preparing images for publishing online there are three main size considerations that need to taken into account. These are dimensions, file size and pixel density and finally for the pros there is the file format to think about.

In this post we’ll explain all three and why they matter and how Laazy can solve all your (image) size insecurities.

Dimensions

This is the easiest of the sizes that you need to think about, we are talking about the height and width of an image. The combination of the two are called the aspect ratio - usually notated by a ratio width:height (e.g. 4:3 or 16:9).

When you are preparing an image to show the world it is usually going into a pre-defined place with a pre-defined size. Any image you provide needs to conform to this size, if you have an incorrect ratio then it will either get squashed to fit making the image look weird or cropped to fit the box which could result in parts of the image that you wanted being chopped out.

Alternatively if you get the ratio right but the size wrong, even though it might look right it still carries unintended negative side effects.

The most common problem is getting the size too big, in this case you’ll be wasting pixels as it’ll be resized to fix he box it is displayed in. This makes the image bigger than it needs to be and by extension slows the loading of the page as the visitor needs to wait for the images to load (particularly important on mobile).

Even worse is the problem of getting the image size too small, this will stretch the image to fit the box distorting the image in the process.

Laazy has a number of ways to resize and crop images to the desired size. The main actions used for this process are the Aspect Ratio and Resize actions. The easiest and safest way to do this is to set the Aspect ratio first, then resizing the image by width or height - this will ensure the image is exactly the right size you want and depending on your needs you can specify how extra parts of the image are handled via the crop mode - even focusing on a particular part of the image using by throwing the focal point action in the mix.

Girth, erm file size

With images and the internet; time literally is money, if your pages take too long to load people will get frustrated and go elsewhere costing you real money (or likes). It matters how big your files are because before an image can be displayed to a visitor it must first be downloaded.

In the first section we explained how you can stop wasting pixels by making your image dimensions bigger than you need by getting the size right for the target - but there is more that can be done. Images and photos contain a lot of information that isn’t required for display and can’t be seen by visitors anyways. If you keep this information then you are throwing bandwidth down the drain.

But don’t worry there is an easy fix, just throw one of our Compress actions into your pipeline after a save as action and it’ll compress your image as small as it can go without losing fidelity.

Pixel density

Most people know about the first two size categories - dimensions (width and height) and file size but not everyone knows about the third type, pixel density or commonly referred to as resolution. Back in the olden days of the internet there was only one to worry about which was the trusty old 72 DPI (or dots per inch), this is the defacto resolution.

All browsers support 72dpi so if you don’t know what you are looking for that is usually the answer. However now with higher density screens on newer devices the old 72dpi image just won’t cut it and will look blurry. Most modern app platforms (HTML5, iOS & Android) and some content platforms provide adaptive image capability which is a fancy way of saying multiple images for the same thing and the device tells it what it can handle.

This can be resolved by providing images in multiple resolutions, always providing the appropriate size for that the device can handle. Laazy split pipelines are perfect for this by taking one image and resizing to specific sizes and dimensions, then naming the files with the special names your platform might be expecting (often suffixing the files with @2x & @3x for 3 & three times resolutions).

Bonus points, file format

Those are the main three considerations when it comes to sizing images correctly but there is a final one that is more subjective. That is the file format that is used. Depending on the image type, some formats are more appropriate for others. User the Laazy Save As action to save the image for the one that suits your needs best;

  • PNG - This has become the default and a is a good all round performer for web images.
  • GIF - Good for illustrations or if you need transparency or animation.
  • JPG - The old workhorse is still used for photos and complex images, but does not support transparency.
  • SVG - Vector based format (not supported in Laazy).
  • WEBP - New kid on the block, support is currently not wide enough to recommend using.

So there you have it. I hope this help demistify the process of sizing images for websites (or perhasp made you aware of just how much there is to consider).

Be Laazy.