How to make your images ready for web use
Properly sized images are crucial for your website. If your photos are too big they can cause loading issues, and slow down your site.
Image Size
VS
File Size
A lot of our clients get a bit confused when we talk about the size of an image so let’s break it down. When we’re talking about image size we are talking about the dimensions of the image, specifically the height and width of an image in pixels. For example, if we are looking for a square profile image we might ask for an image that is 500 x 500. This means we need the image size to be 500 pixels by 500 pixels. The image’s file size is a whole different concept. The file size is a measure of how much data a computer file contains or, alternately, how much storage it consumes. Typically, file size is expressed in units of measurement based on the byte. For example, most high-quality images have a file size of over 2MB, that’s a lot of data! It’s important to note that you can reduce the file size of an image without reducing the image size, however reducing the image size will most likely reduce your file size.
Where to start
First up, take a look at the image size. Appropriately sized images are crucial to enhance the design of your website. There isn’t a “recommended” image size as it honestly depends on where you’re placing your image. It’s best to think about where the image is going, how it’s going to fit in with other images on your site and go from there. For example, if you need a square image make sure your image size is something like 1000 x 1000 pixels. When in doubt go with larger image size, it’s always easier to scale down! As a note, WordPress will scale down your images if the image size is larger than 2560 pixels wide.
Check the file size
This is the most important step and the most forgotten one! Checking your image file size is critical for good website performance. Ideally, the file size of your image should be as small as possible, preferably under 500kbs. Large images (over 1MB) are hard on your website. They take longer to load, put a strain on your website hosting, and take extra resources that ultimately slow everything down. Fear not! If your image file size is larger than our recommended size there are a few things you can do.
important reminders
The size of your file and the size of your image are not the same things!
How to reduce your photo’s file size
We could totally give you a long, in-depth tutorial on how to reduce your file size using a big fancy program like Photoshop or Corel Photo-Paint but honestly, it’s a lot of work! We are all about working smarter, not harder here at Pod Creative. After 10+ years in business providing web design services to the Comox Valley and beyond, we know a thing or two about reducing file sizes for web images.
Our hands-down holy grail image file size reducing software is a website called tinyjpg.com. It may look deceiving but trust us, it packs a punch! Not only does it reduce .jpeg files, it also reduces .png and .webp files as well! What does the website do? Well, they say it best!
TinyJPG reduces the file size of your JPEG images. Every uploaded image is analyzed to apply the best possible JPEG encoding. Based on the content of your image an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth!
As long as your image is under 5MB with a free account you can upload up to 20 images to reduce! The best part? The image quality is not compromised. To be clear, tinyjpg.com only compresses the file size of the image, it does not reduce the actual image size.
Another great way that we’ve already touched on in a previous post is using a plugin called Smush. If you’d like to learn more about Smush and what it does for your photos, click here!
A little bit about image file types
What is a .jpeg? Joint Photographic Experts Group (JPEG) files are one of the most common ways to store digital photos. Many modern cameras use them to shoot and store images. JPEGs go through a compression process to significantly reduce the image file size — making them easier to store and load on web pages. JPEG images can contain up to 16 million colors. File extensions are normally limited to three characters, so JPG was agreed upon as the extension for JPEG image files.
What is a .png? Portable Network Graphics files (PNGs) are compressible and like JPEGS, can handle 16 million colors. They’re mostly used for web graphics, logos, charts, and illustrations, rather than high-quality photographs because they take up more storage space than JPEGs. One thing PNGs offer that JPEGs don’t is the ability to handle graphics with transparent backgrounds.
When it comes to your website, which is best? When receiving image files from clients we tend to prefer .png files due to their ability to handle transparent backgrounds. However, .jpeg files work great too! As long as the files are properly labeled and in the smallest file size possible,
Final
Thoughts
When in doubt you want a large image size with small file size. Scaling down an image size is straightforward, but you can’t add pixels to an image! Pay attention to the dimensions of your image as well, if your web team asks for a “square, 500×500 image” make sure your image is as close to that as possible, otherwise, it will need to be resized.
Make sure your photo file size is as small as it can be, preferably under 500 KB as this will dramatically help your website load quickly. Free websites such as tinyjpg.com are quick and straightforward to losslessly compress your images.