Innota

Uploading, optimizing and scaling images typically requires a lot of manual work and at least some Photoshop skills. In Innota all image related tasks are as easy as pie and they can be handled on the template level. Read on to learn more.

Uploading Files

The first thing you need to do is to upload your file to Innota server. Just click on Files => Upload file.

If you want to, you can easily type in a new name for your file. Innota will use this as the saved filename. If you want to create a folder structure to organize your files, you can use / in the filename.

For instance, you might upload an image from your phone named IMG_76387216378.JPG and you could rename it to 2016/03/start-of-the-vespa-season.jpg. This can help search engines to index the file and it helps you stay organized.

If you're uploading an image you have a couple of extra options. You can choose to optimize the image, or scale it before saving.

Linking to Files

Creating links to uploaded files and images is easy. When you open a file in the admin panel you can see the full, absolute URL to your file. You can copy paste this URL and send it to your friends or share it directly in social media.

There's an even easier way to create URL's if you're creating links inside your Innota site. There's a special file() function you can use to create the url to your file. Here's an example:

<p>
You can download the pdf <a href="{{ file('marketing.pdf') }}">here</a>.
</p>

This would be rendered as something like this

<p>
You can download the pdf <a href="https://cdn.innota.co/example/marketing.pdf">here</a>.
</p>

It's easy to create links to files using Markdown, for instance, inside a blog post. Here's a Markdown example:

You can download the pdf [here](file:marketing.pdf).

The rendered HTML would look exactly the same in both of the examples above.

Linking to Images

Linking to images as just as easy as linking to any other type of file. In fact, you can use the same file() function to get the full, absolute URL for your image.

<img src="{{ file('vespa.jpg') }}" alt="Vespa" />

This works perfectly, but there is a more powerful image() function just for linking to image files.

Scaling and Optimizing Images

image() function makes it easy to scale and optimize your images.

Technical Details

Under the hood we use jpegoptim to optimize JPEG images and pngquant to optimize PNG images.

Lets use this blog as an example. All of the blog posts include a header image, which is displayed both on the individual post page and the blog index. The main content column is only 605px wide, so there really is no point in using any wider images. But I'm lazy and I don't want to scale the images before uploading them to Innota, and this is exactly where image() function helps.

I can use the image() function to automatically scale and optimize the image. Here's how I can get the URL to the image scaled down to a width of 605px.

<img src="{{ image('vespa.jpg', { "width" : 605 }) }}" />

When Innota finds a image() function with width parameter set, it tries to find a file called vespa.jpg that is 605px wide. If such an image is not found, Innota tries to find the original file called vespa.jpg. If this file is found, Innota creates a copy of the file, scales it down to the desired width and optimizes the result.

The rendered HTML would look something like this

    <img src="https://cdn.innota.co/example/vespa_605x340.jpg" />

It couldn't get any easier than this to scale down your images based on the width of the container where the image will be displayed. The smaller the image resolution, the smaller the filesize and the faster your site loads.

Getting Image Dimensions

One of the HTML best practices is to set width and height attributes to all of your img tags. This makes the browser to reserver the space for the images even before the image is loaded. This can make the rendering of the web page faster.

If you're using image() function to dynamically scale images it might be difficult to get the image width and height. This is where image_height() and image_width() functions come into the picture.

Here's an example

<img src="{{ image('vespa.jpg') }}" 
width="{{ image_width('vespa.jpg') }}" 
height="{{ image_height('vespa.jpg') }}" />

This would be rendered as something like this

<img src="https://cdn.innota.co/example/vespa.jpg" width="1980" height="1080" />

These functions are most useful when you're using image() function to dynamically scale your images. Lets improve the example above and scale the image down to 605px and add both width and height attributes in the img tag.

<img src="{{ image('vespa.jpg', { "width" : 605 }) }}" 
width="{{ image_width('vespa.jpg', { "width" : 605 }) }}" 
height="{{ image_height('vespa.jpg', { "width" : 605 }) }}" />

This would be rendered as

<img src="https://cdn.innota.co/example/vespa_605x340.jpg" width="605" height="340" />

Both height and width are checked from the scaled down version of the image vespa.jpg. In this, case the width is, of course, 605px and you could hard code that, but the height is more difficult to get if you have images with many different aspect ratios.