Tips for Successful Content Management: Part 3, Image Dimensions and Formats

Search Options
Blog Search
Sign up for our monthly marketing trends enewsletter
  • 3/25/2020
    This is part three of five, a content management series featuring tips for the marketing coordinator or manager flying solo without a front end-development team. 
     
    You’ll learn how to better manage your content’s technical side and deliver a polished finished product to your audience, especially in your graphics. Be sure to catch up on part one, layouts and rich text, and part two, aspect ratios.
     
    Next, we’re going to take a look at some details to help you improve the performance and image quality of your site. This post will break down the options for image delivery to help you optimize assets for your site.
     

    Types of Image Formats: Raster vs. Vector

     
    The purpose and content of an image can be used to determine the format, which also affects the quality-performance balance. There are two categories of formats, vector and raster. Vector files (Adobe files, PDFs) are more flexible, made of mathematical formulas and allow for easy resizing. However, most images (jpegs, PNGs, GIFs and bitmaps) are raster, meaning that they store information about the color of each pixel, and therefore tend to have larger files when they have larger dimensions. It is much more difficult to resize a raster file.
     
    While raster images’ file sizes are influenced strongly by their dimensions, vector images’ file sizes are influenced by their complexity. Vector images are highly preferable for certain types of graphics such as logos because they scale infinitely without losing quality. When stored as vector data, these images also tend to have relatively low complexity, making them small files and an easy win for site performance.
     
    If the image is already an SVG, PDF, EPS or AI file, it most likely is vector. Of these, the only one that you would use for an image on the web is SVG, although PDF is a commonly-accepted format for downloadable assets which the user can save to his or her computer.
     
    But beware! Vector formats can contain raster data, which is inefficient. If a vector image contains raster data, you’ll want to export the image as an actual raster format.
     

    Differences Between Raster Image Formats

     
    Different types of graphics require different image formats. For example, photographs and logos are very different visuals and should not be in the same format. If they are, you risk slowing your website load time or compromising the quality of your photos. To help you create your web pages, here are a few examples of images and how they should be formatted.
     

    Logos and small, simple images = 8-bit PNG

    This category of images consists of any graphics that:
    • Are not photography, such as logos.
    • You don’t have vector versions of.
    • Are too complex for a vector format to create a small file.
     
    These graphics should ideally be formatted as an 8-bit PNG. This format uses limited palettes  in which not every color is representable in the image. This reduces the overall file size but makes 8-bit PNGs ideal for design elements with simple colors, like logos and buttons. (Note that the opposite of 8-bit is 24-bit, which is good for images with lots of complex colors, like photos.)
     

    Animated graphics = GIF

    For animated graphics, you might want to select the GIF format since PNG doesn’t support animation. Like PNGs, GIFs use palettes to reduce the file size.
     

    Transparent photos = 8-bit PNG

    If you need transparency in a photographic asset, you can format as a PNG, but you’re likely to have a much larger file. We recommend using 8-bit PNGs for this purpose, which have a smaller file size because they take advantage of palettes. If you find that an 8-bit PNG looks grainy or striated because of the palette, you might end up needing to export it at 24 bits, which could create a much larger file.
     

    Photographs without transparency = JPEG

    For photographs which don’t use transparent areas, JPEG is the best option. JPEG uses a unique compression that doesn’t rely on palettes and therefore won’t cause the photograph to look grainy or striated. Instead, a JPEG that’s optimized for a smaller size over quality might look blurry. For most web sites that we build, we deploy an image resizer that automatically optimizes these decisions for you.
     
    The effects of image compression, exaggerated to be seen easily. Left to right: dithered palettes causing graininess, palettes without dither causing saturation, low quality due to high JPEG compression.
     

    Raster Image Resizing Technologies

     
    For most raster images, we recommend uploading the asset with a width of 1920 and letting the height be determined by the aspect ratio. This is because we typically deploy an image resizing mechanism which optimizes the asset for the dimensions of the space that it’s going to occupy. The large dimensions ensure that the image resizing technology will have enough of the asset to work with. This method is carefully tuned to improve both visual quality and performance using our designers’ and developers’ understanding of how to get the most quality for a given file size. 
     
    Note that the methods used to resize images vary depending on circumstance. Different image resizing products work specifically on different platforms and occasionally we write the functionality ourselves.
     
    Additionally, these technologies aren’t typically compatible with rich text areas, whose flexible spaces need image assets to be sized to the dimensions at which you’d like to display them.
     
    Still can’t tell your raster from your vector? thunder::tech can make your graphics shine! If you’re having trouble taming your site’s visuals, get in touch and let’s talk.
     
    About the author::Benjamin John is a Senior Lead Front-End Developer at thunder::tech. He's responsible for programming interactive user interfaces and developing production processes. He enjoys creative problem solving and appreciates a clever riddle.
  • How to Optimize a Landing Page
  • 1125
Sign up for our monthly marketing newsletters