Great images can help get your message across and sell your product more effectively. However, there are several things to consider when generating images for the web.

This brief guide will show you how to.

By reading this guide your images will be perfectly sized, look flawless, load fast & work great across all devices… and thus drive far better results.

Adding Images to your Pages

Images can be added to your page in any text or image snippet. The great thing about adding images to a text or image field is that these images will all be 100% mobile responsive, meaning they will not be stretched or cropped on smaller screen sizes.

Adding Images Using an Image Snippet –

  1. In the editor, click the “Add Content” button on the left menu. Select “Images and Cards” from the dropdown menu
  2. Choose the image snippet that best suits your needs, click and drag it onto your page where you want it to appear

  3. Click on the existing image to bring up the Image Options menu. The first icon with the 2 arrows can be used to replace the existing image with your own image.

Adding Images to a Text Field –

  1. Click within the text field, position your cursor where you want the image to appear, then choose the “Insert Image” icon from the text editing bar that pops up. This will open the image library.
  2. Select your image from the image library, or click the Upload File button to upload a new image

Adding Background Images –

Our pages support adding background images to full page sections, as well as individual snippets.

  • To add a background image to a page section – click within the section and then click the pink Design Section button in the lower right corner of the section. This will open the Section Design menu on the left menu panel where you can update the background image or color for the entire section.

    Click the Background Image button to open the image library and select or upload a new image.

    Once you select a background image, new options will appear to choose the fill type (Fill, Center, or Tile), add a tinted Image Overlay, or make this background image a Parallax Image (parallax images are not supported on mobile browsers).

  • To add a background image to a snippet – This will apply the background image to the snippet container only. Click within the snippet you’re working on and then click the green Design button on the top of the snippet. This will open the Snippet Design menu on the left menu panel where you can update the background image or color for snippet.

    Click the Background Image button to open the image library and select or upload a new image.

    Once you select a background image, new options will appear to choose the fill type (Fill, Center, or Tile), add a tinted Image Overlay, or make this background image a Parallax Image (parallax images are not supported on mobile browsers).

Managing your Embedded Images

  • Click on the image to bring up the Image Options menu. This menu has 7 options: Replace, Align, Delete, Insert Link, Display, Set Alt Text, and Resize.
  • In addition to clicking the resize button on the options menu and entering a specific width/height for the image, you can also resize the image by dragging the corners in and out.
  • Use the link button to add hyperlinks to your images. Click the image, the click the Insert Link button. Enter the URL you wish to lead the user to when the image is clicked.

Image Dimensions

The best size for images depends on how much space you need to take up on the screen. Header or full-screen images will always be much larger than logo images, for example.

There are no set rules but as a general rule of thumb, here are a list of sizes according to the different on-screen elements:

Full page background images – Sizes that work well are 1600 x 1000 pixels and 1920 x 1200 pixels. Try to maintain a 4:3 (fullscreen) aspect ratio.

1600x1000

Header background images – at least 1600 pixels wide x 500 pixels tall. Depending on how tall you want the image to display, you can adjust the pixel height. Try to maintain a 16:9 (widescreen, horizontal, landscape) aspect ratio.

1600x500

It is important to keep in mind that background images are NOT responsive on mobile devices the same way that images added to a text/image field are. This is due to varying aspect ratios/screen sizes. There is a good chance that portions of your image will be cropped on mobile screens. For this reason, we recommend adding important images to a text or dedicated image field, rather than using them as a background image. We also do not recommend having logos or important text as part of your background image.

Some KickoffLabs themes have the option to add a different header image for mobile. This means desktop visitors will see one version of the image, while mobile visitors will see another.

For the mobile header background image, we recommend an image at least 800 pixels wide x 1200 pixels tall. Try to maintain a 16:9 (portrait, vertical) aspect ratio.

800x1200

Product feature images – 800 x 600 pixels work best, but product feature images vary the most in size. You may need to resize according to the on-page element size.

800x600

Logo images – around 300 x 150 pixels works best. The dimensions may vary depending on the size and layout of your logo.

300x150

Popup background images – ideal size for popup images is roughly 500 x 500 pixels or above, maintaining the same dimensions.

500px

Try to keep any important elements centered. If you add more content to the popup, you may need to adjust the background image height.

