Most of us are conditioned to thinking that bigger is always better, but when it comes to your website this theory is out the window! Fast load speeds, holding our users attention and understanding how website image sizes work, are essential.
If you have a company like Monster Creative to build and manage your website for you, then all the hard work is done. But if you like to play around with your own website, adding images yourself, you need to know a few key things before you dive in. In this blog we explain that bigger isn’t always better and we’ll give you a few basic pointers to understand how image sizes work on your website.
How big should I make my website images?
This is a frequently asked question which has different answers – depending on where the image is placed on the website. Before we get into how many pixels and kilobytes your images should be, let’s understand the meaning of ‘image size’. Unlike billboards, images for web pages don’t need to be high resolution – in fact they need to be just the opposite. But that can’t be right, high res images must be better! We hear you cry.
In the online world we are looking for speed and when it comes to browsing online we have short attention spans! The quickest way to lose the attention of your viewers is to make them wait for a website page to load and this is usually caused by image files being too large – so high res images are out the door.
The smaller the file size the faster it will load and this is good, it keeps the user happy as it doesn’t test their short attention span – which is a critical factor that Google is always measuring.
Full screen images
Often referred to as Hero images or Banner images these are the most important to size correctly as they are usually the largest image on your website. As mentioned earlier, you don’t want to compromise your site load speed – trust us on this one!
From iPads and phones to laptops and desktops, screens are all different sizes. For the purposes of this blog, we’ll work on full screen images and most desktop screens are currently 1920px wide. If the supplied images are bigger than 1920 we can easily resize them to fit, and if the screen is smaller – then the image will shrink to fit the screen and still look good. What doesn’t work well is if the image is smaller than 1920 pixels wide as the image will need to be enlarged to fit the screen and cause a loss of quality. For example an image that is 1650 pixels wide enlarging to 1920 pixels will produce loss of quality and anything less will not look good at all.
That covers off the dimensions, now for the file size. The trick with full screen images is that they need to be compressed to be the smallest possible file size without losing visual quality so they load lightning fast. A good file size for a full screen image would be no more than 200 – 300kb.
With dimensions and file size sorted – you’re almost there. In order to have your image fit all the different screen sizes the image will be cropped according to whichever screen it is being displayed on. This illustrates the need for simple images as cropping will be applied differently for the various screen sizes and you don’t want to lose a critical part of your image.
Other images on your website
All other images on the website will be cropped to fit a specific dimension according to the design, or wireframe, that has been created. These sizes are given careful consideration by web designers to fit within an invisible web grid that work across all different screen sizes and orientations.
One way to find out the actual dimensions of the images is to right click with your mouse and click ‘inspect’. You will need to read through a bit of code which shows the image dimensions. Alternatively, you can right click and ‘save image’ and open this up into a piece of image editing software such as Photoshop or Canva. Or even easier, you can login to the back end of your website, go the Media Library to find the image and view the image dimensions and file size.
Website images DIY
We understand that you like to be able to edit your own images on your website. However, we recommend that when it comes to full screen images you leave it to the experts and contact us to assist with the bigger pictures. Then you can play around with the smaller images and have fun with them!
If you have any questions about website image size or need help whipping your website into shape, get in touch with us friendly Monsters.
