How to Optimize Your Website Images with Solodev's Image Editor

They say a picture's worth a thousand words. But when a picture isn't the right size on your website or blog post, you might be conjuring the wrong words. 

We've written a few pieces over the parsecs about adding style to your website images. But more often than not, content editors and marketers need a quick photo to spice up a blog post or break up a copy-heavy page layout.

That's why Solodev makes it easy to size and format your images directly in the CMS. Using our comprehensive Image Editor, you can quickly optimize your photos and graphics without resorting to any third-party editing software like Photoshop or Sketch.

In this article, we'll take a quick tour of the Image Editor and show you how to set custom dimensions while preserving aspect ratio, add spacing and borders around photos, align images to the left or right, add links, and more. We'll even look at some advanced features that allow you to add IDs, classes, and custom styles to images. 

A couple of best practices to keep in mind:

• Wherever possible, start with a smaller file size. Large files (more than 500KB) can be a real drag on page speed.
• Save your images as a .jpg, .png or .gif format.
• Use compression, but don't overcompress – the artifacting looks bad. Shoot for medium to high quality.
• Avoid using spaces or periods in your file name (dashes or underscores are OK).

 

Adding Images

For the purposes of our primer, we'll be using a standard Solodev blog module as our test kitchen. If you don't already have a blog installed on Solodev, you can learn how here. 

Now, there are two ways of adding images in Solodev:

• Browsing the server for previously uploaded images
• Uploading a file directly from your computer

When you install the Blog module on your website, you'll automatically have an _Assets folder that comes with the module folder:

In this Assets folder, you can upload anything related to a specific module. Consequently, the easiest way to manage and organize your blog assets is by uploading your images and other documents into your blog Assets folder.

To insert an image into your blog post, click on the Image button. A modal will pop up (like this):

When you click on the Browse Server button, the window below will appear:

Clicking on the folder button on the left will allow you to browse the images you've already uploaded to your Solodev website.

If you'd like to upload an image from your computer directly, click on the file button on the right – then select and drag the files you would like uploaded on the site.

 

Setting the Image Properties 

Once the image is uploaded and selected, an Image Properties modal will pop up:

Here are a few of the attributes you have access to in the modal:

Alternative (ALT) Text: Allows you to add a custom description of your photo, which improves the context for users with disabilities (and improves ADA accessibility compliance). This description will also help improve your page and site SEO. 

Width & Height: This can be set according to the dimensions of the photo you uploaded. You can manually adjust the size of the image to some degree, but any large changes should be done by re-sizing and uploading the photo again.

Border: Allows you to put a black border around your photo. Insert a numeric value to set the pixel width around the perimeter. 

HSpace/VSpace: Enables you to add padding around the image so it doesn't crowd your page text. In this instance, the "H" stands for horizontal and puts padding to the left and right of the photo, while the "V" stands for vertical and places it above and below. In general, you won't need to put padding above or below the photo because of the line spacing in the text, but horizontal padding of 10 pixels is considered the norm.

Align: Lets you move the photo to the right or left. By default, the image will align to the left margin based on where you place your cursor. If you leave the alignment, the text will appear above and below your photo. If you select right or left, the photo will align to that margin and the text will wrap around the photo.

 

Adding Links to Images

You can link your image to a specific URL by clicking on the Link tab and entering a domain. You can also control if the page will open in the same window or in a new window:

 

Advanced Settings

Finally, we have the Advanced tab - which provides some additional control around your image formatting. In the Advanced settings, you can add features like ID and class names to your image as well as custom styling. You can even set the language direction.

 

Make Images Part of Every Digital Experience

Images make your content more engaging. Sometimes, they serve a very strategic or educational purpose (think infographics or diagrams) – and other times, they're simply eye candy.

Regardless of how you're using photos or graphics on your website, having control at the content management level makes everything easier. No matter what your content model looks like, or how you run your content ops, you can improve your workflow and productivity by using these simple tools in Solodev.