Brand & Websites

The Ultimate Guide For Using Images On Your Website

woman working on her freebie for her online business
I'm Susanne!

I’m here to help you turn your passion into profits and build a thriving online business. This is where I share fresh off the press digital marketing tips and tricks, mini trainings and more.

hey there

Get the Free Online Course Starter Kit 

Gimme that

Choosing the right images for your website plays a big role in representing you and your brand and connecting to your target audience. But it’s not only about what you’re showing on the images. There are a few other things to consider if you want to use images on your website correctly.

With web images, you want to find the right balance between file size and resolution. The higher your resolution, the better your image will look, but the larger the file size will be.

Huge image files on your site can slow down your page, which hurts your user experience and your search engine ranking.

But if you use a low-quality image and try to blow it up to be big enough, it will look blurry and pixelated.

So how do you find the right balance? It’s about file size, image size and resolution.

A quick word about different image file types:

JPG / JPEG files can be relatively small in size, but they still look crisp and beautiful. JPGs support up to 16.7 million colors, which makes them the right choice for most images and photographs.

PNG files are used if you need a transparent background. For example you want to show a red circle on top of a background photo. Since an image can’t be round, you’ll need to save the image with the red circle with a transparent background. PNG files are larger than jpegs because they contain more information and are lossless, so you only use them were necessary.

Gif images are used for creating very low resolution files for your website. You typically use a gif for simple logos, icons, or symbols. Using the gif-format for photos is not recommended, because gifs are limited to 256 colors.

What’s the file size about?

File size is the number of bytes the file takes up on your computer. It can be confusing because we have kilobytes, megabytes and gigabytes: 1024 kilobytes (KB) are 1 megabyte (MB) and 1024 megabytes are 1 gigabyte (GB).

A 15MB (megabyte) photo is a huge file. A 125KB (kilobyte) file size is much more reasonable.

File size is the factor that can slow your website way down. If your file size is very large, it’s an indicator that either your image size is too large or your resolution is too high.

What’s the image size?

The measurement of the height and width of the image makes up the image size. On the web images are measured in pixels. For example an image with the size 800 x 250 pixel is 800 pixel wide and 250 pixel high.

Your images should always be uploaded in the correct size that is set for display. For example if your website theme defines that the image of the header on your homepage should be 800 pixel wide and 300 pixel high, don’t upload a smaller or bigger image if you want best results. A smaller image will look blurry and a bigger image will have a bigger file size than necessary, which will slow down your website.

What’s image resolution?

Resolution is the quality or density of an image, measured in dots per inch (dpi). A high resolution will increase the file size.

Most computer monitors won’t display more than 72dpi, so there’s no need to save your images in a higher resolution. This is different to print, where you need images in a higher resolution (normally 300dpi).

When a design program has the option to “save for web”, it means saving the file at a low, web-friendly resolution.

When you export a picture as a JPG you can normally choose its quality in a 1-100 scale. For web use something between 70% and 80%.

You should always aim for showing good quality images, even if the file size is a bit higher, because the images will reflect on your brand in a big way. Blurry small images don’t say high quality teaching or retreats. Don’t be afraid to show big images, but play around with different resolutions and make sure that the image size is correct.

The golden rules for web images:

  • Large images or full-screen background images should be between 500kb and 1MB max.
  • Most other small web graphics should be 300KB or less.
  • If you have the option, always “save for web” which will give your image a web-friendly resolution or save JPGs with a quality between 70% and 80%.
  • You can make a large image smaller, but it’s very hard to successfully make a small image bigger.
  • Never use a resolution higher than 72dpi.

I hope these tips help you using images for your website correctly. Don’t forget that what you show on your images is still what’s most important though!

Let me design your Showit website for you! Only a few spots open.

This is for coaches and service providers eager to boost their online presence! Let’s create a stunning & high-converting website, solidify your expert status, and attract those dream clients who are just waiting to connect with you.

>>> Click here to learn more

 

 

PERIMENOPAUSAL. DOG MOM. GERMAN LIVING IN SPAIN.

Hi, I'm Susanne.

I’m here to help yoga teachers and health & wellness coaches package their brilliance into digital offers and build a successful online business.

I went from working in digital advertising to become a yoga teacher, move to Bali and build my online business that allows me to work from anywhere in the world. Now, my mission is to help you do the same. I want to empower you to build a purposeful, profitable online business and create your unique legacy.

I’m also obsessed with my little terrier Luna, love traveling in my campervan, and am happiest when I can wear yoga pants all day long. 

Learn more

START LEARNIN'

If you’re a daring + driven  entrepreneur, check out my online programs and get your learnin’ on!

ready for more

Package Your Brilliance into an Online Course

Get my ultimate online course starter kit that shows you step-by-step how to create your first online course.

Free DOWNLOAD

OUH I NEED THIS

Get my Financial Planning Spreadsheet 

Plan your yearly and monthly budget like a pro, track your expenses, calculate your income for each of your offers and figure out how much you need to sell at what price point to reach your income goals!

SPREADSHEET

GIVE IT TO ME