Start a Blog | Part 7 | Images

Image Sizes

  • Header

  • Featured Image

  • Social Media

Free Stock Photos

Free Online Design Tools

 

Images

Setting up a theme to look like the demo, especially one with several widget areas on the home page, often depends on duplicating the image sizes.

Before you start the setup process, take the time to discover the image sizes for your homepage widgets, logo, header, and featured images.

screenshot of images on a website

 

Many premium themes (including Hello Glam from Hello You Designs) include image sizes in the documentation.

This theme uses retina images for both the front page widget areas and the logo.

Retina Display is the registered trademark used by Apple for a display technology used in their latest devices. This technology basically displays more dots per inch than older devices (around 300 DPI). This means crisper images and smoother font rendering.

If an image area on your website calls for a retina display ready image, you will need to create an image twice the size of the display area.

screenshot of website

 

The documentation for this theme also includes the size for the logo. The logo is also designed for retina display meaning the logo will display at half of its actual size.

screenshot of website

 

To discover the size of feature images or other images included in the layout, use the Right Click on your mouse to find the View Image Info menu item.

screenshot of website

 

If the information is available, your browser will display the image size, the actual image size (if it is different) and sometimes other properties.

 

screenshot of image criteria

 

The details displayed when you Right Click an image will depend upon your browser.

screenshot of image specs screen

For themes that do not include image sizes in the documentation, you can usually discover the logo and header sizes by clicking through the setting options in the Customizer.

For this theme, clicking the Site Identity gives you the option to upload a logo.

 

screenshot of backend of webiste

When you choose to upload a logo,  you discover the recommended logo size.

If you upload an image larger than this size, you will have to crop it.

screenshot of image dashboard

 

This theme also provides a place for a header image. Clicking on this option in the Customizer menu will cause a second screen to appear.

 

The recommended header image size will be displayed here.

 

You will need to use the Right Click to View Image Info option to discover the image sizes needed for your blog posts.

screenshot of image dashboard

 

If the Right Click option does not work, look for an add-on tool for your browser. The one I use is Measurett.

This tool adds an icon to your browser toolbar that allows you to measure the pixels of any given area on a page.

 

In addition to images specifically sized for your blog, each social media platform recommends specific image sizes.

You can find templates and links to regularly updated sources here.

images of various social platform logos

Free Photos

Many wonderful sites offer photos, illustrations, and graphics that are free to download and free to use for your blog and social media.

One of my favorites is Pixabay. You can start with a search using any word or refine your search with several options.

I use the color option when building a mood board for new sites. Spend some time using a combination of the options to find images that fit your needs.

screenshot of Pixabay website

 

One of the ways these sites make money is by offering links to premium image options. Any image in a section titled Sponsored or with a watermark across the image is a paid item.

Each site displays the paid images in the different layout. Be sure you are choosing a free image.

Look for the page number to see more images from your search criteria.

screenshot of Pixabay website images

 

Double-clicking on an image will cause a larger copy of the image to appear with a download button. Click on the download button to bring up image size options.

screenshot of pixabay website

Choose the image size you wish to download. Click the download button.

The image will be downloaded to your computer.

You can also find more free images here.

screenshot of pixabay image choices to download

Free Online Design Tools

Sign up for Canva with your email address and a password.

You’ll arrive at your Canva dashboard with templates for social media and other projects.

Canva saves each project and they will appear on this dashboard.

Don’t miss out on the full library of tutorials available for beginning to advanced users.

screenshot of canva website

 

Canva provides many templates sized for specific projects and platforms. It also allows you to create your own image sizes.

Click the green Create a Design button and click Custom Dimensions in the upper right corner. Add the pixel dimensions to the fields and click the green Design button.

screenshot of Canva dashboard

 

A Canva (or page) in the size you designated appears with background options in the left column.

Click on the full photo background image and drag it to the empty page.

The photo background will fill the page.

screenshot of Canva dashboard

 

Click the green Upload your own images button to upload photos from your computer.

Once the photos are fully uploaded, drag and drop them into the photo background.

screenshot of Canva dashboard

 

To adjust the size or cropping of the image, click the Crop button in the upper toolbar.

screenshot of Canva dashboard

 

The part of the image outside the crop lines will be displayed. You can drag the image to reposition it. You can also click on one of the corners to resize the image to fit your needs.

screenshot of canva dashboard

Once you are satisfied with the image, click the checkmark in the toolbar.

screenshot of Canva dashboard

You can duplicate the page and create additional images of the same size.

When you have completed your design, click the title area and update your title. Click the green Done button.

screenshot of Canva dashboard

 

Click the green Download button to download the image (or images) to your computer.

screenshot of Canva dashboard

 

To add text to an image, click the Text icon and one of the text sizes. Add your text to the box that appears.

screenshot of Canva website

 

Use the design tools to change the font, the size, and/or other aspects of the text.

screenshot of Canva website

 

When you have completed your design, download the image for your site.

Screenshot of Canva website