Your website is expected to load in about 2 seconds, or people are going to lose interest in move on. Sound crazy? Amazon found that if their pages slow down by even 1 second, they lose $1.6 billion a year in sales.
Sure your website might be downloading from satellites in space, but users expect your site to load at the speed of light, and are extremely impatient. So how can you increase your website’s speed and not lose sales?
Make sure your images aren’t too big!
Image optimization is one of the most important parts of running a speedy website. Images account for most of the file sizes. While having high-quality images is very important, large images create huge files and huge files slow down your site. Even just one uncompressed image could be slowing down your entire site significantly and upsetting the SEO overlords… yes uncompressed images are also hurting your SEO!
Luckily, there are a number of ways to crunch your image sizes without any noticeable difference in image quality.
1. RESIZE IMAGES
The first thing you want to do is resize the image to the proper resolution. If you are resizing an image to be used as a full-screen background or a hero image, I suggest sizing your image to about 2000 pixel wide. Website content is normally around 900-1200 pixels wide, so keep that in mind when sizing an image for your page.
On a Mac,
Open your image in Preview > Tools > Adjust Size….
On a PC:
There is a handy app called ImageResizer, which allows you to resize images by right-clicking. Download and install the app, and you’ll have several options to resize your images.
2. CHOOSE THE CORRECT FILE FORMAT
Each file type has its pros and cons, and knowing which one to use can make a huge difference in how your website performs. Here is a quick guide to the main 3 image file formats on the web and what they’re best suited for.
JPEG:
– Most popular file type on the web
– Good for photos or complex images because of the huge color pallet that is allowed with the format.
PNG:
– High quality, but file size can ramp up fast with added colors and detail.
– Can handle transparency (great for logo files)
– Renders flat areas of color very well.
GIF:
– Huge file size
– Can contain animations
– Not recommended, unless using for small animations.
3. COMPRESS YOUR IMAGES
The second step in image optimization is compression. This process runs your image through an algorithm that crunches your image file size down drastically. There are a number of online tools we recommend for image compression. They all do essentially the same thing, but you may prefer using one over the other. I recommend giving a few of them a try!
Online Image Compression Services:
As a general rule-of-thumb, your image should never be larger than 1MB. Normal image file sizes should range within 70kb-400kb. (1MB = 1000kb)
If your image spits out of the compressor and its larger than 1MB, revisit your image size options, or try a different file type (see above). To get a little context, the average size of an entire website is only 4MB, so use your precious space carefully 😉
4. USE DESCRIPTIVE FILE NAMES
It’s really easy to get lazy and keep the default file name from a camera or image download (eg. IMG_1234), but this is not a very good idea.
When it comes to SEO, it is important that you use relevant keywords to help your website rank on search engines. Not only does Google crawl the text on your web site, but they also scan for keywords in your image file names.
CONCLUSION
User experience should be at the top of every web site owner’s radar, and page size and load time are key contributors. Prioritizing image optimization is one of the simplest ways to speed up your site’s load time. To assess your site, try using PageWeight. This tool scans your web site and shows you all images that could use a little compressing.
So there it is! If you want to improve your site performance (and its SEO), you need to control the size of your images.
Still have some lingering questions? Feel free to reach out to us! We are here to help 🙂
