Some sites take a long time to load while some load quickly. If you were to choose between a speedy and a slow website, I’m sure you’d go for the speedy one. No one wants to go on a slow website and wait for more than 5 seconds.
In fact, 5 seconds is already considered slow. Most Internet users expect sites to load in 1-2 seconds. A few seconds difference might seem minute in the real world, but to Internet users that delay feels like an eternity.
What Are Unoptimized Files?
One of the culprits of slow websites are unoptimized image files. These are high-definition images that people upload straight from their high-resolution cameras or other sources.
They see an image that looks good and uploads it to their website without giving any thought to how big the image file size is. Then they’re flabbergasted when their sites take forever to load.
There’s a difference between uploading images to your self-hosted website versus uploading the same images to social media, say for example, Facebook.
When you upload to Facebook, your images are automatically resized and optimized. This is why no matter how big your images are it always loads fast on Facebook.
Unfortunately, the same cannot be said for your website. When you upload a 5MB photo, then that’s going to remain at 5MB. When people visit your site, your web server will be serving that 5MB image file (and all your other website files) to your visitors.
Now, imagine if you had 10 of those images on your web page – your server would be sending over 50MB of files to people’s browsers!
Even people with super-fast Internet connections will experience a slowdown. Think about those who have slower Internet – downloading 50MB+ worth of website files will take a long time!
Print vs Web Images
What most people don’t realize is that regular images aren’t optimized for the web. If you want your images to be optimized, you’re going to have to be proactive about it.
Let’s begin by examining the differences between images for print and images for websites:
1. Print images
Print image resolutions are measured in DPI or dots per inch. If you want to print something and you want it to look good, then you should opt for a 300 DPI resolution. This means that for every square inch, there are 300 dots in it. This leads to crisp-looking images with good detail in it.
Images that are meant to be printed usually have large file sizes. This is because higher resolution photos come with more megapixels on it. If you print a low-resolution photo, then it’s going to come out as grainy and blurry.
2. Web images
Web images, on the other hand, are measured in PPI or pixels per inch. Pixels are tiny squares you see on computer monitors and other digital devices.
If you use a low-resolution image on your website, then you’re going to see little squares on your image. These are the pixels, the smallest unit in digital images.
If you’ve taken a picture with a DSLR or even your smartphone camera, and you want to upload it to your site, then you’ll need to optimize it for web use. This is because most modern cameras (smartphones included) take pictures with many megapixels.
For example, you wrote a blog post about your dog and you took a photo of your dog on your smartphone. You thought the photo will look great in your post so you upload it immediately to your website.
What you don’t realize is that the image’s resolution would probably look something like this: 4032×1960 pixels with a 7MB file size!
Again, just like I mentioned earlier, if you upload high-resolution images like this to your site, then you’re going to have a slow website.
Optimizing Images For The Web
There are a number of techniques you can use to optimize your images for the web. Here are some of them:
1. Reduce the image’s dimensions
To check your image’s dimensions, you can look up the image’s property section. It should state there how many pixels it has in terms of length and width. In our earlier example, the dog photo had 4032×1960 pixels.
For web images, the optimal size is 1200×800 pixels with the recommended maximum being 2000 pixels.
So, if you’ve got an image that goes beyond these dimensions, then you should resize it. Your 4032×1960 pixel image will get compressed anyway on web browsers, but it’s still going to have the same file size.
Just because your 4032×1960 image looks smaller on computer screens doesn’t mean its file size will magically drop to 100KB. It doesn’t work that way – you’re going to have to optimize it on your end.
This means resizing your image file’s dimensions. In this case, you will need to resize your 4032×1960 image to maybe 1200×800 pixels. Your file size will drop considerably.
If you’re on Windows, you can use this free tool called Image Resizer For Windows. When you install the software on your computer, you can quickly resize images by via the right-click button. Here’s what it looks like:
If you're using a Mac, you can use Image Converter.
It looks like this:
These are the resize options available:
Of course, there are other free tools available. You may also want to look at FastStone Photo Resizer. Feel free to explore and use the tool that’s right for you.
2. Save images in the appropriate file type
There are many kinds of image file types. However, not all of them are suitable for the web. The 3 most common image files uploaded for web use are JPG (or JPEG), PNG and GIF.
JPG images is a lossy compressed file format and are usually used for photographs which often have lots of subtly different colors. If you go and check photos from your camera, you’ll notice the file type will be JPG.
PNG images is a lossless compression file format and is ideal for use in graphics and text-heavy images. If you want to use transparency in your images, then you should save your file in PNG format.
GIF images, on the other hand, is also a lossless compression file format but is limited to 256 colors. GIFs can be animated, you’ll often see GIFs used in memes.
3. Compress image for the web
Compressing images for the web is as simple as dragging your images to online tools. These tools remove unneeded data in the image like metadata and additional color profiles which add quite a bit to the image’s size.
Try one of these tools below, and you’ll have your web-optimized images – with much smaller file size– in seconds!
These tools work pretty much the same, so you can take your pick and choose the app you’re most comfortable with. To access these sites quickly, consider bookmarking these in your browser.
4. Use an image compression plugin on WordPress sites
If you’re on WordPress, then you can do all three steps above and still shave off a few kilobytes on your image files. How? By installing a plugin like WP Smush.
What’s really awesome about this plugin is that it’s a set and forget plugin. Simply activate the plugin and every time you upload new images to WordPress, it will quietly work in the background and automatically optimize your images!
Some Other Files You Can Reduce Or Compress
You can optimize other files for the web too. If you upload documents, presentation files, etc. you can also optimize these for web use. Here’s how:
1. CSS stylesheets
There are quite a few ways by which you can reduce your CSS file sizes. The most popular one is by minifying your CSS. This basically means reducing the instances of whitespace in your CSS code. You can use CSSMinifier, a free web tool, to minify your CSS.
4. PDF files
If you’re building a mailing list, then chances are you’re going to be giving away a free eBook, a free course, a free checklist, etc. Often, these giveaways come in the form of PDF files. To reduce your PDF file size, you can use an online compressor like PDFCompressor.
5. Microsoft Office Documents (Word, Excel, PowerPoint)
Regular, text-based Microsoft Office documents aren’t heavy files. However, when you insert graphics like photographs, then it contributes to bigger file sizes. What you can do is click on the images you want to compress. This will open the Picture Tools menu. Click on Compress Picture. You’ll then see the compression options below:
Tick the compression options you want to use. Then in the Resolution section, select ‘Web (150 ppi)’ or ‘E-mail (96 ppi)’ since these will result to lighter documents.
If you’re uploading your videos to your web server, then it’s important you reduce your video file sizes. This is because videos can easily consume hundreds of megabytes even for videos that are only a few minutes long. You can use an open source tool like Handbrake to reduce your video’s file size.
Alternatively, you can just upload your video to YouTube or Vimeo and embed the link on your website! This way you’re not using any space at all on your server.
If you want to make your website run faster, then you need to work on reducing your website’s file sizes. You need to know which files are hogging your server space and slowing your site down. Use the optimization techniques we’ve shared in this guide to finally be on your way to having a fast-loading website.