Great images can help you 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:
- add an image to your page
- manage your images
- select the correct image dimension
- create your own great looking images
- export images in the proper file format
- optimize and shrink image file sizes
- upload the correct file format
- follow image best practices and troubleshoot image issues
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
- In the editor, click the “Add Content” button on the left menu and select one of the image snippet options that suits your needs. Then, drag the snippet onto the page.
- 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
- Click within the text field, position your cursor where you want the image to appear, then choose the “Insert Image” icon from the left side text editing menu. This will open the image library.
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 click the pink paintbrush icon 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/upload a new image.
You will also have the options 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, then click the pink paintbrush icon. This will open the snippet design menu, on the left menu panel, where you can update the background image or color for the snippet. Next, click the background image button to open the image library and select/upload a new image.
Managing Your Embedded Images
- Click on the image to bring up the image options menu. This menu has 7 options: Replace, Align, Remove, Insert Link, Display, Set Alt Text, Resize and Image Style.
- 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, then 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, we’ve created 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.
Header Background Images: These should be at-least 1600 x 500 pixels. 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.
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 change 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. We now support adding a separate section for mobile viewing. Read more about that here. This means desktop visitors will see one version of the image, while mobile viewers will see another.
For the mobile header background image, we recommend an image size of at-least 800 x 1200 pixels. Try to maintain a 16:9 (portrait, vertical) aspect ratio.
Product feature images: 800 x 600 pixels work best, but product feature images very the most in size. You may need to resize accordingly to the on-page element size.
Logo images: Around 300 x 150 pixels works best. The dimensions may vary, depending on the size and layout of your logo.
Pop-up background images: The ideal size for pop-up images is roughly 500 x 500 pixels or higher, maintaining the same dimensions.
Try to keep any important elements centered. If you add more content to the pop-up, 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, such as 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 images. 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 here.
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 graphic 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, which could 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 api 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 underscore (_) or dashes (-). Also, it’s best to avoid using parenthesis and other special characters, such as !, #, $, %, &, * etc.
Examples of what to do and what not to do:
- 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 pages, 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 doe 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. We’ve included the step by step guide to A/B testing on the KickoffLabs platform here.
Don’t use stock photos.
Most stock photography looks bad. When possible, use your own custom images.
Where can I find 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 image 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 ned to re-add the image to your library and update the broken image to the new image.
If you have any questions, or need help, please send us an email at: Support@kickofflabs.com