Image Performance Tips For Authors

 32   Tweet

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

  • http://jogjafile.com JOGJAfile

    Nice info, thank you !

  • http://www.amaranggina.blogspot.com naeem24

    very helpful post,thanks for share :)

  • http://www.codecheese.com mark

    Great post.

  • http://www.hemoroidetraitement.com/ Ilda

    I was very surprised about all my mistakes with my own website, thank you for your article, very helpuf and useful!

  • http://themeforest.net/user/T20/portfolio T20

    Thanks, good info

  • http://www.21min.eu 21min

    Thanks!
    Helpful info!

  • http://gresh.be/ Dannie Herdyawan

    Thanks for info… :D

  • izero

    I proposed some improvement about cross-selling to Envato a few months ago, but no response back :)

  • Jonathan Patterson

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

  • http://royalstockmusic.com/ berlininear

    Thanks for this very useful article. I tried to compress the PNG-files from my audiojungle profile page with TinyPNG – and it saved me like 60-80%! Awesome.

    Cheers, berlininear
    http://audiojungle.net/user/Berlin-InEar

  • http://graphicriver.net/user/vasaki vasaki

    Very helpful post. Thank you :)

  • http://uckhandla.com/ Ujamshi Khandla

    Very helpful post, Thanks for share. I’ll follow all the three steps.

  • http://videohive.net/user/Daveginos Daveginos

    Thank you very much for this post,, very helpful!! :)

  • http://themeforest.net/user/EffectiveLab EffectiveLab

    Thanks for this very useful article. :)

  • http://www.indexwp.com/ Dhiraj Das

    Some really useful tips, I think JPEG is best for normal images as the file size is generally lesser then PNG files. TinyPNG is undoubtedly best for optimizing PNG files

    Cheers, Dhiraj
    http://www.indexwp.com

  • http://videohive.net/user/bullet_time Bullet_time

    Hope it ll be more attractive. good article

  • http://codecanyon.net/user/DragonSigh DragonSigh

    Another handy tool for image optimization & compression:

    http://codecanyon.net/item/solvium-image-optimizer/4987599

    A little self-promotion, but under article :)

  • http://www.active-rendering.de/shop hupe-graphics
    • http://envato.com Adrian Try

      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?

  • http://audiojungle.net/user/dim_arosynthesis dimitris

    very useful!!!

  • http://fitwp.com Anh Tran

    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!

  • http://www.tooncrafter.com hackerkuper

    already use TinyPNG…simple and great!

  • Saijo George

    Nice tips Ben, I would like to throw in https://kraken.io to the mix of image optimization tools

  • http://themeforest.net/user/maskeenan Sam

    Awesome, congratulation for this tips

  • http://www.mlamanna.com mlamanna

    Great tips, thanks!

  • paul

    So these tools are better than the “Save for Web” feature of Photoshop? Among the tools, which is best?

  • http://btunrs.com anonto

    Great tips, thank you!

  • http://audiojungle.net/user/takingaction/ Ron

    Thanks for this valuable info!

  • Balapan

    Thanks for info.
    Great tutorial.

  • http://graphicriver.net/user/DenisBors/portfolio?ref=DenisBors Denis

    Great tips, thanks!

  • Max

    Here’s a better compression tool: http://optimizilla.com

  • http://saijogeorge.com/best-marketing-tools/ Saijo George

    I love http://compressor.io/ , it even allows me to optimize GIFs!!!