How to Resize Images for Responsive

Is your website powered by Virteom CMS? Do your images look good on your laptop but not on your 4k monitor? Are your pictures a good size on desktop but become oversized or deformed on a mobile device? More than likely you’re using pixels to set the dimensions of your photos, but is that the best way? This article will explain how you should be sizing the images on your Virteom powered website so that they look good across all devices.

As you make edits and additions to the pages of your website you find yourself adding images to support your content. Typically, the size of your image is too large for your page and with the popup picture below you set dimensions of your image using pixels:

Image Properties Window | Virteom

Setting your images dimensions using pixels is what makes your image stretch on your cell phone or from one screen to another. You don’t want to use pixels to set the dimensions of your images.

For example: Here we have a picture of a tablet:

Once we add it into the image uploader we see the width and height of this image is 1000px by 667px. If we kept it that size, it would be very large on the page and it would take up a lot of space. If it was viewed on a mobile device, it would appear stretched out and require you to scroll left and right. Take a look:

Computer Full Size Desktop | Virteom Computer full Sized mobile view | Virteom

Your first instincts may be to resize the image using the width and height that are in the image properties. If we resize the image to 600px by 400px and preview the page you’ll see in the browser it looks pretty good, but when we shrink down to a mobile view the image is stretched. See below:

Comp Resized - Desktop | VirteomComp Pic Resized Mobile | Virteom

How do we prevent the image from stretching? How do you predict what the image will do when it looks good in browser? We suggest using percentages as the width instead of just using a number. 

If you want your image to take up the entire width of your content region you would type 100% in the width box and leave the height blank. Like this:

Width Resize | Virteom 

Using percentages keeps your image relative no matter what screen your viewing it on. That way it doesn't look stretched out, overflow into another content region (or overlap text) and you won't have to worry about checking it on every device. See below:

 

 

Don’t want your image to take up the entire width of the content region? You can use any percentage to vary the size of the image. Only half? 50% - A quarter? 25%. You can use any variation of percentages! Your website visitors will be able to view your images seamlessly.

Want to see with your own two eyes how the images resize? Take the coner of your browser on this screen and resize it down to the smallest window you can. All of the images in this blog are using percentages. You'll see they change and adapt with the size of your browser window.

As you add photos on your website always use the percentages rule of thumb. It will keep your images in tact across all devices. If you have any question – contact a Virteom representative today!

Most Recent

How to Add, Edit and Delete Photo Galleries Using PhotoGrid

By Olivia Justice
July 24, 2019 Category: Learning, Modules

How to Add, Edit and Delete Photos in the PhotoGrid Module Does your Virteom powered website have a photo gallery on it? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. In this how-to article, we explain how to add new photos to the gallery, remove photos from a gallery, add captions and delete your photo gallery. Logging-In First things first, you must log-in to your Virteom powered website. You can do this by visiting your website and adding /virteom at the end. This will take you to the log-in screen for the site. Enter your email address in the email field Enter your password in the password field Click Login Navigate to the PhotoGrid Module Once youre logged-in you click Dashboard from the top gray editor menu. After clicking Dashboard use the left sidebar menu to navigate over to Modules. The module that handles gallery images is called PhotoGrid. Find PhotoGrid in the menu and click it. Now that you

How to Whitelist Emails

By Hayley Burke
July 08, 2019 Category: How To

Dont you hate it when you are waiting on an email from someone, and it never seems to come through, then days later you realize it was in your junk or spam folder the whole time? This is a common occurrence, especially these days with all of the unnecessary spam we get. That why you should whitelist email addresses that you know are from senders who have valuable information for you or contacts that you use frequently! What Does it Mean to Whitelist an Email? Whitelisting an email address is essentially just a list of approved senders so that you dont lose anything important to the junk folder. This practice is best for people who are signed up for any email subscriptions. How to Whitelist Emails: Whitelisting is an easy one-time process that allows you to never miss an email again. Though the process varies slightly based on the email platform, you use. Below are instructions on how to whitelist emails across the major email systems. Android Mail AOL Mail Apple Mail(OS X and

Why Do My WordPress Plug-Ins Keep Changing?

By Olivia Justice
June 18, 2019 Category: WordPress

WordPress is apublishing platform for managing your digital presence and establishing your brand. Even if there are no built-in options, themes, or features that you want or need, there are thousands of third-party plugins and web apps that can be integrated seamlessly. According to W3techs, WordPress has 58.8% of the CMS marketshare. However, what most site admins discover as they develop and expand their WordPress powered site, every plugin you install requires a steady stream of updates to keep all features working properly. Essentially, the maintenance is a nightmare. Developers update, upgrade, add-on and change plugins on what feels like a daily basis. If you dont have the technical knowledge to read through the plugin updates or version notes, you may be upgrading to a plugin that is not compatible with the version of WordPress youre running. And even if you have the technical knowledge, you may find that an update to one plugin has completely messed up the functionality of another

Most Recent

How to Add, Edit and Delete Photo Galleries Using PhotoGrid

By Olivia Justice
July 24, 2019 Category: Learning, Modules

How to Add, Edit and Delete Photos in the PhotoGrid Module Does your Virteom powered website have a photo gallery on it? Adding new photos to your gallery is really simple and even allows you to upload multiple images at one time. In this how-to article, we explain how to add new photos to the gallery, remove photos from a gallery, add captions and delete your photo gallery. Logging-In First things first, you must log-in to your Virteom powered website. You can do this by visiting your website and adding /virteom at the end. This will take you to the log-in screen for the site. Enter your email address in the email field Enter your password in the password field Click Login Navigate to the PhotoGrid Module Once youre logged-in you click Dashboard from the top gray editor menu. After clicking Dashboard use the left sidebar menu to navigate over to Modules. The module that handles gallery images is called PhotoGrid. Find PhotoGrid in the menu and click it. Now that you

How to Whitelist Emails

By Hayley Burke
July 08, 2019 Category: How To

Dont you hate it when you are waiting on an email from someone, and it never seems to come through, then days later you realize it was in your junk or spam folder the whole time? This is a common occurrence, especially these days with all of the unnecessary spam we get. That why you should whitelist email addresses that you know are from senders who have valuable information for you or contacts that you use frequently! What Does it Mean to Whitelist an Email? Whitelisting an email address is essentially just a list of approved senders so that you dont lose anything important to the junk folder. This practice is best for people who are signed up for any email subscriptions. How to Whitelist Emails: Whitelisting is an easy one-time process that allows you to never miss an email again. Though the process varies slightly based on the email platform, you use. Below are instructions on how to whitelist emails across the major email systems. Android Mail AOL Mail Apple Mail(OS X and

Why Do My WordPress Plug-Ins Keep Changing?

By Olivia Justice
June 18, 2019 Category: WordPress

WordPress is apublishing platform for managing your digital presence and establishing your brand. Even if there are no built-in options, themes, or features that you want or need, there are thousands of third-party plugins and web apps that can be integrated seamlessly. According to W3techs, WordPress has 58.8% of the CMS marketshare. However, what most site admins discover as they develop and expand their WordPress powered site, every plugin you install requires a steady stream of updates to keep all features working properly. Essentially, the maintenance is a nightmare. Developers update, upgrade, add-on and change plugins on what feels like a daily basis. If you dont have the technical knowledge to read through the plugin updates or version notes, you may be upgrading to a plugin that is not compatible with the version of WordPress youre running. And even if you have the technical knowledge, you may find that an update to one plugin has completely messed up the functionality of another