05
Sep

Web Design with .JPG Images

Whilst absorbed in web design, you may have come across a variety of image types and wondered what the suffixes mean, if there are differences among them, and which one(s) you should use in your web design.

Today, ATB Creative’s web design experts would like to provide an overview of a common photography image type, .JPG or .JPEG).

.JPG is an image format that works well for photography with ascending and descending tones and soft, natural colour lines. Its acronym comes from its creator, Joint Photographic Experts Group, and it was created specifically for use with photographic images. Its quality retention algorithm and millions of shades make it work well for photographic web design and email projects.

JPG’s compression algorithm is known in the industry as lossy (a.k.a. “with losses to quality”). This means every time the image is compressed and saved, it loses a bit of its data. Its quality will be compromised after a number of compressions and resaves. This isn’t all bad, though; this reduces the sizes of the files, making load times more efficient and file sizes smaller. If you anticipate that a photo will be changed and saved over and over again, look into a “lossless” type of .JPG image format for your web design applications or go for a completely different format, like PSD or TIFF.

If you’re snapping your own photographs, note that all digital cameras save images in JPG formats, but some cameras also offer other formatting options. Check your camera’s user manual to determine if you need to adjust any settings before capturing JPG images for your web design.

Your experience with JPG formatted images has probably been marked by pixelation. When zooming in on a JPG image, it will pixelate, or separate with a low quality, fuzzy, blocked appearance. When the magnification is changed, good visual quality returns. Rather than bog you down with techy jargon, we’ll explain why this happens in a fairly simple manner: When relatively insignificant colour variants are detected in a JPG image, those portions are removed in order to keep the file small – whilst still maintaining the quality of your chosen image compression. The image’s quality remains constant as long as the image is not decompressed. If the photo is enlarged significantly, those discarded portions become conspicuously missing, resulting in that pixelated appearance.

JPG images work best when saved once and used as-is; however, there are ways to get around pixelation. To change the image size of a JPG image without losing image quality, move the compression slider until the image visibly deteriorates. Stop. Go back 10 per cent. Save the image. Use a high quality JPG software setting. Lower quality means more compression and a tinier file, but more artefacts, or portions that are mined and removed from a JPG file.

Knowing what type of image file format to use is important to web design, and the web design experts at ATB Creative Leeds can help. Simply call 0113 322 1490 or get in touch with us via the contact form below.