Updated

Images


    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:

    links-folder

    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:

    1. temporarily rename the previous folder
    2. 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:

    1. Placed Image Sizes
    2. Why save high-quality images at reduced resolution?
    3. Converting High Quality Images
    4. A Folder Called Links
    5. Add a New Image
    6. Pixel Images
    7. Vector Images
    8. Embedded Images
    9. Working With Images’
    10. Images

    Sections:

    Leave a Reply

    Your email address will not be published. Required fields are marked *