Image Performance Tips For Authors

 33   Tweet
!

Note: This post hasn't been updated in over 2 years.

image_performance_thumb

In this article I’ll share with you some tips to help improve the performance of your items and profile pages. It’s a well known fact that page load time is a vital part of maximising sales online. Google says it best:

Fast and optimised pages lead to higher visitor engagement, retention, and conversions.

The time it takes your Marketplace item, profile and live preview pages to load will have a direct and drastic impact on your sales. Here’s how to make that impact a positive one.

How Your Content Impacts Page Speed

You can add custom HTML to certain places on the Market, including your profile, item descriptions and support pages. This custom HTML can also include images that you self-host.

By far the slowest part of the Marketplaces are these self-hosted images. That’s because they’re often not optimised for the web, and are usually hosted on comparatively slow personal servers, or on free image hosting services, like Dropbox, Flickr or CloudApp.

The image below shows all of the images that load on a typical Marketplace item page:

skitch
Image loading on a typical Marketplace item page.

The highlighted items are images that are self-hosted by the author. These can often push the page load time up by three or four seconds.

How to Improve Your Item Page’s Speed

1. Use Fewer Images

The single easiest way to speed up your item page is to simply include fewer images. Beware of images with lots of text. Aside from adding to the page load time, this content is invisible to search engines and is not selectable by users. Where possible, add text content and links to the page as either text or HTML, rather than embedding it as an image.

2. Use An Appropriate Image Format

Many people use JPEG as their default image format, but the size and quality of your images can be improved depending on the content of the image.

As a general rule:

  • JPEG is best for photos and images with lots of gradients.
  • PNG or GIF are best for images with flat colours and images with transparency.

But you should experiment with all three formats to see which gives you the best combination of quality and performance.

3. Compress and Optimise Images

When you export your images from Photoshop, always use the “Save for Web” option. Once your image is exported, you can make it even smaller with an image optimisation tool. These tools are able to strip unnecessary data and compress your images even more than “Save for Web”, usually losslessly.

Some image compression tools you might like to try:

There are more image compression tools listed here.

For the Pros: Host Your Images Somewhere Fast

Free hosting services are usually not the fastest option. If you want to stick with free image hosting, experiment with a few options to see which performs best for you.

If you’re hosting your own images, talk to your provider about their best options for fast image hosting.

Finally, you can use a CDN to dramatically boost the speed of your images.

Next Steps

Tuts+ have some helpful articles to get you started with CDNs: Combine CloudFlare With a CDN on Your Blog and How to Utilize Akamai CDN with Your WordPress Site.

If you are not sure how to test the performance of your item pages, you should check out this post on Google PageSpeed Insights.

And if you would like to know how to make your items SEO friendly, check out this post:

8 Ways to Make Your Items SEO-Friendly

Header image credit: ponsulak

33 thoughts on “Image Performance Tips For Authors

  1. You can use your Dropbox account to host images. That way you can easily replace images that need to be updated.

    1. Thanks Hupe – glad you enjoyed the article. Thanks for your comment about the links. As Tuts+ is transitioning from individual sites to a combined hub, a lot of URLs are changing, and redirection is happening behind the scenes. Right now, the original URLs work for me, but yours don’t. It may be that the new hub was down temporarily when you tested. Do the URLs in the article work for you now?

  2. I love the tools in this tutorial. I had been seeking for alternative of Yahoo! Smush.it (it’s slow at the moment) and FileOptimizer is a really good app. I’ve tried it in last few days and really impressive with the result. Highly recommended!

Leave a Reply

Your email address will not be published. Required fields are marked *