Choosing the right images on the internet for your site can be fundamental to your audience in how it represents your brand. However, there is much more than just image content that needs to be considered when making sure your site images look professional and are SEO friendly.  Other factors such as image resolution, image size, and file size all play a vital role.

Image File Types

Common image file types you may often see online can include:

• JPEG
• JPG
• PNG
• Gifs

A benefit of JPG and JPEG files is that although they are smaller in size, they are often very crisp and high quality. JPG’s can support a wide variety of colours, roughly 16.7 million, making them ideal for most images and photographs. 

A benefit of JPG and JPEG files is that although they are smaller in size, they are often very crisp and high quality. JPG’s can support a wide variety of colours, roughly 16.7 million, making them ideal for most images and photographs. 

On the other end of the spectrum, gifs can generally be used for lower resolution files such as logos, symbols and icons. However, unlike JPG’s, gifs are not usually recommended for photos as they support a considerably smaller range of colours (256 colours). 

PNG files may be used when you require a  transparent background. PNG files are lossless and are larger as they contain a lot more information. As a result of this, they should only be used when necessary in order to not slow down loading times.

File Sizes for Images on the Internet

File size refers to the measurement of how much data a computer file contains or the amount of storage it consumes.

 The file size is measured in bytes which can be split into the following categories:

• Kilobytes
• Megabytes
• gigabytes

In short, 1024 kilobytes (KB) are the same as 1 megabyte (MB) and 1024 megabytes are the same as 1 gigabyte (GB).

The file size is an important factor to be aware of as large images can often slow down your website. Additionally, if your image resolution is too high, this can slow your site to a considerable degree also.

Image Resolution 

Image resolution refers to the detail that an image holds. This quality and density of images on the internet can have a huge implication on site speed as a high-resolution image will increase the file size. 

Image resolution is measured in dots per inch (or dpi for short). When uploading images online it is important to note that most computers will not show more than 72dpi. Therefore, it would be unnecessary to save images in a higher resolution than this. 

When using design programs, you may stumble across an option to “save for web”. This feature will allow you to save a high-quality image file at a lower, more web-friendly resolution. 

However, that being said, you should always try to use high-quality images where possible as using lower quality, blurry images will have a negative impact on the perception of your brand. One way to do this is to use larger sized images where possible but play around with the resolution to find the best fit. 

Image Size

Image size refers to the image height and width. Image size online is measured in Pixels. When considering image size it is important to remember to properly upload images in the correct size fit for its display. For example, an image space on your site might be set up to be 800 pixels horizontally by 300 vertically. In this scenario, an image that is too small will look blurry whereas a picture that is too large will have too large a file size which can contribute to your site page running slowly. 

Ratios

The dimensions for website images should be chosen based on ratios in addition to their size in pixels. 

Common aspect ratios:

• 1:1 square – This ratio is perfect for text images as well as Instagram and sidebar ad images. These are most commonly sized at around 1080 to 1080px. 
• 3:2 rectangle – These are often used for images in mobile formats or print. These are sized at 1080 x 720px.
• 16:9 panoramic – This ratio is common for standard widescreen sized images. It is commonly used for widescreen TVs. Landscape pictures and presentations. 
• 4:3 rectangle- This ratio is similar to that of the 3.2 rectangles but slightly taller. 
• 1:91:1 landscape ratio – This ratio is commonly used within different social media platforms, usually in the place of a “featured image”.

Favicons

Favicons are easily forgotten when considering images on the internet. A favicon is a little icon that you can see on your browser tabs as well as on your bookmarks. They are often saved as “.ico” or “.png” type files. The ratio used for a favicon image is a 1:1 ratio (square).  The minimum size for a favicon image is 16×16 px up to 32x32px.

Logos

Many sites may include their logo within the top navigation bar. For horizontal logos, it is commonly recommended that you use a ratio of 3:2 or 250 x 100px. Furthermore, for square logos, a ratio of 1:1  or 160 x 160 px may be appropriate.

Hero images 

A hero image refers to large web banner images that are often prominently positioned on a webpage. They will often likely have a ratio of 16:9 provided that you intend to use the entire height of the browser it is displayed on. Within this ratio, the image width will vary between 1500px  to 2560px. The most common width in use is 1920px. 

Hero Image Size – Mobile 

Some websites, if responsive, will resize images in order to fit mobile devices in addition to any other device it is shown on. However, if you use really large images, it may be best practice to display alternative images to be shown when someone visits your site on a smaller screen. This is also recommended where videos are used within hero sections. This method can also be helpful as it will help the page load time for devices using data over wifi. Additionally, it will help save bandwidth for mobile users. 

Ratios to consider for mobile header images on the internet include: 

• Vertical images – 4:5 ratio – 1080 x1350 px
• Square images – 1:1 ratio – 1080 x 1080px 
• Rectangle images – 1:91:1 ratio – 1080 x 608px

The Impact of Image Size on Load Time

A few factors that can impact your webpage load times include:

• Browser
• Webpage design
• Your website hosting provider
• The device you are operating from 

According to Google’s latest WebCore vitals, your site should take no longer than 2.5 seconds to load according to the LCP guidelines. Any webpage that takes longer than this might cause you to lose customers, sales and conversions. 

Want to find out more about how you can get more conversion on your website? read this article. 

Image Names

When you upload images on the internet you should ensure to choose a suitable file name. This will help you improve your SEO ranking for image search results. The best practice here is to choose a relevant keyword for the topic that you are covering on the page. For example, if you are writing about upcoming music concerts, a suitable keyword might be “music concerts 2021”. If possible, you should always avoid underscores. For example, “music concerts_2021”.

Image Alt Tags

Search engines such as Google will use web crawlers in order to index your site. A well-indexed website can be really advantageous for SEO rankings. Images on your site must be indexed along with everything else and image alt tags will aid this process. Another benefit of image alt tags is that any visibly impaired people who go onto your site will have these image alt tags read out to them by screen readers. 

When building your site you may consider using a video within your hero section. This can be a really eye-catching way of visualizing your brand to customers who visit your site. There are a few things you should keep in mind though when making this decision. 

Compress Your Images!

It is always important before you upload images on the internet that you compress them. There are plenty of free image compression sites available online and they will help reduce the file size of PNGs and JPGs. By compressing your images you will reduce the file size of your images but without any noticeable effect on the image quality. As a general rule of thumb, you should compress your images under 100KB or 200KB for full-width images. 

Edit Your Images!

Editing images online is a crucial step in optimizing them for the internet. Before you upload images, consider using online tools for editing to enhance their quality and ensure they meet the specific requirements of your website. These tools allow you to adjust factors such as brightness, contrast, and colour balance. Additionally, you can crop images to the desired dimensions and add overlays or filters to create a more visually appealing result.

Video Backgrounds

• Background videos should be short (no longer than 20 seconds)
• You should aim to video file size to less than 6MB.
• Avoid audio as this could aggravate customers and increase your file size which may affect page speed.
• Ensure there is enough contrast between the image colour and text. This will help by making the text easier to read. One way to do this is to use colour overlays. 
• Consider using a lazy load for images below the fold of your site. This will allow for the main content of your page to load quicker which will be useful in aiding SEO rankings.

If you want to learn more, get in contact here or book into a social clinic now!

[code_snippet id=6]