Smart Spots: Saving Files for Web

Watch this week's Smart Spot to learn best practices for optimizing image files on your website.

Having images on your site is a must, but too many large images can cause load speed issues. Load speed is important for two reasons. One, if your page doesn’t load within a few seconds, your visitor will probably leave. Two, slow page load can negatively affect your search engine rankings. Thankfully image size is a pretty simple page load issue to resolve.

So what is the ideal file size for web-based images? While 100kb in size is optimal, a general rule of thumb is to keep images below 200kb. Images below 200kb are considered optimized for the web and won’t affect page load speed. 

Image optimization is the key to sharing images on the web without sacrificing load speed. Adobe Photoshop has a great export tool called “Save for Web,” which is specifically designed for image optimization. It compresses the images to make the files smaller without significantly reducing the quality of the image. With this feature, you can create web-friendly images in just a few short steps.

Watch this week’s Smart Spot below to see how to properly save files for the web. For a quick future reference, refer to the written guide below the video. 

Step 1: Open the photo you want to use in Adobe Photoshop.

Step 2: Reduce the image size by going to Image > Image Size and entering the desired width.

Step 3: Export the image by going to File > Export > Save for Web.

Step 4: Choose the file type. If you’re using JPEG you can adjust the quality, but try not to go under 60 or else your images may appear pixelated. 

Step 5: Click save.

And voila! You’re done. Your website visitors will be silently thanking you for taking the few extra steps to ensure your images are optimized. Stay tuned for more tips and tricks in next week’s Smart Spot!