• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Creating images for the web

    Images should Images should not
    • Support and break up copy.
    • Illustrate a point and add interest to a page.
    • Replace text or be the only source of important information. Visually impaired users will not be able to use your site if the content is in images.

    File format

    Save images as either .jpg .gif or .png format when using on the web. These are compressed formats so the file size isn't too large and are commonly accessible so users don't need special software to view them. .jpg images need to be in the RGB colour format to display in a web browser. If you use the Save for Web option in Photoshop then your images will be RGB. The CYMK colour format is only for Print and will not display in a web browser such as Internet Explorer or Firefox.

    File size

    Despite fast broadband speeds, images should still be lightweight. Mobile devices have slower internet speeds and charge a premium for downloads. No one likes to wait for a web page to load and images are usually the largest files on a page.

    You should also ensure that the file size is not too large. This is the amount of data that makes up the file is measured in kilobytes (kb) or megabytes (mb), 1000kb = 1mb. Taking an image directly off a digital camera will be far too large to put on a web page.

    The Image Browser has a maximum upload limit of 18MB per image, despite this we recommend your images be kept under 300kb each, where possible.

    Image dimensions

    To create images for the web you need to make sure they are the are the optimal height and width dimensions for how the image will be displayed on the page. These dimensions are measured in pixels.

    There are image styles designed for different purposes in a website. Commonly, the biggest use would be a Tall Banner on the home page. If you intend to upload an image for Tall Banners, it should be at least the width AND height for Tall Banner; 1140px wide AND 439px high.

    If you are uploading images that you know will only be used as thumbnails, the appropriate thumbnail size is 120px by 120px.

    For a list of all the available image sizes, see Image Styles.

    If you upload an images that is too small, and apply an image style that is bigger than the original uploaded image, the image will be stretched and may have a poor grainy appearance. It is far better that the original is big enough for the software to scale it down.

    Software to edit images

    You can prepare your images to have the appropriate file size and dimension by using software such as Adobe Photoshop (available through ITS) or GIMP (free).

    In Adobe Photoshop

    There is a video tutorial by Adobe on Save for Web

    The typical settings you would need to change are:

    Previous (Design & Build)Next (Buttons)