The Photoshop Guide to Web Design Image Formatting

If you are familiar or have ever played around in Adobe Photoshop, you’ve probably noticed the long list of image file extensions the software offers.

PSD, JPEG, PNG, GIF, SVG … they all look familiar enough, but have you wondered which format is best for what type of image files? What do these extensions mean and why do they even matter? Let’s talk about the different file formats, and how to use them for optimal web design.

Why is Image Formatting Important for Web Design?

The short answer is that different formats offer various levels of image qualities at different file sizes. Depending on what you are using the file for, image quality affects the aesthetics and performance of a website.

For instance, PNG files are great for high-quality images with transparent backgrounds. JPEG formats are ideal for photographs and great for compression. SVG is a vector graphic file that’s best with text rendering or logos which require non-pixel image files. We will talk about each format in detail soon.

Raster vs. Vector

Raster and vector are two important image types you need to understand before we talk about image formatting. These two terms categorize most of the graphic files available out there today.

photoshop guide image file size

Raster

Raster image file is also known as Bitmap image. It is made up of millions of pixels which are tiny little squares. When you enlarge a raster image, you can observe zig-zagged edge of each pixel.

The higher the PPI (Pixel per Inch) or DPI (Dot per Inch), the better resolution the image file has. However, high-quality raster files usually mean large file sizes. Raster image is good for photographs and digital images. Examples of raster files would be JPEG, PNG, and GIF.

Vector

Vector image files have no pixels, but are instead made up of points, lines and curves referred to as paths. Vector image is created through mathematical algorithms indicating the shapes and color profiles of paths.

You can shrink or enlarge a vector file without affecting its quality. There is no jagged edge no matter how much you enlarge a vector graphic. In addition, the file size is relatively small for this type of image due to its mathematical composition. So vector files are ideal for logos, text and prints. An example would be SVG.

Image File Extensions Explained

PSD

What is PSD?

PSD stands for Photoshop Document. It is a lossless file format that does not lose image quality no matter how many times you re-save it. It completely preserves all Adobe Photoshop working layers and effects applied to the image file.

photoshop guide image file size psd

Best Ways to Use PSD Files

PSD files are special because they are technically raster-based files that have the ability to save vector mask layers. This is one of the reasons why PSD is the prime choice “master working file” that graphic designers use to save and archive works. PSD file is also the file type for web developers to code designs into HTML-CSS layouts. In addition, PSD files have the flexibility to save as more than 20 different image formats.

Design Tool

Benefits

Price

Adobe Creative Suite

google
  • Photoshop is the industry standard for web design works. It is easy to use, versatile and intuitive
  • Your work is automatically synced and accessible through web, desktop, and mobile with Adobe Creative Cloud
  • Subscription comes with your own online portfolio website, premium fonts, and free cloud storage

$19.99 Monthly

Start Now

When not to Use PSD Files

The downside about PSD is its file size. It is usually extremely large, especially if the image is higher in resolution and has dozens of layers. PSD files cannot be directly uploaded as graphical components onto a website. It usually needs to be converted into a JPEG, PNG, GIF or SVG to be a valid website element.

JPEG

What is JPEG?

JPEG is named after Joint Photographic Expert Group. It is the most popular file type for photographs. It supports 24-bit color, which indicates it contains 16.7 million colors. It supports both RBG (Red, Green and Blue) and CMYK (Cyan, Magenta, Yellow and Key (Black)) color profiles.

JPEG is a raster image with lossy data compression. This means the image can lose some of its quality every time it is re-saved. JPEG is the accepted file format for most digital cameras, and it is widely used as web graphics.

photoshop guide image file size jpeg

Best Ways to Use JPEG Files

Due to its lossy format nature, JPEG is best for high-quality photos or complex digital graphics. Because of its flexibility in file quality and size, JPEG can save images in very high resolutions or compress into small file sizes for sharing. Its capability to accept both RBG and CMYK color profiles makes JPEG great for on-screen viewing and printing.

When not to Use JPEG Files

Do not use JPEG if you are making a logo or rendering fonts because they will look pixelated when enlarged. It is also not a good idea to save your working image file as a JPEG due to data loss in the process of repeated file saving. That is why a lossy image type really means irreversible data compression.

PNG

What is PNG?

PNG stands for Portable Network Graphics or PNG Not GIF. The latter came about because PNG does everything a GIF file can do but better. It was originally intended to replace GIF files, but both file types are still commonly used today.

PNG support colors up to 48-bit color. That is more than one billion different color profiles to make images vibrant. In addition, PNG is a lossless image type which means it contains reversible compression data. It allows PNG to be re-saved without quality loss.

photoshop guide image file size png

Best Ways to Use PNG Files

PNG format is best for saving images with transparent backgrounds. PNG delivers smooth edge and higher image qualities. Even after compression, no image quality is compromised.

When not to Use PNG Files

Although PNG is a lossless file format. It is still a raster image type. This means it still can look pixelated when zoomed it. PNG files do not support CMYK color profiles. So they don’t do great with commercial print jobs. It also does not support animations.

GIF

What is GIF?

GIF or Graphics Interchange Format was first invented in 1987. It is a lossless raster file format widely used for web design graphics and layouts. Its interlacing feature preloads an image to show a blurry version first before it has completely downloaded. GIF displays up to 256 indexed colors per image and is usually relatively small in file size. File size is affected by the number of colors in the image. The less color the image contains, the smaller the file size.

photoshop guide image file size gif

Best Ways to Use GIF Files

Due to its multi-image property, GIF files are good for simple animations. It is supported by all major web browsers and makes great solid-color web elements with sharp outlines. For example, buttons and simple line art make good candidates of GIF format.

When not to Use GIF File

One of the biggest disadvantages of the GIF format is its limited indexed color profile. Additionally, GIF can only display one level of transparency (0% or 100% transparency), which means it can produce a rather rough looking edge. Photos and graphics with a sophisticated color palette or gradient do not look their best in GIF format.

SVG

What is SVG?

SVG is Scalable Vector Graphics. It is an indexable and searchable open standard issue by the World Wide Web Consortium. It is an XML (Extensible Markup Language) based, lossless image format that does not pixelate. SVG can be easily resized and compressed with a simple text editor without compromising image quality. SVG supports vector and raster file types as well as hyperlinks.

photoshop guide image file size svg

Best Ways to Use SVG Files

SVG is the optimal format for web graphics such logo, icons and text rendering. It also displays animation and is compatible with CSS (Cascading Style Sheet) for web design. Best of all, SVG can be scripted and allowed metadata of the file’s content.

When not to Use SVG Files

SVG is not the most suitable file type for photographs. Although most browsers can display the format, it is not yet as widely supported as some of the other image types such as GIF or JPEG. In addition, SVG can only be read as a whole, not as a partial object. So it can affect the loading speed if the file is large in size.

Optimize Content with the Right Image Format

The right image format improves content optimization. While ensuring that the website loading speed is not negatively impacted by oversized graphics. Understanding properties of different image formatting helps webmasters make better use of these files and to improve overall website performance.

Also See