Ways To Optimize Website Images Without Losing Quality

Any website taking more than 2 seconds to load, start losing online visitors. Sounds crazy? Amazon researched that if their pages get slow even by mere 1 second, it will result as a loss of $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?

Ensure that images aren’t too big!

Image optimization is one of the most crucial aspects in a speedy website. Images constitute the major part of file sizes. Since high-quality images are very important, large images make huge files which slow down your website. Even a single uncompressed image can slow down your entire site and also hurt your SEO! Moreover, there are ample ways to minimize your image sizes without any noticeable difference in image quality.

1. Resize Images

Initiate the process by resizing images in proper resolution. If you are plan to resize an image for using as full-screen background or hero image, we suggest resizing it approx 2000 pixel wide. Web 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:

A useful app called ImageResizer, is present which allows you to resize images by right-clicking. Just download and install the application, and you’ll get various options for resizing images.

2. Select the correct file format

Every file type has its plus and minus, and knowledge about which one to use can really make a huge difference in website performance. Here’s a quick guide about 3 main image file formats and what they’re best suited for.

JPEG:

– Most popular file type

– Perfect for photos or complex images due to 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. Image compression

The next step in image optimization is compression. This procedure runs puts your image in an algorithm crunching the file size drastically. Also ample numbers of online tools are available 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:

• TinyJPG | TinyPNG
• Compressor.io
• Kraken
• ImageOptimizer

Generally image size should never be larger than 1MB. But normal image file sizes can range within 70kb-400kb. (1MB = 1000kb)

If the image spits out of the compressor and large than 1MB, reconsider your image size option, or try a different file type.

4. Use descriptive file names

It’s quite easy to get lazy and restore the default file name from a camera or image download, but it’s not a good idea. When it calls for SEO, it’s crucial to use relevant keywords for helping your website rank on search engines. It’s helpful for Google crawl to website text, but they also scan for keywords in your image file names.

Conclusion

Having an emphasis on user experience must be your top priority where page size and load times are key contributors. Image optimization is one of the easiest way to speed up your site’s load time. You can try using PageWeight to scan your web site and figure out all images requiring a little compression. So if you need to improve your site performance and SEO, control the size of your images.

Still have some lingering questions? Feel free to reach out to us! We are here to help you.