Media Folder – media types and how they helps us

The main files in the folder are image files - images ranging from portrait images or backgrounds image to images of characters and many more...

The Media Folder is one of the most known folders. This folder contains the full media files for our site, as well as videos, images and even complex animations. Each file in the site has its own format and so do media folders. Today we will talk about the different formats and how to upload them correctly to our site.

Images:

The main files in the folder are image files – images ranging from portrait images or backgrounds image to images of characters and many more…

 We have a few types of image formats and we’re going to go over them all in that part.

Jpeg / jpg image – One of the best-known formats, a simple image format that includes wallpapers. We’ll use this format for images that include a background or images we’d like to upload in low weight... An image of this format type is important for an adjusted ratio depending on where it should appear on the page. Because the width of a desktop page is 1920 pixels, there is no reason to upload a wider image than this size. For mobile, as of today the full width is 768 pixels (iPhone 11).

media formats jpg image

Png image – An image file without a background, an important detail is to build it without background with designing software (like Photoshop). PNG images are used on the site usually in a portrait, member’s image, or in an image of various graphic icons. We can use the image without background even in cases where we want to display our main product on the site. For example, an image like this won’t fit in case we want to show a catalog.

media formats png image

SVG file – A vector file built with dedicated designing software (Illustrator Dodge). This file is now considered the highest quality file for web apps, it is possible to resize the file freely and perform lots of cool design actions and animations. Such a file is recommended for use in icons and call-to-action buttons.

media formats svg image

Videos:

MP4 file – A video file with a full background, like the videos you watch on YouTube, Vimeo, Felix and so on…

Video files have a fixed ratio and cannot be resized Dimensions unless we have design software. An MP4 video file can be very heavy so if it is too heavy it is better to upload it to a third party company like YouTube or any video uploading network.

media formats mp4 image

LOTTIE ANIMATION / JSON file – The animation technology developed by AIRBNB. In the previous part we talked about an SVG image file and explained that it is the highest quality file, Lottie is actually the animated version of SVG files and it is the highest quality video / animated version! This file type is actually a very long code and requires dedicated software in order to watch these animations or videos.

media formats json image

Share:

Facebook
Twitter
LinkedIn
WhatsApp

Leave a Reply

Your email address will not be published. Required fields are marked *

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Social Media

Most Popular

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.

Related Posts

The differences between static content to dynamic content

In the ever-evolving landscape of web development, understanding the difference between static and dynamic content is crucial. Static and dynamic web contents play different roles in user experience and web performance and understanding their differences will help in striking a good balance between the use of dynamic and static content during web development.