Raster vs. Vector
The two primary kinds of image file types/formats are raster and vector image files. Raster image files feature static pictures with fixed colors, positions, and proportions for each pixel based on the resolution. These are the majority of images you will find on the web.
Because these graphics are static, resizing them will result in the original design and pixels getting stretched to fill the extra space. As a result, the image will be hazy, pixelated, or otherwise deformed.
Vector graphics are more versatile than static raster image file formats. Instead of a single pixel, vector graphics use a system of lines and curves on a cartesian plane, scaled with the total area so you can indefinitely increase the original image resolution without losing quality or distortion.
JPG (or JPEG) – Joint Photographic Experts Group
The most popular image file format is JPG. It is the default for most digital cameras and photo apps and supports 224 or 16,777,216 colors. JPG also offers compression, making it ideal for web graphics. Plus, JPGs are easily recognized and displayed by most browsers, helping SEO optimization.
JPG is a lossy compression raster image file format ideal for distributing photos. The word “lossy” means it reduces the file size and the quality of the images when you use the format. This makes it unsuitable for the exact replication of imaging data.
JPG is also not a good choice for files that will undergo multiple edits since some image quality is lost each time the image is recompressed, particularly if the image is cropped or encoding parameters are changed.
JPG is ideal for images in blogs and articles and product images. However, they don’t work well for infographics or tutorial screenshots where the text is critical because the detail of the text will be lost.
Shopify uses JPG files for product images, pages, and blog posts because they provide the best overall balance of quality and file size. And, since JPG files are compressed, they will improve your site’s loading time.
PNG — Portable Network Graphics
PNG is a file format supported by all browsers for lossless image compression. This means it will maintain detail and contrast between colors and restore all image information when the file is decompressed during viewing. PNG shines in this area, offering much better text readability than the JPG platform.
Because of this, PNG is the ideal choice for infographics, banners, screenshots, and other graphics that include images and text. However, it is essential to remember that larger file sizes, especially high-resolution images, can slow down your website. If overused, they will result in enormous files of several megabytes.
Shopify recommends using PNG for decorative images such as logos, trims, borders, high-quality photos, or images with a transparent background.
GIF – Graphics Interchange Format
The GIF image file format is another type of raster image file that uses lossless compression, so the image quality does not degrade.
GIFs store image data using indexed color, meaning that a standard GIF image can only contain 256 colors. Compare that to the 16,777,216 colors a JPG can use, and you will understand why a GIF is not ideal for storing digital photos like those taken by a digital camera. In addition, images saved in the GIF format often look grainy and unrealistic.
GIFs are better suited for website buttons and banners because these images typically do not require various colors. Because GIF images have small file sizes, they load quickly online without losing quality. They are ideal for creating training animations and can improve the user experience.
Once the animation has been encoded into the actual GIF file, you cannot edit it. So before you begin, have the source data because if you don’t, you may have to start over if you want to make minor changes to your existing GIF file. Also, GIFs are not ideal on a website because of their size and less than optimal image quality.
SVG – Scalable Vector Graphics
The Scalable Vector Graphics file format – SVG renders two-dimensional images within the browser. Rather than using pixels like the raster format, SVG uses XML text to outline shapes and lines in the same way that mathematical equations create graphs. So SVG images can be scaled up infinitely without the loss of quality.
SVG is suitable for small file sizes and loss-free scalings like simple illustrations, shapes, and text. It is great for logos, icons, simple illustrations, and anything else you want to be freely scalable with your responsive design. However, it is not an ideal option for images or complex drawings.
The Impact Image Size has on Load Speed
The size of your pictures has a big impact on the loading speed of your website. For pictures that will be full-width (hero images, page title backgrounds, background images) pictures should be no bigger than 2000px x 1300px.
All pictures should be saved for the web at medium quality and no larger than 500 Kb – ideally, the image size should be under 150kb. Smaller file sizes not only load faster but are better for SEO.
Pictures used on a page should be no bigger than 1200px x 800px and saved for the web at medium quality. Remember, the smaller the file size, the faster the load speed. Use something like Photoshop or Gimp to edit your photos.
All photos should be .jpgs.
Use a .png for a logo file with a transparent background.
Images for E-Commerce Sites:
All product photography should be the exact same size and orientation (landscape or portrait). Square or close-to-square images work best; keeping all the images close to the exact dimensions helps with formatting on the product and category pages. If you have photos of different sizes and orientations, it will affect your product catalog, making it look messy and unprofessional.
Image resolution for product photos should be at least 72ppi (72 is the default for web images).
Image size at least 900px, up to 2048px, and at least 1000px if you want to enable the zoom feature for the product image.