Any updates regarding images in css files?

Squiz Matrix Support
1

Hi,


just searched aroud looking for some info regarding the use of images within css files.

Found out these 2 solutions:


  1. "Hard code" the url to the image asset direct in to the CSS file. With a result of something like: 
    background-image:url(http://[SYSTEM_ROOT]/__data/assets/image/75/XYZ.gif);

Negative to this is, what I can understand, performance issues?!





2. Put a style tag with reference to the image in the same way as including any asset to the design. With a result of something like:

    background-image:url(mysource_files/XYZ.gif);

This solution is a bit of a qick 'n dirty fix of the problem, as what I think of it.



A third one is using the CSS File asset and using Design Customization, but this isn't the most optimal solution either, in manner of performance.





So is there any nice solution at all?



Or can I use the third one without the performance issue with v.3.6.0?





Regards,

Daniel

2

[quote]Or can I use the third one without the performance issue with v.3.6.0?
Regards,

Daniel

[right][post=“7167”]<{POST_SNAPBACK}>[/post][/right][/quote]



We use the last option in 3.6 with Radio New Zealand with CSS caching on. It works great.



I had to do some last minutes tweaks yesterday and they were reflected on the front end right away (even though the page was cached the CSS is not - it is cahced locally by the browser).



chhers

Richard

3

Hi,


what kind of design area do you include into the css file to get the reference to the image?

4

[quote]what kind of design area do you include into the css file to get the reference to the image?
[right][post=“7203”]<{POST_SNAPBACK}>[/post][/right][/quote]



You don’t need a design area. Just reference the images using the mysource_files/ virtual location and upload those images as associated files of the CSS File asset. You then use the linked_css design area in your Design parsefile to link to the CSS File asset you created.



From v3.6, there is an option on the CSS File asset’s details screen whether or not to cache the file. If you do cache the file, you cannot use any design areas in the CSS parsefile, just the mysource_files/ virtual location.

5

If you hard code the URL link in either the CSS file or in the main parse file is the performance hit significant rather than by referencing the mysource_files/virtual location?

6

Actually, hard-coding the URL link is the fastest option for performance, assuming you get the URL correct. Remember that the Live/Public URL is different from a not-Public/not-Live URL.

7

[quote]Actually, hard-coding the URL link is the fastest option for performance, assuming you get the URL correct. Remember that the Live/Public URL is different from a not-Public/not-Live URL.
[right][post=“7213”]<{POST_SNAPBACK}>[/post][/right][/quote]



Isn’t using the mysource path (which is then rewritten into the cached CSS file) just as fast?



R.

8

[quote]Isn’t using the mysource path (which is then rewritten into the cached CSS file) just as fast?
[right][post=“7215”]<{POST_SNAPBACK}>[/post][/right][/quote]



Sorry, yes it is – because the cached CSS file then gets a static URL. :slight_smile: