[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446639574564{margin-bottom: -10px !important;}”]

Optimize your content

[/vc_column_text][vc_column_text css=”.vc_custom_1446639589752{margin-right: 5% !important;}”]

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

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”50px”][vc_column_text css=”.vc_custom_1446642563414{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text]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.

3. 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).[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”315″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446640303119{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”318″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446640320715{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text letter_spacing=””]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”[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”321″ img_size=”full” onclick=”link_image” css=”.vc_custom_1448378998076{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”318″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446640320715{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text]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.
[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”333″ img_size=”full” alignment=”center” onclick=”link_image” css=”.vc_custom_1446641800599{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”336″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446641697355{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text letter_spacing=””]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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”327″ img_size=”full” alignment=”center” onclick=”link_image” css=”.vc_custom_1446640978135{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”330″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446640991904{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text letter_spacing=””]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.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”339″ img_size=”large” onclick=”link_image” css=”.vc_custom_1446642408303{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text letter_spacing=””]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[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”342″ img_size=”full” alignment=”center” onclick=”link_image” css=”.vc_custom_1446642790269{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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)[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”345″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446642800867{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_column_text]

[/vc_column_text][vc_separator color=”turquoise”][vc_column_text]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.
[/vc_column_text][vc_empty_space height=”30px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”348″ img_size=”full” alignment=”center” onclick=”link_image” css=”.vc_custom_1446642923148{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]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)[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”351″ img_size=”full” onclick=”link_image” css=”.vc_custom_1446642933386{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]