How to format Images for your Showit Website

Good images make your website look professional. So, there a a few things you should keep in mind when taking, selecting, and editing images for your website.

File type

The best file types for website images are JPG and PNG.

For logos or icons use vector based images like SVG.

Image name

It is actually important to give your images names, so don’t just upload them as “IMG_204576”! Why? Because of the SEO, the Search Engine Optimisation. Naming your images in a strategic way will help search engines find and rank your website higher (which is definitely what you want because ranking higher means to be found easier by clients!).

So, how do I actually name my images?

• be very descriptive and make it short
• avoid capital letters and use hyphens and underscores
• don’t use signs or symbols (like &, %, !, @, etc.)

Want an example? Let’s take the following image for instance. What about naming it something like “laptop-on-wooden-desk.jpeg” or “open_laptop_on_sideboard.jpeg”:

Image resolution

The images resolution basically means how big your images are displayed on your websites, and you have 2 categories for that on your website:

1. Banners = images that are so big they fill the entire width of the website
2. All other images on your website that are smaller.

Let me show you an example from my own website:

Here, the banner is the big image that spans the entire width, and then there is the small image in front. For you it’s important to know that banners should have a resolution of 2500px width and all other images should be 1500px.

Image size

Huge images slow down your website. Therefore, I recommend having your image size at 500KB or less. However, it’s also important to find the right balance between image size and quality! Don’t make your images too small if that makes you end up with really bad quality images.

I’ll show you 1 way of handling this on a Mac:

1. Double click on your image to open it, then choose TOOLS > SIZE CORRECTION at the top:

As you can see here the width of this image is 5243px, and the image size is 1.6MB, which is pretty huge:

Only ever change the image WIDTH because the hight will adapt automatically. If you do that, as shown in the following image, the overall image size becomes smaller as well. Here, I changed the width to 2500px and the image size now is 493KB (so, under 500KB) which is perfect:

It’s okay to make your image a little smaller or bigger than the recommended 2500 or 1500px, depending on how that effects the overall image size. Sometimes you need to experiment a little. Always test how the image looks on your website and adjust it accordingly.