Ensuring your images are the right size and format is crucial for optimal display on your Event Portal and can be beneficial in various other contexts. This guide will help you resize and prepare your images effectively.
Understanding Image Sizes and Requirements
Before you start resizing images, it's important to understand our application specific requirements:
Maximum Image Width: The maximum width for any embedded image is 920 pixels (px). Images wider than this will automatically be resized to a maximum of 920px in width. To ensure your images are optimized, we recommend resizing your images to no more than 920px wide.
Responsive Resizing on Small Devices: Images wider than the screen width of the device will be resized to fit 100% of the screen width.
Here are a few references for common image sizes:
Image Size | Width | Height |
Thumbnail | 100px | 100px |
Small | 250px | 250px |
Medium | 500px | 500px |
Large | 920px | 920px |
Preparing Your Images
Before uploading your images, ensure they are properly formatted:
Editing: Perform any image formatting (cropping, editing, touch-ups, etc.) before saving the image.
Hosting: Images must currently be hosted in a public location. For example, on a public web server, a public Dropbox link, Google Drive link, OneDrive link, etc.
Ensure links directly reference the image file and not a "preview page" of the image. Click here to learn more about embedding images from cloud-hosted providers.
Google Drive offers a free Direct Link Generator Tool.
Resizing Your Images
Using an Image Resizer Tool
Adobe offers a free Image Resizer Tool that's simple to use. Follow these steps:
Upload your image: Start by uploading the image you want to resize.
Choose a size: Select from the available templates or input your custom dimensions.
Download the resized image: Save the adjusted image for use in our application or other purposes.
Manual Resizing
If you prefer manual resizing, use image editing software like Photoshop, GIMP, or online tools like Pixlr. Adjust the image dimensions while maintaining the aspect ratio to prevent distortion.
Ensuring Accessibility
Alt Text: Always provide alternative text
[Sample Alt Text]for images. This ensures accessibility for users with screen readers or those with visual impairments.
For further assistance or questions, please contact our support team.