Image Performance Tips For Authors

 31   Tweet

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

  • 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