Optimizing Rich Media For A Responsive Web Design

Animations, images, and videos are an integral part of any web design. However, they are also the most resource consuming parts of websites and are often the reason why websites slow down. Here are a few tips on how to optimize images, videos and other rich media files for multiple devices.

Reducing Image Size

Images are the most widely used component in any web design, and they take up about 60 t 70% of the total size of the web page. Optimizing image size actually fixes a lot of performance issues. Now, one way to simply reduce image size is by reducing the number of pixels in the image. They can be done in most image editing programs. But to make sure that the images look good on all screen sizes, there is no one-size-fits-all approach. Desktop sites may need images that are as large as 2 megapixels, or even more. Such image sizes on mobile websites will cause severe lag on older devices. Smaller images will look blurry and pixelated on larger screens.

The trick is to have different image sizes at the place. This will take up more place on the server, but will have huge performance gains in terms of site responsiveness and load times. Also, reducing image file size is possible with reducing image quality. The JPEG format supports a quality parameter that ranges from 0 (low) to 12(maximum). An image that measures 2MB with a quality set to 12 will have about 300KB to 500KB size when the quality is set to 6 (medium) without a much notable difference. This will allow an image with a lot of pixels to take up lesser space, and load fast across all devices.

Image formats play an important role too in determining image size. Formats like TIFF and BMP are big ‘no’s for websites. Photographs in JPEGs are better since JPEG allows lossy compression, and even with some loss in quality, the images look good enough. PNG images are great for line drawings and in places where transparency is needed.

If possible, PNG can also be replaced with SVG or scalable vector graphics; that replaces pixel data with a mathematical representation of the lines and shapes. This makes image file sizes as low as that of a text file. Also, SVG files support unlimited scaling. However, SVG support is not well provided in a lot of browsers.

Reducing Video Size

The video is a tricky component. In the case of videos, codecs play an important role. The target device should be able to decode the format in which the video is encoded. MPEG4 is a very common video format that provides decent quality for small file sizes. MPEG4 has almost replaced the aging FLV format, that requires Adobe Flash, which itself is a dying technology. To know about different technologies you can visit Rochester Web Design Company. MOV provides excellent quality but has a huge file size. WMV or Windows Media Video is also used in a lot of websites and is similar to MPEG4.

Reducing Animation Sizes

Animations these days are made using JavaScript, HTML5, and CSS. So, unless you are using Adobe Flash, there is nothing much to say about cutting down on animations. If you are using Adobe Flash, then it is time to switch over to HTML5, CSS, and JavaScript. A lot of programs allow creating complex animations using simple web code. Not only are these smaller, but are also interactive, and is supported in almost all newer browsers.