How to Optimize Images for a Speedy Website

Image optimization plays a role in your website's SEO. Did you know that if your image file sizes are too large it will weigh down your website and decrease the load time? Most people will not wait more than 3 seconds for a website to load. But even a few extra milliseconds of load time can ding your performance in Google’s eyes, lowering your visibility in organic search.

 
SEO Blog Laptop with Analytics
 

But Don’t Fret!

We have tips and tricks to help you speed up your site and regain some of that lost love from Google.

When downloading pictures for a website save them as JPEG or WEBP files for the best response time. Yes, PNGs are known to have the greatest resolution, but they take 26% longer to load. Plus, most of the time JPEG or WEBP files will look better on a website. The best part is they have smaller file sizes! Image files should not exceed 15MB

Shopify, an eCommerce website, offers a great side-by-side comparison of PNG and JPEG files on a website. When you run an eCommerce website, the goal is to have the best optimization of time.

Already have a website built, but want to increase image optimization?

Luckily, most SaaS platforms such as Duda, WordPress, Squarespace, and Wix built an image resizer into their website. Although, with image size reduced, they can become pixelated or blurry. Check out the Adobe Express image resizing tool. It’s a quick and easy way to get some Spanx around a hefty image size. The best part…it is FREE!

The Adobe Express image resizing tool will decrease file sizes without affecting the quality of the picture. It is easy! Upload your original JPEG or PNG, resize, download, and rename the image file. 

Don’t know the correct resizing dimensions? We’ve got you covered!

After researching for file sizes, Duda had the best chart of optimized image widths based on image usage or the type of device you are designing for. 

The Small Business Collective Duda Image Size Chart

“Image Size Guidelines - Duda Support.” Accessed June 17, 2022. https://support.duda.co/hc/en-us/articles/1500001498961-Image-Size-Guidelines.

Based on experience, the image size on a website should not exceed 1080px wide. Also, upload logos in an SVG format for a sleek logo.

Now that you have resized all your images, it is time to name the file correctly. Use keywords for file names and be as descriptive as possible. Pictures are worth a thousand words!

Let’s say that you are a baker at B Bakery. You are creating a cookies page for your bakeries website. Use a good quality image and pull out the keywords that people may use while searching for the product. Maybe you want to include the date, color, character, or type of cookie. Here is how you would create a keyword file name.

File Name Options: 

B-Bakery-Star-Sugar-Cookie

Star-Party-Royal-Icing-Cookies-B-Bakery

Red-And-Blue-Sugar-Cookies-B-Bakery

Red-And-Blue-Star-Sugar-Cookies-B-Bakery

Alternative Text Matters!

Alt-text is the text that pops up if your image fails to load. Instead of a blank square with an error, it will show an ‘X’ with the alternative text as a placeholder. Also, you should include alt text for accessibility because the alternative text will be read aloud or appear when you hover over an image on some websites.

After reducing and renaming image files, it is time to upload them to your website. When you insert a photo, there will be a box that pops up with settings. You will see a section that says alt text, where you would enter the file name without dashes between words. All SaaS platforms have a different way of referring to alt text, but it will be an option!

Feel Like You May Make a Mistake?

The Small Business Collective is here to help!

Contact us about our photo resizing and SEO report package - just $300. This package includes 2 hours of Image Resizing, a comprehensive SEO Report, and recommendations on how you can optimize your SEO for the quickest impact.


Reference:

Fitzgerald, Anna. “How to Resize an Image without Losing Quality.” HubSpot Blog. HubSpot, June 13, 2022. https://blog.hubspot.com/website/resize-image-without-losing-quality.

Hayes, Mark. “10 Ways How to Optimize Images for the Web for Seo.” Shopify, October 21, 2021. https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips.

“Image Size Guidelines - Duda Support.” Accessed June 17, 2022. https://support.duda.co/hc/en-us/articles/1500001498961-Image-Size-Guidelines.