This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

Balancing Beauty With Speed – How To Optimize Your Site Images

3 MINUTE READ | April 25, 2016

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:

  1. Replace image text with HTML text

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

  3. Update images from png image formats to jpg

  4. Load above-the-fold content on the page first

  5. 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.

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.

Insights meet inbox

Sign up for weekly articles & resources.

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.

Posted by Janie Jackson

Related Content

thumbnail image

Get Informed

The Road to Recovery for the Travel Industry

5 MINUTES READ | November 19, 2020

Get Informed

Ecommerce Platform Choice Must Weigh Tradeoffs

1 MINUTE READ | August 6, 2020

thumbnail image

Get Inspired

Considerations for Reengaging New Online Customers

1 MINUTE READ | April 29, 2020

Get Informed

EMEA Search Trends Amid COVID-19

8 MINUTES READ | April 28, 2020

Get Informed

Google Launches Non-Paid Shopping Offers (aka free PLAs)

7 MINUTES READ | April 24, 2020

thumbnail image

Get Informed

How To Boost SEO During The COVID-19 Crisis

1 MINUTE READ | April 17, 2020

Get Informed

Impact to SEO During COVID-19

1 MINUTE READ | April 16, 2020

thumbnail image

Get Informed

Jason White Talks About Importance of Owning Keyword Data

1 MINUTE READ | February 26, 2020

Get Informed

Jason White On Agents of Change

1 MINUTE READ | December 9, 2019

Get Informed

Takeaways from Yext’s Onward19 Conference

4 MINUTES READ | November 5, 2019