Images – Svija ∴ Publish online with Adobe Illustrator

The “links” Folder

When Adobe Illustrator can’t find an image placed in a document, it automatically looks for a subfolder named “links”.

Svija imitates this behavior: every image used in a page must be stored in the “links” subfolder:

Images stored outside of the “links” folder will not be visible online.

It’s up to you

The information presented on this page is based on years of experience.

But, apart from keeping images in the “links” folder, none of the following guidelines is obligatory.

Higher Resolution, Lower Quality

To maximize image crispness, it’s best to use very high-resolution JPG images, mais stored at a low quality setting (0-30).

Pour maximiser la clarté des images, le plus efficace est d’utiliser des images JPG de très haute résolution mais de très basse qualité :

the image will be very detailed
the image will load quickly
JPG-related image defects will be imperceptible

Retina/4K or Not?

Currently, every Apple computer is sold with a “retina” screen (called “4K” for PC’s).

However, relatively few Windows computers are capable of displaying high-resolution content.

Optimal Image Resolution

For a retina screen:

Optimal resolution for an image placed in Adobe Illustrator:

the pixel size in Illustrator, multiplied by 2.4

For example, the same image would appear:

300px by 200px in Illustrator
720px by 480px in Photoshop

For a non-retina screen the multiplication factor would be 1.2.

Vector Images

It is possible and useful to place vector images in Svija pages:

The final page will contain the actual vector information. Keeping vector images in the “links” folder is practical but not required.

SVG images will be embedded in the Illustrator document immediately (it is not possible to update them by updating the source file — they have to be re-imported).

The AI and PDF formats are the most practical, because updates to the source files will be reflected immediately (if the page is already open in Illustrator) or as soon as the page is opened in Illustrator.

It is not possible to place vector images with a bitmapped component. The vector-based part of the image will display correctly but the bitmapped part will not be included in the final page.

An Illustrator file (.ai) works only if the option “Create PDF Compatible File” is checked when saving (checked by default).

As long as they do not contain bitmapped elements, linked .ai files are the best way to share common elements between pages.

Be Careful when Moving Images

As described, Illustrator will automatically look for missing images in a “links” folder.

But, if the image is not missing, Illustrator won’t look for it.

So, if you copy a document and its linked images to a new folder on your computer and open it, the linked images will be those in the old folder.

For example:

You copy a poster you made for a client into the folder “sync/desktop” of your site
You copy the linked images into the “links” subfolder
You open the poster and everything appears correct
You publish it online and all the images are missing

Even though you copied all the images to the correct folder, Illustrator found them in the older folder.

To update image links:

temporarily rename the previous folder
open the Illustrator fild for your site and re-save it

Step 1 causes Illustrator to update the links during step 2.

Color Profiles

Safari is the only browser that takes into account color profiles in displaying images.

For this reason, omitting the color profile is recommended when saving images for the web.

If images are saved without color profiles, all browsers will display them in the same way.

Pages in this section:

Sections: