This document gives a variety of recommendations and guidelines for managing images. Some of these are specific to EventsAir, while others apply to image management in general.

Using the wrong size images can cause websites and portals to load slowly, display incorrectly, or even not stop working.

Why care about images and photos?

Many aspects of both EventsAir and event management involve images, such as attendee headshots, a banner used in your websites and portals, or other images such as hotel room photos or pictures used in portals or event websites.

This article won't make you a professional graphic illustrator; but it will give you a selection of skills to help you use images more effectively as part of running meetings and events.

If you're using 3D Mode, please also refer to the related article about 3D Mode, including the Technical Briefing: Custom Images in 3D Mode.

Images in EventsAir

Images are used in many different areas of EventsAir, including:

• Photos, logos, and QR codes for attendees, for name badges or in the mobile apps
• Graphics used for headers and footers, usually as part of the Brand Editor
• Images of hotels and hotel rooms
• Icons and splash screens used for mobile apps
• Images and graphics used in portals and websites
• Advertising in attendee mobile apps
• Images used for marketing communications

…and much more!

Understanding the types of images you are working with, and the general rules about them, helps ensure your websites and mobile apps load quickly and images look consistent and professional.

Fundamental concepts 

The following are a few important concepts and definitions:

Pixels

In digital formats, picture elements or pixels refer to the smallest units on a grid displaying an image. Pixels are measured in pixels per inch, or PPI. The more pixels per inch, the smaller each pixel, and therefore the sharper an image will appear to be. Pixelation occurs when there too few pixels per inch, causing each pixel to have visible edges.

EventsAir (and other programs) will often let you know what the width in pixels a certain image should be. For example:

• Headers and footers for interactive sites are typically 1000 pixels wide, and this information is found in the EventsAir Brand Editor.
• Icons used in mobile apps are typically 40 pixels by 40 pixels. 

Whenever a width in pixels is listed, it's very important to create or modify your images to these styles rather than having EventsAir resize the image.

For example, if you uploaded an image 5000 pixels wide for your website header, EventsAir would resize it, but the resulting large file size may slow down performance of websites or mobile applications.

 

Pixel information found in the Brand Editor

Pixel information found in the Mobile App Details Page (Styles Tab)

Dots per Inch (DPI)

DPI means dots per inch, and this relates to the resolution and quality of printed images. You will often see DPI used interchangeably with PPI. Generally, the more pixels you have, the higher a DPI you will have, but within EventsAir and most web-based projects we focus on pixels. However, if you are working with images that may be printed (such as name badges or brochures), be sure that you have images with sufficient DPI.

JPG versus PNG versus GIF images

There are three types of images that can be used on web pages: JPGs, and PNGs (and occasionally GIFs).

JPG images are commonly used for photographs and other images that have millions of colors. They provide a high level of compression, reducing the file size by sacrificing some of the image's quality. For web use, this loss is typically not noticeable, and even in print, unless you’re printing very large images, you won’t see any quality loss.

Saving an image as a PNG means you don’t lose any quality, but this usually results in a larger file size, however PNG files offer great background transparency.

GIF images are now usually only used for simple animations. GIFs have a limited color palette and as a result, are typically smaller files. 

Typical image size standards in EventsAir

The following is a list of the most common types of images used in EventsAir, and their recommended sizes in pixel width.

• Uploaded photos
  • 600 x 600 pixels – important for badges or other printed media
  • 300 x 300 pixels – okay for images to be viewed online or in mobile apps
• Mobile App Headers – 640 x 90 pixels
• Mobile App Icons – 144 x144 pixels
• Mobile App Splash Screens – 640 x 960 pixels
• Mobile App Ads – 640 x 90 pixels
• Website Banners and Footers – based on your brand, typically 1000 to 1200 pixels wide
• Merge Doc Headers and Footers – based on your brand, typically 640 pixels wide
   

Some more best practice recommendations

• When requesting headshots from attendees, you should be very clear about expectations:
  • Request minimum pixel width and height (typically 512 x 512 pixels).
  • Give them an example image.
  • Ask attendees NOT to upload an image from Facebook/other social media profile. 
• Use image at actual size (avoid resizing)
• Avoid very large images (maximum 1024 x 1024 pixels)

The top 3 image skills that will help you

When it comes to working with images, it is surprisingly simple to create attractive and properly sized images with knowledge of just three processes. You can do all of these using one of the programs described in the section below about image editing tools:

• Resizing
• Cropping
• Adjusting Brightness / Contrast

Why resize?

Properly resizing an image not only means you have the correct dimensions in pixels, but also an appropriate overall file size. As mentioned, it's very important to upload images at their actual size and not rely on EventsAir to completely resize them, because this can create incorrect file sizes.

 

A quick way to check file size is to locate the image in File Explorer and right click on the image. Within the dialogue box, select the Details tab and you will be able to view the pixel size and overall file size of the image (you will need to scroll down to view all details).

 

Why crop?

Cropping is simply cutting away portions of an image so it is properly balanced on the page or screen. It is also used to remove parts of a picture completely. For example:

          Uncropped                                                    Cropped

The Photo Review App in EventsAir has a built-in cropping function so you can adjust headshots uploaded by your attendees.

Why adjust brightness/contrast?

By increasing or decreasing brightness and increasing contrast (in small increments) you will often be able to improve the image quality. For example:

 

Original	Darkened and Contrast Increased

Some free image editing tools

There are many free or low-cost image editing tools available online. Some are downloaded as full software programs, some are apps, and some are web-based. The following list represents a few tools we have found to be highly useful, and all at no cost. These tools are just a sampling, there are many others available, and we do not provide technical support for any of these.

• PIXLR
• Paint.net
• Gimp
• Microsoft Word (believe it or not)
   

PIXLR

PIXLR is a free, web-based tool used for basic (and some advanced) image editing:

1. From your web browser, navigate to https://pixlr.com/.
2. Select PIXLR Express.
   
3. Select the Browse Icon on the opening screen to locate the image you want to edit.
4. Once your image is displayed in the PIXLR editor window, Select Adjustments and then select Resize.
   
5. Enter the new image dimensions (in pixels) in the resize window. You may need to test this a few times, but typically, images should not be larger than 800 pixels in width. This of course, will vary from image to image, but you will want to apply a reasonably uniform set of size standards so you images look proportional to each other and do not overwhelm the screen.
   
6. Select Apply.
7. Select Save in the top left-hand corner to save your changes. PIXLR will display the following quality and image renaming window.
   
8. If needed, enter a new name and adjust your quality by sliding the Quality Slider Bar. PIXLR will adjust quality automatically, and you can choose to adjust this manually as well. Once you have changed your image dimension, you can also choose a quality setting about 60% to 80% and keep a nice quality image for your website.

HINT: In many cases, you can simply open your image in PIXLR and select Save to adjust the quality without changing the dimensions. This shortcut lets you simply open the image in PIXLR and select SAVE to have PIXLR automatically adjust the image pixels with the Quality Slider.

9. You can now save your new image to the same location as the current image, and it will be overwritten. 
10. Update the image using the website builder and save your website.
11. Test your site by opening it in a browser and checking how the images are loading. This process of resizing images should resolve most performance issues relating to HTML editor pages with images.
12. You can also crop and adjust brightness along with many other adjustments as you require.

Paint.Net and GIMP

These tools are open-source and are free to download. Both tools install on your computer as a traditional application, and offer a high level of functionality similar to what you would find in Photoshop or other image editing software. The process is similar to the above.

   

Resizing images in Microsoft Word

Sometimes you need to manage an image, make it smaller to reduce the file size, or even crop the image, and you don’t have time to deal with another program. Fortunately, there is a program that almost everyone already has on their computer, and it can resize and crop in just a few seconds.

We’re talking about Microsoft Word!

One of Word’s little-known features is its ability to cut and paste images in various file formats. Even better, you can crop and resize in Word and easily save the image to a folder on your computer in the newly resized and cropped format. Here’s how:

1. Open Microsoft Word and insert an image that you know is pretty large. In this example, Turkey1.jpg is 1920 pixels wide and is 249 KB (24.9 MB) in size. This is a little large and may cause less than optimal performance. 
2. Click on the image in Microsoft Word and clicking on one of the corner controls, drag the image to a smaller size, about 1/3 of the original size. 
3. You can also right click and select Size and Position, and adjust the size by percentage or by inches.
4. You can also select the Crop Tool and crop the image if desired.
5. Once you have made your adjustments, right click on the image and select Save as Picture. 
6. When you check the file size, your new image now shows the following.
   
7. As you can see, the newly saved image is 357 pixels wide and 18.4 KB (1.8 MB) in size. While this method is not as exact as using a program such as Pixlr, it is very handy for quick resizing and saving.