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.
