• About Us
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
April 25, 2016

Balancing Beauty With Speed – How To Optimize Your Site Images

Posted by Janie Jackson

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.

search_engines_love_html_text

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:
Product_Images_2

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.

Site Speeduser experienceux
Previous
Next

Latest White Papers

  • Why Voice Matters: Identifying the Latest Opportunities in Voice Search
  • eSports Advertising and How Brands Can Get in the Game
  • Navigating the Amazon Ecosystem
  • See all White Papers

Featured Posts

  • How An Unusual YouTube Partnership is Disrupting an Entire Industry
  • PMG Among Best Employers for Parents
  • Why You Should Take Your Vacation: My Experience Going Off the Grid
  • Working with an Automation Mindset
  • Why B2B Brands Should Use Video

Categories

  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Display
  • E-Commerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • SEO
  • Social Media
  • Structured Data
  • Video
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2019 PMG Worldwide LLC. All Rights Reserved.
  • Contact
  • Privacy Policy
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.