Images, Galleries, and PDFs
      Back to home
      1. Help Center
      2. The Locable Marketing Platform
      3. Images, Galleries, and PDFs

      Best Practices for Image Sizes for Your Website and Social Platforms

      Learn how to properly size, optimize, and upload images so they look great on every screen—and when shared to Facebook or Google.

      Available for all plans on the Locable Marketing Platform

       

      Images play a big role in how your website looks, loads, and performs—both for visitors and in search results. Whether you're adding photos to your homepage, uploading a blog main image, or sharing events to Facebook or your Google Business Profile, it's important to use properly sized and optimized images.

      In this guide, we’ll walk you through everything you need to know, including:

      • The best file formats and image dimensions for your Locable-powered website

      • How our responsive software affects how images are displayed across different devices

      • Why compression, aspect ratio, and metadata matter

      • How to ensure your images look great and meet accessibility and SEO standards

      Follow these tips to help your site look professional, load quickly, and stand out when shared on social media.

      Supported Image Formats

      Locable websites support the following image file types:

      • JPG or JPEG – Best for photographs and colorful images

      • PNG – Ideal for images with transparency or simple graphics (like logos)

      Responsive Images

      Locable’s software is built to be responsive, which means it automatically adjusts the layout and content — including images — to look great on any screen size or device. This ensures your site is functional and visually appealing whether it's viewed on a desktop, tablet, or mobile phone.

      This ensures your site is functional and visually appealing whether it's viewed on a desktop, tablet, or mobile phone.

      What Does That Mean for Images?

      When you upload an image to your Locable-powered website, the software automatically resizes and repositions it to fit different screen sizes.

      For example, an image might appear wide and centered on a desktop, but cropped or stacked differently on a mobile phone.

      • If the image is too large, it could slow down your site or appear awkwardly cropped.
      • If it’s too small, it may look blurry or pixelated.

      That’s why it’s important to start with an image that’s sized and optimized correctly — we’ll handle the rest from there.

      Optimize an Image for Use on Your Website

      Optimizing images before uploading them helps your website load faster, improves search engine performance, and ensures great results when sharing to social media.

      Follow these steps to prepare your images properly for the web:

      • Remove Unnecessary Metadata - Images often contain hidden metadata like GPS location, camera details, and timestamps that are not needed on a website and could pose privacy or security risks.

      📌 Removing metadata helps reduce file size slightly and protects personal data (especially if the image was taken on a phone).

      • Compress the File Size - Smaller images load faster and provide a better experience. Aim to keep files under 5MB — ideally under 200 KB for most uses.

        • Minimum recommended width: 1200px

        • Maximum upload size: 5MB

      📌 If your image is larger than 5MB, you’ll be required to resize it before uploading.

      NOTE: If your image is too large, you'll need to resize or compress it using free tools like:

      You can also edit your image file in Windows or Mac to remove properties, location data, and personal information.

      Orientation & Cropping

      While square or portrait images can be used, they are more likely to be cropped to fit various containers and may not display as intended across all areas of the site. For best results, we recommend using landscape-oriented images (preferably 16:9 for banners or 4:3 for inline uses), especially for key placements such as:

      • Hero images (the large banner at the top of your web pages)

      • Event and Blog post main images

      • Column images

      Hero images, in particular, have unique display settings and may crop or scale differently depending on screen size. This is intentional and helps maintain a consistent, polished look across devices.

      Image Editing & Accessibility

      You can crop and rotate images directly within Locable. Additionally, it's important to add:

      • ALT text – describes the image for screen readers and supports ADA compliance.
        Example: “Community members enjoying a summer concert in downtown Jefferson.”

      • Title tags – provide additional context on hover and can support SEO. This can be a great place for a photo credit, for example.

      Learn about cropping and rotating images, as well as adding ALT and Title tags.

      Why We Recommend Images Without Text

      When adding images to your website or sharing them online, it's best to use images without text embedded in them.

      This recommendation is important for two key reasons:

      1. Better for SEO (Search Engine Optimization)

      Search engines like Google can’t read text inside an image, which means any important words (like your business name, location, or services) included in a graphic won’t help your website show up in search results. Instead, it's more effective to put important information in regular text on the page so search engines can see and use it to match your site with what people are searching for.

      2. Supports ADA Compliance (Accessibility)

      ADA compliance means your website is accessible to people with disabilities, including those using screen readers. Screen readers can describe an image only if there’s alternative (alt) text, but they can’t read the text that’s part of an image file itself. This makes it harder for users with visual impairments to understand what the image is trying to convey. Keeping text out of images ensures your content can be more easily understood and accessed by everyone.

       

      Conclusion: Set Your Images Up for Success

      By following these image best practices, you'll ensure your website loads quickly, looks great on every device, and is ready to shine when shared on social platforms like Facebook and Google.

      To recap, be sure to:

      • Use JPG or PNG formats only

      • Resize and optimize images before uploading

      • Stick to recommended aspect ratios (16:9 for banners, 4:3 for most other uses)

      • Compress images for faster loading

      • Remove metadata to protect privacy and reduce file size

      • Add ALT text and title tags to improve accessibility and SEO

      • Avoid embedding text in images for better visibility and compliance

      If you're ever unsure, aim for a clean, high-quality landscape image. And remember, Locable's responsive system will handle the rest.