Balancing Beauty With Speed – How To Optimize Your Site Images

With the need for fast loading web pages steadily increasing, it’s important to make sure your site is keeping up with others.  And despite what you may think, you don’t have to sacrifice creative to make your site load faster. This blog post offers tips for updating your web page images for site speed while still maintaining your site imagery.

Here are a few tips:

Replace image text with HTML text

Change image sizes to be only as large as they appear on the web page

Update images from png image formats to jpg

Load above-the-fold content on the page first

Use a CDN to house large media files and reduce server load

1. Replace image text with HTML text.
HTML text doesn’t have to look like it sounds and doesn’t mean you have to replace your font with Helvetica or Comic Sans.

Today most text styles can be duplicated using CSS3, HTML5, font services and other advancements. Just look at all of the free options Google Fonts provides.

From an SEO perspective, text that is part of an image provides no SEO benefit because search engines cannot read it. By replacing the image text with HTML text, search engines will be able to read the content within your image assets, which improves the relevance of your site and can boost organic traffic to your site.

From a site speed perspective, image file sizes often shrink with improved compression, which can improve the heavy loading of image assets, and result in faster page load.

2. Change image sizes to be only as large as they appear on the web page. 

On many web pages, larger images are loaded and then made smaller to fit the page, which can impact page load. Adjust pixel widths on images to be only as large as the image needs to be for user viewing.

In the following example from a retail category page, the individual products are displaying at 250 pixels wide on the page, but the page is loading 350 pixels.

This is the image size being displayed on the page:

This is the actual image size the page is loading:

3. Update images from png image formats to jpg.
Png images create larger file sizes than jpg images. Switching png images to jpg and reducing the image quality where you can will decrease the file size. With the decreased file size, the images will load faster, and as a result, the page will load faster.

The images can be optimized without affecting the image clarity and without taking away from the original creative assets. Done correctly, it is possible to keep the text super clear, without any distortion or any pixelation visible.

4. Load above-the-fold content first.
Add in JavaScript to load above-the-fold content first so that users are immediately served with viewable content while the page is loading the remaining images. Once the top page content has finished loading, then go through the process of loading any additional large images required.

5. Consider using a CDN to house large media files.
A CDN is a large system of servers located around the world that stores website assets – typically JavaScript, CSS files, and static images. When a user is trying to access content on a site, the CDN serves the content from the closest or most optimal server location to the end-user.

Using a CDN to house your images, JS, and CSS files will take the load off of your server and result in a quicker site for your users, no matter where they are located geographically.