Image Best Practices

Images play a huge role in how your website looks and feels—but they also affect performance, layout, and usability. Here are some guidelines to help you use images effectively across your site.

Optimize Your Image Files Before Uploading

Large, uncompressed images can slow down your site. Before uploading:

• Save images at 72 dpi (dots per inch), which is ideal for web use.

• Use image optimization tools like TinyJPG or Squoosh to compress your files without losing visual quality.

• Save in the right format: Use JPG for photos, PNG for images with transparency, and SVG for simple icons or logos (when possible).

Note: Cybernautic’s Editor automatically compresses your images when you upload them to the File Manager, but it's still recommended to optimize your files before uploading to get the best results.

Size Images Based on How They’ll Be Used

Consider where the image will appear on your site:

• Full-width or hero images should be at least 3000 pixels wide at 72 dpi to ensure they look crisp on all screen sizes.

• Small thumbnails or profile photos don’t need to be as large—something in the range of 400–800 pixels wide is typically fine.

• Avoid uploading images that are way larger than needed, even if they get scaled down on the site. They’ll just slow things down.

Consider Composition and Layout

Website images aren’t always displayed the same way they are in your photo gallery.

• Ask yourself: Where is the subject placed? If your site layout overlays text on top of the image, consider leaving space in the photo for that text to sit.

• If you're using a photo in a banner, hero section, or background area, it’s helpful to position the subject off-center (left, right, or center, depending on your layout).

• Test how it looks on desktop and mobile—cropping and positioning may vary.

Understand How Images Respond to Different Screen Sizes

There are two common ways images are used on websites:

Fully Responsive Image Scaling

• These images expand to fill the space and crop automatically based on screen size.

• Best for aesthetic or decorative use, like banners or section backgrounds.

• Text or logos should never be embedded in these images, because parts of the image might be hidden on smaller screens.

Pros:

• Visually dynamic
• Great for design-forward sections

Cons:

• You won’t always see the full image
• Cropping is determined by screen size, not by you

Proportional Image Scaling

• These images scale up or down but always keep the full image visible.

• Ideal for product photos, team headshots, logos, or other content that should never be cropped.

Pros:

• Full image is always shown
• Great for structured content areas

Cons:

• Not as flexible for use in design-heavy sections
• Can require more planning to fit naturally within responsive layouts
• Horizontal banners often become too small on mobile to read any content that is part of the image

Other Tips for Great Web Images

• Name your files descriptively (e.g., kitchen-remodel-bloomington.jpg instead of IMG_9382.jpg). It helps with organization and SEO.

• Use ALT text to improve accessibility and provide context for search engines.

  • You can add alt text to images inserted into any dynamic text area by clicking on the image and filling in the "alt text" field in the toolbar.

  • For images used in structured content areas, alt text is automatically assigned based on the title of the corresponding section or the image is marked as "decorative", which tells assistive technologies that it isn't needed for understanding web page content.

• Keep a consistent style throughout your site—colors, lighting, subject matter, and cropping should feel cohesive.