Optimize your content

Enhance your user's experience by optimizing your media

Edouard Williamson avatar
Written by Edouard Williamson
Updated over a week ago

For a better user experience, optimizing your media is key.

Here are the different options offered by RacontR that we cover in this section :

  • Optimize images

  • Optimize videos

  • Optimize audio files

Optimize images

Format, size and colorimetry

Building a layout on a DTP software such as Photoshop :

  1. The best way to optimize image size is to create a mock up on a Photoshop-like software.

  2. Then if you experience has to be 1024 pixels wide over 720 pixels high, preset your mockup to be exactly that size.

You will avoid time-consuming resizing when uploading your content in RacontR.

    3. As for resolution, choose 72 ppi, i.e. 72 pixels per inches.

Last, select the RGB colorimetry (check out your software user's guide if needed).


Choosing the right format : jpeg / png / gif

Before optimizing your media, you have to choose between three possible formats : jpeg, png, gif.

  • jpeg is preferred for any plain image.

  • png is preferred for images including transparency effect that will often be used has interactive objects.

  • gifs provide an image per image animation.

Save optimized versions of your images

Save an optimized PNG :

Your mockup is done, you now have to export all your images. You first need to single out every element of your mockup. In this example we’ll export an icon as a PNG file.

  1. Open a new document and import the icon layer.

  2. Adjust the document size to the icon with the crop tool

  3. to remove empty areas.

All that is left is to export this image, go to “File” then “save for web” (picture below)

A window opens.

  1. Click on “thumbnails” to display both the original image and the optimized one. Make sure quality has not been too altered.

  2. In settings, choose PNG 24. Then select “transparency” and save.


Save an optimized GIF (photoshop)

Let's optimize a gif (1), which is a series of images (2). Check your DTP software user's guide to learn how to make them.

To save your .gif go to “File” then “Save for web”. In settings choose “Gif” (3) then find the right balance between quality and size (3). You can play your gif to make sure it displays properly (4) and loop it by clicking on “Always” in the “Animation” menu. Click on "Save" to finish.

Save an optimized JPEG (photoshop)

Copy and paste your image layer into a new document. In our example this image is 1024 x 720 pixels (2) and its resolution has to be 72 ppi (3). Open the “image size” window to check this. Make sure the colorimetric mode is RGB.

Go to “File” then “Save for web”. A window opens. Click on “thumbnails” (2) to display both the original image and the optimized one. Make sure quality has not been altered too much. In "Settings", choose JPEG (2) then select the proper Quality and Blur settings (5). You need to find the right balance between quality and size. For instance a 1024×720 px image should range between 250 ko and 600 ko tops.

Optimize videos with an editing software

RacontR automatically converts your video files so you can upload mov, avi, flv, ogv, f4v, h264, wmv and wma files. However, you can optimize the upload process by respecting a few guidelines regarding format, size, weight.

Video size :
Before uploading your video, check its size. No need for a 1980 pixels wide video if it's going to display as 600 pixels. This will only slow down your page's loading time.

Video weight :
RacontR uploading limit for a single video is 1 Go which should be enough for any video provided it has been correctly optimized. You can use an online video converter or video editing software to improve its compression rate.

Compression format :
We recommend using the H264 codec in your video editing software for better performance and quality. For web use, select a video rate between 3 and 5 Mbits/s (see below).

Optimize videos with an online converter

You can also use online converting services such as http://online-convert.com which is free and user friendly.

    1. Choose “convert video” (1)
    2. Select MP4 in the drop-down menu

3- Select the video file by browsing your file or typing its URL 

4- In settings, choose a maximum bit rate of 4 Mbits/s.

5- Click on “convert” 


Optimize audio files

As for videos, RacontR automatically converts your audio files so you can upload MP3, wav and ogv. To optimize your mp3 file, use an audio editing software and export your sound with a 128ko/s bitrate and a sample rate of 32kHz.

You can also use online converting services such as http://online-convert.com which is free and user friendly.

2- Choose “convert audio” (1)

3- Select mp3 in the dropdown menu

4- Select the audio file by browsing your file or typing its URL (3)

5- In settings, choose a 128ko/s bitrate and a 32kHz sample rate (4)

3- Click on “convert” (5)

Did this answer your question?