TYPO3 Image Insights

Feb 14, 2012
RTE Insert or modify image selector

Originally written by Marlies Cohen for Cannonbose.

Photos that come straight off a digital camera are way too big for the Internet in terms of actual dimensions and file size and therefore have to be resampled. For example, a 1MB image can be reduced to 50K, which will load much faster, especially for people with dial up service and it will take up less room on their computer’s hard drive.

  • Photos generally should be saved in JPG format
  • Icons and graphics are usually should be saved in GIF or PNG format

Unless you really need high resolution images, try to keep your photos no bigger than 1024×1024 when uploading into TYPO3. However, you may ignore this size limitation as TYPO3 will resize the images automatically as needed.

When creating new content elements, selecting the Text w/image, Text w/media files, or Image types will automatically enable resizing of related images. By default, the image is automatically resized to 600 pixels wide. If this image size needs to be changed, just write a new size in the width or height box.

  • The 600 width is set via TypoScript Constants
    styles.content.imgtext.maxW = 600 

For SEO purposes, be sure to fill in the Alternative and Title Text fields with reasonable image descriptions.

Aim alternative text tags towards search engines and title text tags to your readers.

As a bonus in image management, you can change the Image quality and apply Effects like rotating, grayscale and contrast.

When adding a picture inside the RTE (Rich Text Editor) via the Insert/modify image icon it is important to choose ‘New Magic Image’ rather than ‘New Plain Image’ at the top of the popup window and then select the image. This way the image will automatically be reduced.

The “Magic Image” automatic target resize can be altered with the following TSConfig code.

RTE.default.buttons.image.options {
    # realistic magic insert sizes
    magic.maxWidth = 480
    magic.maxHeight = 640

Like above for SEO, once you’ve inserted the image, be sure to click on it in the RTE and click the Insert/modify image icon again to set the Alternate and Title text tags.

Revised by Michael Cannon.

Related Entries

Donate for Good Karma

Your donation helps enable Aihrus's volunteer efforts towards mentoring young developers and supporting Open Source projects.

No money? Leave a testimonial for Aihrus instead.


Log In

Need an account? Register
Forgot your password? Recover

Guest Purchase?

If you purchased as a guest, then you need to convert to a real account before accessing your purchases.



Already registered? Log In