How to process images for online use and social media

Using too large images on the web is expensive and takes longer to load, while most platforms also have file size limitations.
Therefore, it's nice to process or compress your images for the purpose for which they will be used - here is an overview of tools and other useful information.

‍

Choose the right file format

• JPEG — Best for photos and images with many colors. Provides a good balance between quality and file size.
• WEBP — A modern format that provides good quality with low file size, ideal for web pages.
• AVIF — A newer format that offers even better compression than WEBP, but comes at the cost of being more demanding to load and isn't as well supported yet.

In most cases, I would recommend using WebP on websites and in social media, as it is both smaller than JPG, supports transparency and often looks the same or better.
If quality is a high priority, for example for an image portfolio, then WebP also supports lossless compression, while being a bit less in size than lossless PNG.

Facebook, Instagram and Linkedin, among others, support WebP.

‍

Compression of images

High resolution images can lead to long loading times. Compression reduces file size, often without noticeable loss of quality. Some good tools for this are:

‍

TinyPNG

Allows you to compress images in bulk, to jpg, webp, etc.

‍

Squoosh

The tool I like to use the most. Allows you to compare before-after, specifying in detail how the image will be processed. Processing is done locally on your machine, so you don't have to upload the images to edit them.
‍
The tool also allows you to resize the image — so you don't have to upload the image in 4K when it doesn't have to be that big.

‍

‍

‍

XnConvert

In cases where you have hundreds of images to be processed, preferably in the same way - I like a more advanced tool called XnConvert.
In the program, you can predefine all the settings, and run through all the images in the same thread. Here is a brief instruction manual:

• Add photos by dragging and dropping the files into the program, select images through “add files” or a folder through “add folder”.
• Go to “Actions”tab to add extra treatments such as:
  • Resize — Adjust the width/height of the image proportionally.
  • Pruning — Remove unwanted parts of the image.
  • Color Adjustment — Change contrast, brightness and hues.
  • Watermarking — Add a logo or text to protect your content.

• Go to “Outputs” tab and select the desired format, such as JPEG, PNG or WEBP.

• Adjust quality and compression by changing the quality slider or using presets.
• Click “Convert” to process the images, and they are saved in the selected folder.

‍

Extra: problems with incorrect rotation of photos from iPhone

When taking photos with an iPhone, the rotation information is stored in The EXIF metadata instead of changing the actual pixels in the image.
This can cause images to look correct on Apple devices, but appear sideways or upside down on some websites and in social media.

‍

How to Fix Wrong Rotation with XnConvert

You can use XnConvert to automatically correct the rotation in your photos.

• Go to “Actions” tab and click “Add action”.
• Select “Image” → “Rotate” → “EXIF Orientation”.

• Go to “Outputs” tab and select the desired format (JPEG, PNG, WEBP, etc.).
• Click “Convert” to save the corrected images.

‍

Resize and crop

Many websites and social media sites have maximum sizes or specific requirements for image sizes and aspect ratio. In order for the images to look professional and appear optimally on various platforms, they often have to be correct size, crop and aspect ratio.

I recommend Squoosh for individual images or Xnconvert for bulk - however if you have your own image editing programs, then that's even better! You can use programs like Figma, Canva, Adobe Lightroom/Photoshop, Affinity Photo, Paint, GIMP, etc..

‍

Image Size

When uploading photos online, they should be optimized for both visual quality and loading time. An image that is too large can make a web page slow, while an image that is too small can become pixelated and blurry.

Relevant image sizes for social media:

‍

Aspect Ratio

Aspect ratio describes the relationship between the width and height of an image. For example, means 16:9 that the width is 16 units and the height is 9 units.

In general, you can get away with customizing the images you use to work in multiple situations. For example, an image with a 1:1 ratio and the focus object in the center of the image as well as the use of a margin of safety (air around the object), can be used for most things even if it is automatically cropped in various locations.

Common aspect ratios:

• 1:1 (square) -- can be used on most sites, the facebook feed is often in 1:1. Profile pictures and employee photos are often good in 1:1.
• 3:2 (photography) - often used as a standard in photography and commonly for use on websites. Provides a balanced look combined with text content.
• 4:5 (portrait) It is also used in Facebook and Instagram feeds.
• 16:9 (landscape) — Standard for videos and widescreen images, often suitable as the top image on front pages and in articles.
• 9:16 (vertical format) — Ideal for short videos viewed on mobile - Stories, Reels and TikTok. Also suitable for portrait and employee photos.