Optimize your content

Optimize your content

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

Here are the different options proposed by Racontr that we will approach:

First step:?Optimize images

1/ Format, size and colorimetry
Build a layout on a DTP software such as Photoshop

  1. The best way to optimize image size is the create a mockup 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?ll avoid time-consuming resizing when upoading your content in Racontr.

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

Finally, select the RVB colometry (check out your software user guide if needed).

Choosing the right format : jpeg / png / gif
Before opmitimizing your media, you have to choose between three possible formats : jpeg, png, gif.

  •  jpeg is prefered for any plain image.
  • png is prefered for images including transparency effect that will often be used has interactive objects.
  • gif provide an image per image animation.

Save an optimized version 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”

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
  3. 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 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 all of that. Make sure the colorimetric mode is RVB.

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 too altered. In settings, choose JPEG (2) then select th 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?ll display as 600 pixels, this will only slow down your page?s loading time.

Video weight
– Racontr uploading limit for a single video is 1Go 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 but better performance and quality. For web use, select a video rate between 3 and 5 Mbits/s.

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- Go to http://online-convert.com

2- Choose “convert video” (1)

3- Select mp4 in the dropdown men

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

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

3- Click on “convert” (5)

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.

1- Go to http://online-convert.com

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 settins, choose a 128ko/s bitrate and a 32kHz sample rate (4)

3- Click on “convert” (5)

Saving

Create an account

  1. OK let's do this.

Log in with your credentials

or    

Forgot your details?