Images can be some of the heaviest components of a website, meaning they are made up of more bytes and therefore take longer for a browser to download.

If you resize images for the web, you can reduce the bytes in an image to make them load faster.

The primary reason is your images’ file sizes. The larger the files, the more work your web page has to do. The following three factors affect the overall file size of an image:

Pixel Dimensions: This is how many pixels constitute your image, in length and width. The larger the dimensions are for your image, the more professional your image will look, but the larger the file size will be. If the dimensions for a photograph are 2000×1500 pixels, the photo will render beautifully but eat up valuable space on your website.

File Type: Different types of files take up more space based on their uses, the amount of information they contain, and how the images themselves are rendered, such as bitmaps or vector equations. To decide between JPEGs, PNGs, SVGs, or GIFs, read our recommendations for the best image formats for the web below.

Quality: If you maintain the original quality of the image, the file size remains large. Compressing an image involves limiting the file size by reducing the quality or removing hidden elements of an image.

You want to adjust these components so you can keep your page speed as fast as possible.

JPEG: use JPEG for photos, screenshots, and most other images. JPEGs use lossy compression, which means they sacrifice image data to reduce file size. You can play around with the quality settings to reach the optimal quality vs. file size.

PNG: use PNG for images containing sharp geometric shapes because the curves and lines will render out cleaner than with JPEG. PNGs use lossless compression, meaning they hold onto all of the image data. Their file size will be bigger than other formats.

GIF: use GIFs for animations, but avoid this format for still images, as it will limit the number of colours that render out in your image.

You measure page speed by load time or the amount of time it takes for the browser to display all of the content on a page.

When you navigate to a website page, your browser downloads information from that page in units called bytes (e.g., kilobytes, megabytes).

Everything on a page, from images and text to animations and navigation menus, takes up a certain amount of disk space measured in bytes. It makes sense that the more bytes used to make up a web page, the longer the page will take to load.

The easiest and most direct way to help your page speed is to reduce image file size. This process is called image compression.

Image compression is the process of reducing an image file size so that it takes up less space. You might also hear this process referred to as “resizing an image” or “optimizing an image.” It is particularly important to resize images for the web because it will positively impact page speed.

Images can be some of the heaviest components of a website, meaning they are made up of more bytes and therefore take longer for a browser to download. If you resize images for the web, you can reduce the bytes in an image to make them load faster.

If you want to dive deeper into page speed mechanics, you can also try to reduce redirects, use web fonts, and minimize unnecessary pieces of code, like comments or extra spaces. But again, nothing will get you results like image compression.

What is the file size you should aim for when resizing your images? Your perfect image size will vary based on the context.

Full-width images: These images will cover the entire screen from left to right. In terms of pixel dimensions, keep these at 1200 pixels wide maximum for your CCK website.

Inside-content images: These images could be inside slideshow galleries, call-to-action buttons, or within a blog. For horizontal images, the maximum width should be 1200 pixels maximum. For vertical images, stick to a width of 800 pixels or less.

Of course, pixel dimensions don’t correlate directly to file size. How much space should your images take up? The golden rule is to upload images no larger than 500 KB, but that size is reserved for arresting hero images and similar use cases. If your blog contains several photos, each one accounts for part of your web page’s total size.

The average size has been climbing steadily for the last few years. The average page weight is now at 2 MB, and even higher according to some blogs. You should aim to keep your site below 2 MB. Google’s recommended practices are to keep each page below 500 KB, so you should be compressing images as much as you can without sacrificing quality.

The best way to resize your images is to do this inside a design tool like Canva. Canva is a free online design tool, which you can use to resize each of your images before you upload this to your website. The Pro version of Canva allows you to create design size limits and resize your images.

➡️ Learn more about resizing images on Canva here.

On top of resizing your images, we also recommend that you compress all of your images before you upload this to your website.

Now that you know how to resize images for the web, you need the tools to make it happen. You can try some of these easy-to-use image compression tools. The best tools to compress your images are:

Kraken.io

If you have lots of images that you want to compress at once, Kraken.io is the tool for you. Its bulk image compressor allows you to optimize several images at once and download them in a zip format, or tackle each one by one. Click here to use Kraken.

TinyPNG

Need to compress PNGs? TinyPNG lets you reduce the file size of both PNGs and JPEGs to serve as your one-stop shop for compression. Remember that PNGs have a bigger file size than other extensions, so select this extension carefully. Save it for images with sharp geometric features, like logos. Click here to use TinyPNG.