Image Performance Tips For Authors

by posted in Authors, Community, General
Jan 8
2014

photodune-2593177-maximum-speed--s

In this article we’ll give you some tips to help you improve the performance of your item 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 can have a direct and drastic impact on your sales. Here’s how to make the impact a positive one.

How Your Content Impacts Page Speed

You can add custom HTML to some places on the Marketplaces, including your profile, item descriptions and support pages. This custom HTML can include images that you 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

The highlighted items are images 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. Watch out for images with lots of text. Aside from adding to page load time, this content is invisible to search engines and not selectable by users. Where possible, add text content and links to the page as text or HTML rather than embedding it in 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 tools you might like to try include:

There are more tools listed in the best image compression tools for web designers.

For the Pros: Host Your Images Somewhere Fast

Free hosting services are usually not the fastest. 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. Tuts+ has some helpful articles to get you started:

Header image credit: ponsulak

  1. JOGJAfile on the 10th January

    Nice info, thank you !

  2. naeem24 on the 10th January

    very helpful post,thanks for share :)

  3. mark on the 10th January

    Great post.

  4. Ilda on the 10th January

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

  5. T20 on the 10th January

    Thanks, good info

  6. 21min on the 10th January

    Thanks!
    Helpful info!

  7. Dannie Herdyawan on the 10th January

    Thanks for info… :D

  8. izero on the 10th January

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

  9. Jonathan Patterson on the 10th January

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

  10. berlininear on the 10th January

    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

  11. vasaki on the 10th January

    Very helpful post. Thank you :)

  12. Ujamshi Khandla on the 11th January

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

  13. Daveginos on the 11th January

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

  14. EffectiveLab on the 11th January

    Thanks for this very useful article. :)

  15. Dhiraj Das on the 11th January

    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

  16. Bullet_time on the 13th January

    Hope it ll be more attractive. good article

  17. DragonSigh on the 13th January

    Another handy tool for image optimization & compression:

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

    A little self-promotion, but under article :)

    • Adrian Try on the 14th January

      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?

  18. dimitris on the 13th January

    very useful!!!

  19. Anh Tran on the 14th January

    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!

  20. hackerkuper on the 15th January

    already use TinyPNG…simple and great!

  21. Saijo George on the 17th January

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

  22. Sam on the 24th January

    Awesome, congratulation for this tips

  23. mlamanna on the 27th January

    Great tips, thanks!

  24. paul on the 28th January

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

  25. anonto on the 8th February

    Great tips, thank you!

  26. Ron on the 8th February

    Thanks for this valuable info!

  27. Balapan on the 9th February

    Thanks for info.
    Great tutorial.

  28. Denis on the 14th March

    Great tips, thanks!

  29. Max on the 4th May

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

leave a comment