Request a Call
Request a Call
mockup_blogpost_00001.jpg

Posted | Date

Save and crop images for the web and our Nomad templates.

Categories | Learn

mockup_blogpost_00001.jpg

Posted | Date

Save and crop images for the web and our Nomad templates.

Categories | Learn

Save and crop images for the web and our Nomad templates.

Using images on your website is essential, it helps translate your story into visuals for your visitors on your website. Yet it is difficult for many (including professionals) to properly save an image on the web. Uploading images that are heavy (more than 5000px image size in width) will not only cause user experience issues on your site, but will also affect your SEO strategy (loading speed, ranking etc.)

In this article, we would like to guide you on how to prepare your images for the web, by exporting / saving them too well and optimizing existing images for speed. We also mention the recommended image formats for your Nomade Templates in the article. Finally, we’ll cover some SEO tips on how to properly name the image and why it’s so important to add ALT tags to your image.

Save and crop images for the web and our Nomad templates.

Using images on your website is essential, it helps translate your story into visuals for your visitors on your website. Yet it is difficult for many (including professionals) to properly save an image on the web. Uploading images that are heavy (more than 5000px image size in width) will not only cause user experience issues on your site, but will also affect your SEO strategy (loading speed, ranking etc.)

In this article, we would like to guide you on how to prepare your images for the web, by exporting / saving them too well and optimizing existing images for speed. We also mention the recommended image formats for your Nomade Templates in the article. Finally, we’ll cover some SEO tips on how to properly name the image and why it’s so important to add ALT tags to your image.

1. What are the best images for the web and our Nomad templates?

When uploading your images for the web, there are a few things to keep in mind, what are you going to use your image for, how large the file should be and what type of image you need in which position of your website.

Use and type picture

You may want to use different types of image formats on your website. We are going to walk you through the most commonly used formats and the format options that you can use for each area. Please note that these are recommended retina friendly format options, especially your audience will visit your website through their phone or through their laptop which is often between 13-15 inches.

1. What are the best images for the web and our Nomad templates?

When uploading your images for the web, there are a few things to keep in mind, what are you going to use your image for, how large the file should be and what type of image you need in which position of your website.

Use and type picture

You may want to use different types of image formats on your website. We are going to walk you through the most commonly used formats and the format options that you can use for each area. Please note that these are recommended retina friendly format options, especially your audience will visit your website through their phone or through their laptop which is often between 13-15 inches.

mockup_blogpost_00002.jpg

Full width image:
(2400pxx1600px, jpeg.)

mockup_blogpost_00003.jpg
Inside Content Images:
Horizontal – max. Width 1500 px.
Vertical – max. Width 1000 px.
Tip: It may happen that you need the full width of the page for a banner or background, take horizontal photos when taking the photos for your website so that you can capture a wider image. (unless it is portrait)

On your website there will be sections consisting of text, images, interaction to, buttons, etc. The images you will be using are actually a visual extension of your text area. Nomad Templates has created recommended sizes for our templates and Flex boxes, these are horizontal and vertical. See the images for recommended sizes.


If you want to use images for a slider or slide show, make sure all images have the same height. (Recommended 1500 pixels)


With a blog page we would like to recommend that you make all images the same width. (Recommended 1500 pixels)

Tip: It may happen that you need the full width of the page for a banner or background, take horizontal photos when taking the photos for your website so that you can capture a wider image. (unless it is portrait)

On your website there will be sections consisting of text, images, interaction to, buttons, etc. The images you will be using are actually a visual extension of your text area. Nomad Templates has created recommended sizes for our templates and Flex boxes, these are horizontal and vertical. See the images for recommended sizes.


If you want to use images for a slider or slide show, make sure all images have the same height. (Recommended 1500 pixels)


With a blog page we would like to recommend that you make all images the same width. (Recommended 1500 pixels)

2. Optimize and save images for the web

There are a few things to consider when optimizing your images before posting them to the web. We will first look at the type of file you want to use, you have JPG, PNG and GIF. JPG is the most common, the file is of format and you keep your quality.

Depending on your goal, you have now chosen the type file, now we will go deeper into the name. The name of your image is not only important for SEO but will also optimize the loading speed.
by_noof-blog-post_00001.jpg
Example: you would like to share your vacation in London via your blog, to optimize the file name of your images do not use capital letters or space.
But use london-holiday2020_0001.jpg.

2. Optimize and save images for the web

There are a few things to consider when optimizing your images before posting them to the web. We will first look at the type of file you want to use, you have JPG, PNG and GIF. JPG is the most common, the file is of format and you keep your quality.

Depending on your goal, you have now chosen the type file, now we will go deeper into the name. The name of your image is not only important for SEO but will also optimize the loading speed.
by_noof-blog-post_00001.jpg
Example: you would like to share your vacation in London via your blog, to optimize the file name of your images do not use capital letters or space.
But use london-holiday2020_0001.jpg.

3. SEO for images

We’ve gone through all the steps to upload the images to the web, now that we’ve done that we move on to the last and perhaps the most important step. You are now going to add ALT tags to your images, prevent the image for SEO purpose. The ALT tag is what the search engine (such as Google) uses to read your images. Without this tag, your images are virtually non-existent on the internet.
example_alt-tag_0001
Fortunately, WordPress offers several plug-ins that allow you to optimize your image SEO. We use SEO press, this plug-in helps you with every page, it checks the SEO and gives you tips for what can be improved. This plug-in also offers the possibility to add ALT tags to your images.

There are also plug-ins that do this automatically. It is a matter of feeling and investing time which plug-in works best for you.

3. SEO for images

We’ve gone through all the steps to upload the images to the web, now that we’ve done that we move on to the last and perhaps the most important step. You are now going to add ALT tags to your images, prevent the image for SEO purpose. The ALT tag is what the search engine (such as Google) uses to read your images. Without this tag, your images are virtually non-existent on the internet.
example_alt-tag_0001
Fortunately, WordPress offers several plug-ins that allow you to optimize your image SEO. We use SEO press, this plug-in helps you with every page, it checks the SEO and gives you tips for what can be improved. This plug-in also offers the possibility to add ALT tags to your images.

There are also plug-ins that do this automatically. It is a matter of feeling and investing time which plug-in works best for you.

Explore

Help

Hm-instagram
Hm-youtube
Pinterest-p

COPYRIGHT 2020 – COME FROM IM NOMADE AGENCY | Terms & Conditions | Private Policies

Type to search
Our time: 12:10pm CEST
Cancel Next Step
Go Back Cancel Next Step
Go Back Cancel Confirm
Close This Window
Discover Our Templates
Facebook
Instagram
Pinterest
Youtube