Relevant images on a webpage can create a strong first impression. But when we use images incorrectly or excessively it can have a detrimental effect on the audience.

Responsive design and optimisation

In our mobile phone -focused era, it’s vital to have websites that are responsive for mobile devices. Images need to look just as good on a mobile screen as they do on a desktop screen.

A responsive content management system (CMS) will identify your device and present the most suitable design. This ensures the user will have a similar experience no matter the device.

Image sizes and our CMS

As our CMS understands the user’s device, it presents the optimal size for the application.

As you learnt in training, we require you to upload your image as a certain size (2560px x 1700px). When we upload an image to our CMS, it automatically creates multiple versions of that image. We prefer that you use the image set on the ‘Details’ screen. If you need to have multiple images on a webpage, embed the image as a v6 into the content box. (A v6 is the optimal size for a mobile device).

Why image sizes are important

Bad images can hinder your content. A low-resolution, stretched or scaled image can look heavily pixelated and unappealing. Additionally, our templates are designed to fit certain sizes. Using images that don’t fit these sizes may lead to your site looking ‘broken’.

JPEG vs PNG

The two common image types we use are JPEG and PNG.

JPEG– This is the standard image format used for web applications. It is compatible with colour-rich photographs and gradients. Colour information retained when editing images, but compression may result in a lower quality image. Or pixelization. In other words, every time you save a JPEG there is a slight (not noticeable) reduction in quality.

PNG– PNG is becoming more popular. This image format is perfect for logos, graphs and charts. The PNG image format supports more colours, transparency and doesn’t degrade when re-saving. Please ensure PNGs. If you are going to use a PNG image ensure that the image has a solid backgrounds to reduce compatibility and design conflicts.

Image sizing tips and best practices

• Ensure uploaded images are 2560px x 1700px.
• The image size ratio we use is of the 16:9 widescreen ratio. This suits the most screens used today.
• Optimise images for web. Before uploading always run images through a compressor. (Even the smallest amount of compression can significantly decrease disk space and load speeds.)
• Even though the CMS can resize the image, always upload the correct size image.

Have questions about your web editing?

Remember, we’re always here to help! To reach out, please: