Each image format is optimised for a different use, so it is essential to understand their differences and know when to use them.
More than 90% of websites include images in their content, as they often capture readers’ attention or explain complicated information through the use of infographics or screenshots. Images can also drive conversions and promote social sharing.
However, if you don’t use the right image format, you can end up slowing down your site or causing unwanted errors, resulting in a poor user experience.
This article will help you understand the differences between image formats and when it is best to use each one.
Raster vs Vector file types
Before discussing the differences between raster and vector graphics, it is important to understand the difference between lossy and lossless compression.
Lossy and lossless compression are considered compression techniques, while raster and vector are image file types.
Lossy compression is a process that removes part of the image data. While this significantly reduces the file size, it also reduces the quality of the image.
Lossless compression, on the other hand, only removes non-essential metadata. It only slightly reduces the file size, but preserves the image quality.
Raster images can be either lossy or lossless, while vector images are neither because their size is already small, so they do not need any compression.
To choose which file format is best for you, you should consider the quality of the image, how quickly you expect your visitors to open the images, and how much space you have available to store them.
Raster image file formats
Raster images are composed of grids of small square dots called pixels. Each pixel contains one colour, which aligns with another to form the image. The higher the resolution, the more detail can be seen in an image.
They also tend to have a larger file size than those that are vector. Examples of raster file formats are JPEG, GIF and PNG, which are the most common image file types on the web.
Use raster images for complex ideas with smooth edges and colour gradients, such as graphic design projects and photographs.
Each pixel in raster files has a defined colour, position and ratio depending on the resolution. This means that if you resize the image, the pixels will stretch to fill the extra space, making your image look blurry, distorted or pixelated.
Vector image file formats
Vector images are constructed from trajectories that are based on mathematical equations.
A path is defined by a start and end point, which are connected by lines and curves. It can be a straight line, a square or a curved shape. Each path can contain several properties, such as stroke colour, fill colour and thickness.
Because vector images are defined by algorithms – and not by a specific number of pixels – they can be scaled without distortion or loss of quality.
They tend to have smaller file sizes than raster images. Examples of vector image files are EPS, SVG and AI.
Vector files are often used for logos, icons or fonts, visual elements that are expected to have flexible scalability in any situation.
In comparison, the quality of the vector image format does not change when enlarged. In contrast, enlarging a raster image can reduce its quality.
9 main image file formats
Name | Extension | Features | Description |
---|---|---|---|
JPEG | .jpg, .jpeg | Lossy compression, high quality, small file size | A very common image format for photographs and images with a lot of details and colors |
PNG | .png | Lossless compression, constant quality, transparency support | A commonly used image format for graphics with transparency and in web design |
GIF | .gif | Lossless compression, animations, limited to 256 colors | A widely used animated image format on the internet for small animations or icons |
BMP | .bmp | Uncompressed, high quality, large file size | A native image format on Windows systems, not widely used on the internet due to its large file size |
TIFF | .tif, .tiff | Uncompressed or lossy compression, high quality, large file size | An image format mainly used in the printing and photography industry |
SVG | .svg | Uncompressed, scalable, vector format | A vector image format used in web design and vector graphics |
WebP | .webp | Lossy and lossless compression, smaller file size than JPEG and PNG, transparency support | An image format developed by Google to improve image loading speed on websites. Compatible with Chrome, Opera, and Firefox, but not with Safari and Edge |
HEIF | .heif, .heic | Lossy compression, higher quality and smaller file size than JPEG, support for high color depth images | An image format developed by ISO to improve storage efficiency for high quality images |
RAW | Varies by manufacturer | Uncompressed, high quality, large file size | A native image format from digital cameras that contains unprocessed information, allowing for greater control in image processing |
Please note that this table is a simplified representation of image formats, and there are some specific cases where it may be more appropriate to use a different format. There are also other formats that are not listed in this table but are used in some specific situations.
FAQ
Here’s a FAQ with H2 titles addressing some of the main questions people may have about image editing.
What is image editing?
Image editing refers to the process of manipulating or enhancing digital images using software tools. This can include tasks such as cropping, resizing, adjusting brightness and contrast, removing blemishes, and adding effects.
What software can be used for image editing?
There are many different software options available for image editing, both free and paid. Some popular options include Adobe Photoshop, Adobe Lightroom, GIMP, and PaintShop Pro. There are also many online image editing tools available, such as Pixlr and Canva.
How can I resize an image?
The process of resizing an image will vary depending on the software you are using. In general, you can typically find a “Resize” or “Image Size” option in the “Edit” or “Image” menu of the software. From there, you can enter the new dimensions for the image and the software will automatically adjust the size of the image.
What is image compression?
Image compression is the process of reducing the file size of an image without significantly degrading its quality. This is typically done by removing or reducing certain aspects of the image that are not immediately noticeable, such as by using lossy compression. Compression is useful when you are sending the image via email, uploading it to the internet or storing it in the device.
How can I adjust the brightness and contrast of an image?
Again, the specific process will vary depending on the software you are using. In most image editing software, you can typically find a “Brightness/Contrast” option in the “Adjustments” or “Image” menu. From there, you can use sliders or numerical input to adjust the brightness and contrast of the image.
How can I remove unwanted objects from an image?
Removing unwanted objects from an image can be a bit more advanced and will vary depending on the software you are using. In some programs, you may be able to use the “Clone Stamp” or “Healing Brush” tool to clone pixels from another part of the image and cover up the unwanted object. In other programs, you may be able to use the “Eraser” or “Magic Wand” tool to select and delete the unwanted object.
How can I add text or shapes to an image?
Most image editing software will have a variety of tools for adding text or shapes to an image. In many programs, you can find a “Text” or “Shape” tool in the toolbar, which will allow you to add text or geometric shapes to the image. From there, you can use various options to change the font, size, color and style of the text, or to change the shape of the figure you added.
Keep in mind that the options and terms may vary slightly depending on the software you are using, and some image editing software might have different tools.
Best image shortcuts in Photopea
Here is a table of some of the best image editing shortcuts in Photopea.com:
Shortcut | Function |
---|---|
Ctrl + Alt + O | Open image |
Ctrl + Alt + S | Save image |
Ctrl + Alt + N | New image |
Ctrl + Alt + Z | Undo |
Ctrl + Alt + Shift + Z | Redo |
Ctrl + Alt + D | Deselect |
Ctrl + Alt + T | Free Transform |
Ctrl + Alt + Shift + T | Repeat last Transform |
Ctrl + Alt + T | Show Transform |
Ctrl + Alt + J | New layer |
Ctrl + Alt + Shift + N | New layer set |
Ctrl + Alt + G | Group layers |
Ctrl + Alt + G | Ungroup layers |
Ctrl + Alt + Shift + E | Merge visible layers |
Ctrl + Shift + Alt + E | Merge all layers |
Ctrl + Alt + [ or ] | Move layer down or up |
Ctrl + Alt + M | Curves |
Ctrl + Alt + L | Levels |
Ctrl + Alt + Shift + L | Auto-Levels |
Ctrl + Alt + B | Color Balance |
Ctrl + Alt + Shift + B | Auto-Color |
Ctrl + Alt + B | Selective Color |