Table of Contents
What Size Image For Website?
Image size for websites is a broad and nuanced topic. There are several aspects to comprehend and consider, and this is not a subject where a simple, one-size-fits-all solution would serve. However, if you want to learn more about how pictures function with your Avada website and receive a comprehensive understanding of the forces at work, continue reading.
When discussing picture size, it is important to remember the two opposing viewpoints. The first is “What image size should I upload?” and the second is “What influences how large my images are displayed?” And these aren’t separate questions. You can’t answer the first without thinking about the second.
Image Dimensions
With this Image Size Guide, we want to provide you with the knowledge you need to determine how large or tiny your photos should be to suit your website and appear sharp on your readers’ screens. The size and quality of the images on your website are determined by a variety of factors, including how large you upload them, the width of your site, whether they’re in columns or used as a background image, whether you use sidebars, and even the resolution of the end user’s screen, to name a few. Continue reading to discover more about these elements.
What Image Size Should I Use?
One of the primary reasons of slow-loading webpages is images that are too big. Upload photographs directly from your phone, camera, or other capture device if you want a truly sluggish website. These are often over 5,000px in width and up to six or seven megabytes in size. This will ensure your pages take forever to load. This approach is incredibly common, yet it doesn’t take into account the size (both in pixels, and in kilobytes, or even megabytes) of the image being uploaded.
But we all want fast loading websites, and so we need to consider these things. To do this, and to determine what size our images should be, we need to understand a few things about images, and about how big the space we are adding the images into actually is. The first thing to understand is how images for the web are sized.
Pixel Size and File Size
For a start, forget about what ppi (pixels per inch) your image is. It makes no difference in a web browser, and doesn’t affect file size either. It is a printing instruction, and can be completely ignored with images for the web. Despite this, it’s a standard to upload images that are at 72ppi.
Pixel Size
The most important figure to understand about images for the web is the pixel dimensions. Capture devices, like cameras and phones, capture images at a fixed aspect ratio and size. The longest length of an image is usually in the range of 3,000 – 7,000 pixels, but this depends entirely on the device. But this is what you most need to consider when preparing your images for uploading to a website. We will cover more on what’s an appropriate size, but as a very rough guide, images around 2,000 – 2,500 pixels on the longest length are considered the largest size you’d ever need to upload. In many cases, images around 600 – 1200 pixels would be more appropriate. And images that are only a couple of hundred pixels in width (like logos) will be fine in small Columns, but would pixelate if added to larger Columns.
File size
When it comes to file size, this is determined by three things – the complexity of the image (an image of the blue sky will be much smaller than the same sized image of a forest), the pixel dimensions of the image, and the compression applied to the image. There’s not much you need to know about the first one, and the second one will be determined by other considerations, but the compression is also important. This setting, available in virtually all graphics software, as well as via image optimisation websites or WordPress plugins, reduces the kilobyte size of an image, and optimises it for the web. The more compression you apply, the smaller the file size. But quality is also reduced. So a balance between the two needs to be found. To learn more about image size and compression, read this detailed blog post.
Resizing and Compressing Images
Image Formats
Image size is also directly affected by your choice of image format. This is a huge topic, and way too big for a tutorial such as this, but basically, there are two major file fomats you are likely to be using on your website, as well as a few more upcoming and possible formats. There are both vector and raster image formats, and each format has their own strengths and weaknesses. For a more detailed look at image file formats, view this excellent article at HubSpot, or this one at Kinsta.
JPG / JPEG
JPG (.jpg or .jpeg) is the most common image raster format for the web, most suitable for photos. It compresses well (maintains quality relatively well for the file sizes you can achieve) (maintains quality relatively well for the file sizes you can achieve). It doesn’t support transparency, but it’s by far the most common image format.
PNG
PNG (.png) is also a very common image format, with specific strengths. It was invented to replace GIFs, and is a lossless format and also supports transparency. This means it is great for logos and other images that require transparency. It is also a good format for high quality photos, but the comparative file size is much bigger than a jpg.
GIF
GIF (.gif) is a lossless format, meaning that a GIF retains all the data contained in the file, but they are smaller than JPGs, specifically because they only accommodate up to 256 indexed colours. GIF also supports transparency, but for logos, PNGs are a better format. This format is slowly being replaced by the .png format, but where GIFs still shine, is that they can be animated, and so are very useful in some situations.
SVG
SVG (.svg) is a vector format, which while having wide browser support, is not yet as easy a file format to implement as the others. It is however a great choice for logos, or other graphics you want to be tack sharp. Unlike raster formats seen in JPG, GIF, and PNG, an SVG image remains crisp and clear at any resolution or size, because they are mathematically declared shapes and curves, not pixels.
Learn graphic design through Blue Sky Graphics online graphic design course.
