• How To Optimize Images For Websites

    PUBLICATION DATE: 9 Apr 2019 | AUTHOR: Johan van Seijen | CATEGORY: WordPress,

  • Quick Summary: One of the basics of web design is optimizing image resolution and sizing. Although bandwidth grows with each passing year, it’s still more than a good practice to apply a handful of rules when designing your website. In this article we're going to cover image file types, image resolution, and placeholder widths in our WordPress themes.

  • Dimension warnings

    By now you should now that the largest viewport we support is 1440px. That means that a picture which is wider than this falls in the suspicious category. The only images that can be wider than 1440px are full width slides (a slide in a slider set to “widescreen”) and background slides. Because of their inherent nature, all of the other images that are bigger have to be sub-optimized.

    We provide clients with warnings when uploading images that cross certain dimension thresholds. As you will see we sometimes request uploading images with a certain dimension that will trigger the last of the following 2 warnings.

    1. “The image you've uploaded exceeds the width and / or height of 2000 px. Images this size will severely reduce your site's performance! Resize it.”
    2. “The image you've uploaded exceeds the width of 1366 px and / or height of 768 px. This is larger than the most commonly used screen resolution. You might consider resizing it.”

    Placeholder widths

    Individual widgets in combination with certain placeholder dimensions and / or configuration necessitate certain resolutions if the theme is to be optimised.

    The following are the exact placeholder dimensions at the largest 1440px viewport in full width mode:

    - one: 1332px
    - one-half: 639px
    - one-third: 408px
    - one-fourth: 293px
    - two-third: 870px

    The following are the exact placeholder dimensions at the largest 1440px viewport in sidebar mode. Note how some dimensions are the same for the full width mode; only the placeholder type changes:

    - one: 870px
    - one-half: 408px
    - one-third: 254px
    - one-fourth: 177px
    - two-third: 561px

    There’s only one dimension for the sidebar since it holds only the one row; it’s 408px.

    Optimizing for placeholder widths

    We don’t pretend designers to memorise the exact dimension of these placeholders. However, the following (sometimes rounded) dimensions should definitely be part of the designer’s vocabulary:

    - Background slides: 1900px x 1100px
    - Classic slides: 1332px x 400px
    - Classic slides widescreen: 1440px x 400px
    - Classic slides widescreen (full width container): 1900px x 400px
    - Callout background image one row: 1440px x 500px
    - Featured image: 900px x 450px
    - One-half service (full width container): 600px x 400px
    - One-third service (full width container): 400px x 250px
    - One-fourth service (full width container): 300px x 200px

    Image file types

    Only two types of image files are allowed when designing a theme:

    - Only use the .jpg and .png image extension
    - When transparency is a necessity (logos), always use the .png format even when it’s not visible in the front end. E.g. using a .jpg logo on a white background within the file, in a header with a white background (you won’t notice it being a .jpg) is forbidden

    Image resolution

    Both .jpg and .png have compressed formats when saving images. Keep the following in mind:

    - Although not really a compressed format; only use the png-24 format when saving images with the .png extension (not the png-8)
    - When compressing .jpg images a solid rule-of-thumb is to use the “medium” compression format in Photoshop. This’ll work 99% of the time. If you don't know Photoshop, start learning the basics for Photoshop is the industries design standard.

  • About the Author

    Johan van Seijen

    Co-founder

    Johan van Seijen is co-founder of Nexus Themes and our lead designer. After gaining a Master's Degree in Information Science he decided to try his luck in the illustration industry, working for clients as Avantgarde, Cosmopolitan and Glamour. With the return to the software industry grew the desire to create something to be truly proud of and which could spearhead his ambition of having his own company. And this company is what followed. He lives with his wife and daughter in Amsterdam.