Mobile-responsive images – Keep in mind that since KickoffLabs pages (and most of the modern web) are mobile-responsive, your images will scale down according to the device being viewed on.

Because of this, certain parts of your images may not be visible or may shrink down. In this case, it’s best to keep the most crucial elements towards the center of your images. It may take a bit of trial and error to best optimize the viewing area of images.

Use a tool like Screenfly to preview your page in different device dimensions.

Image Creation

Most online tools let you both edit existing photos and create new image graphic designs. Here is a list of our favorites:

  • Adobe Creative Cloud – the mac daddy of photo and image creation (Photoshop, Illustrator, etc). Very steep learning curve.
  • Pablo – design engaging social media images.
  • Canva – build perfectly sized social media pics. They also feature a photo editor.
  • PicMonkey – creative tools for photo editing and graphic design.
  • BeFunky – produce photos and designs with easy-to-use editing tools.
  • GetStencil – simple image creation for social media. They include royalty-free photos.
  • Placeit – beautiful iPhone, iPad, iMac and Macbook mockup images and videos.

Looking for awesome stock photos? Check out our post on finding the perfect image, with sections linking to stock photography sites.

Exporting Images

Without getting into the technical details of each, here are the generally recommended formats  to ensure the best quality when exporting images for the web:

PNG, GIF or SVG – best for graphics heavy images like logos, text graphics, etc.

PNG, JPG and sometimes GIF – best for images combining photographs and graphics.

PNGs can produce larger files than their JPG equivalent, and this might impose longer download times for your visitors. Use them mainly for illustrations and graphics. Try experimenting with both formats and go with the one that looks best.

JPG – best used for photographs.

When exporting your files, be sure to use the following settings:

  • Export PNGs as PNG-24.
  • Export JPGs as sRGB quality.
  • GIFs should be set to loop.
  • All images should be at 72 ppi or above.
  • Do not attempt to upload any other file type. That means no PSD files!

Note that some of the tools mentioned in the “Image Creation” section will not provide some of the advanced settings, that’s because they are already optimized to provide great results.

When naming your files the best practice is to clearly label them. This will help prevent any encoding issues. Make sure the file name has no spaces, instead use underscores(_) or dashes (-). Also, it’s best to avoid using parenthesis and other special characters, like !, #, $ , %, &, * and others:

  • My_image_file.jpg – OK
  • My-Image-File.png – OK
  • My Image (*file).jpg – might break the internet. NOT OK

Optimizing Images

To ensure a fast-loading landing page, your images need to be optimized before you upload them to KickoffLabs servers. A good rule of thumb is under 200 Kilobytes for larger or background images and under 70 Kilobytes for more general images.

Using an online image optimization tool like Kraken or Optimizilla can reduce the image file size considerably while maintaining a crisp, clear image.

Image optimization tools are best used for images placed directly on your landing page, thanks page, website, etc. For images shared via social, it’s best to use the full-size, uncompressed image as social networks run their own image optimization.

For a super detailed look at image optimization, have a look at the Google Developers site.

Image Best Practices and Troubleshooting

Does KickoffLabs compress, optimize, re-format my images?

No. KickoffLabs does NOT do any type of image processing. What you upload is what your visitors see and share.

Improve your results with A/B testing.

Landing page optimization is an ongoing process. It’s recommended to A/B test your images.

For the most noticeable results, test images visible “above the fold” or near the call-to-action.

Don’t use stock photos.

Most stock photography looks bad. When possible, use your own custom images.

Where can I find images?

Here’s our guide for finding amazing images (although the title says background images, the advice applies to all types of images).

My images aren’t uploading in the designer.

The most common causes of image issues are:

  • special characters in the file name.
  • uploading a non-image file type (we recommend JPEG, PNG, or GIF).
  • image file is very large. Overly large images can also slow down your page load time.

My images are missing or are appearing broken on my landing page.

The most common cause of missing or broken issues is the image file being deleted from your image library. If your image is missing or broken, check your image library to ensure the image was not inadvertently deleted (we do not delete images from your library). If it was deleted, you will need to re-add the image to your library and then update the broken image to the new image.

 

If you have any questions or comments regarding using images with KickoffLabs, send an email to support@kickofflabs.com