Compressing video for website background images

I'm building a website and hoping to have a web video play underneath a screen on the home page. The sample 11 second file on our template is an mp4 file at 1280 by 720, but it's onlye 340KB. Using media encoder I was only able to compress our 15 second clip in an mp4 format to a whopping 18 megabytes. Clearly I'm setting something improperly. I encoded using the Vimeo setting. How can I use media encoder to create such a small video file? Thanks.

Found one way to reduce the 18 mb file to 3 mb. I imported the MP4 into Photoshop then exported to Adobe Media Encoder at "low resolution." I couldn't find comparable settings in Adobe Media Encoder through the direct interface, so this means it must be possible to compress farther with this tool. Any additional ideas/suggestions? Thanks.

Similar Messages

Tips for Creating Background Image

I'd like to be able to use a background image on my website like this example: http://my.studiopress.com/themes/parallax/#demo-full
I've found a few images, but there either to light or colorful and the white text just doesn't stand out over the image.
Any tips from Photoshop experts on how I can transform images so they're faded/darker (like the image in the link) so my white text stands out clearly?

Wouldn't it make more sense to put your information on the main site page where everybody can see it?
Auto loading pop-up windows will be blocked by browsers with pop-up blocking (approx. 98%). If the site visitor initiates the pop-up by clicking a link, the pop-up won't be blocked.
That said, the manner in which pop-ups open depends on your site visitor's browser settings. For some it may open in a new tab. For others in a new window. That's why it's usually best to keep important information on the main site page where everybody will see it.
Pop-up windows in Dreamweaver:
Select a link. Go to the Behaviors Panel. Click the + sign and choose Open Browser Window. This will send up a dialogue for URL, window size, scroll bars, etc... Below is an old tutorial, but it's still relevant.
http://cbtcafe.com/dreamweaver/popup_text/index.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Compression tecniques for website use urgently needed

Hi there
I am creating short movies (about 2-5 mins) in Imovie HD and i want them to be downloadable from my website as a file (not streamed etc). I want the picture quality to be very good but the sound can be mono as its not as important. I need to keep file sizes to about 20mb or less. I am told that 320 x 240 is the size to go for websites - is that true?
My problem is that both PC and Mac users will be wanting to download the movies so compatability is very important. What file type should i go for (mpg, mov, avi, wmv) and what compression should i choose for the best cross platform compatability?
If anyone can help, i would be so grateful. If anyone has any good settings that they have tried and tested - that would be fantastic.
Many, many thanks
Daniel

I would create .mov ..that's to say QuickTime.. files: every Mac user has QuickTime on their machine, and Windows users often already have it, or can be guided to simply download it.
I've tried an assortment of compression codecs, and have found that a 'hardwired' codec-in-a-chip, rather than using software to compress, gives the fastest and sharpest results. So I run my mini-movies through an Archos recorder/player (..predecessor of the video iPod..) which encodes all incoming video in DivX format.
This plays great in QuickTime, except for the sound, which is - by default - hidden. So I run the resultant small video file through a little free program called 'DivX Validator', which resets the sound to the proper QuickTime format.
I then post that 'validated' compressed file on the web (..on my Homepage..) and it's playable by all versions of QuickTime, both old and new. [NOTE that only the latest QuickTime 7 seems to be able to play back videos encoded through the recent QT 7 H.264 hi-quality codec ..but DivX looks just as good, and can be played in any QT versions.]
Here's what a DivX-encoded movie looks like.. [This is a still slideshow burned to a DVD ..when it starts.. not moving video, and DivX really does justice to the hi-quality stills. And as DivX produced a small file size, it can be downloaded quickly!]
Other people will probably have other recommendations..

Compressing Video for DVD Burn Makes Text Look jagged

Hello,
I'm currently at the final steps of a lengthy video production project and am struggling to make the text elements of my finished video display correctly after compression prior to burning it to DVD.
I create and produce music for a living and don't have nearly as much experience with video editing. I'm a bit new to all of this and am using FCE 4.0.1 to create my video & Compressor and DVD Studio Pro 2 to compress and author video for DVD.
*My main issue is this:*
I'm using an imported still image as the title card for my film. It's a mixture of large plain Helvetica Neu font text with some additional stylized lettering created in Photoshop (which is why I'm not using FCE's built-in text generators for the title card). The typography isn't very wild and crazy, it's basically big bold letters and a few gentle curves. I exported the image (1200x600) from Photoshop as a .png and imported it into FCE.
When I export my finished video file (.png title card and all) out of FCE, I export it as a raw uncompressed Quicktime file:
Apple Intermediate Codec 1440x1080i
29.97 fps
Pixel Aspect Ratio: HD (1440x1080) (Anamorphic not checked).
Field Dominance: Upper (Odd).
(It displays in quicktime at 1920x1080 though.)
After initially exporting from FCE, the title card image and all the other text in my movie created from FCE's built-in text generators look fine. It's only after I compress the finished movie in DVD Studio Pro or Compressor that I get jagged looking edges on the curves of my letters, primarily the title card image (the text generated by FCE's generators holds up okay).
In compressor I'm using the "MPEG-2 6.2 Mbps 2-pass settings for DVD" preset and in DVD Studio Pro. Using '2 pass VBR', 'Best' motion tracking, 'best' and 'highest quality' on all the compression settings I can find. I'm encoding at a total rate of 6.5Mb/sec max and 6Mb/sec average. These are standards for compressing to DVD and since I'm preparing a master for reproduction, I've been told I shouldn't increase the data rate over this or I'll run into player compatibility issues down the line.
Any ideas on how I can make this text image last through the compression process and still look clean and crisp without having to increase the data rate of compression? I'm going to play with different file formats for now, but it that doesn't work I don't know where to go from there.
Thank you for any help insights you can provide.

I started with a variety of HD raw footage (most of it gathered on Canon 5D Mkii SLR Digital camera in the form of: H.624 1920x1080) but converted all my raw footage prior to editing into:
Apple Intermediate Codec 1440x1080i
29.97 fps
Pixel Aspect Ratio: HD (1440x1080) (Anamorphic not checked).
Field Dominance: Upper (Odd).
I edited everything in Final Cut Express 4.0.1 using the AVCHD Apple Intermediate Codec 1440x1080i60 at 29.97 fps sequence preset.
When I finished editing all my video I exported it as a raw uncompressed quicktime file which is also:
Apple Intermediate Codec 1440x1080i
29.97 fps
Pixel Aspect Ratio: HD (1440x1080) (Anamorphic not checked).
Field Dominance: Upper (Odd).
But when played in quicktime this finished video displays at 1920x1080, which I'm happy with. (I'm assuming this is the proper behavior of Apple Intermediate Codec? It seemed to take 1920x1080 footage, converted it to 1440x1080, and then spit it back out as 1920x1080 after the whole editing process.)
But seeing as how my issue is with an image file I'm creating in Photoshop and importing into my video sequence, I don't quite understand how the rest of my footage would really effect it. I've made sure to create the image using the same dimensions and pixel aspect ratio as my sequence frames by using one of the standard Photoshop screen templates (HD widescreen 1440x1080). I save my title card image as a non-interlaced .png file and import it into FCE.
When I place the imported image on the timeline, FCE doesn't resize it because it matches the frame dimensions of the sequence. When I view the image at 100% in FCE's viewer all of the image's lines, curves, and shapes display properly as they appear in my original photoshop file.
But for some reason FCE treats this imported .png image file as a 'rendered proxy.' So while it looks fine in FCE prior to rendering and exporting, when I export the video sequence containing this newly imported title card image, the resulting uncompressed quicktime file contains jagged horizontal lines across some of the characters in the title card image. It almost looks as if there's some interlacing issue going on.
However after much experimentation and trial and error I landed on a custom compression setting in Compressor that seemed to take care of this issue. I did as you recommended and selected a high quality 7.5 Mbps encoding preset (7.5 Mbps max/6.4 Mbps average), but noticed a 2 pass VBR rendered better results. What really seemed to do the trick was adding a deinterlace filter to the compression preset, and that miraculously seemed to eliminate the jagged lines in my title card image, restoring it to its original appearance (at least during my initial inspection in Compressor's preview mode).
After letting Compressor crank away, I looked at the finished compressed video in quicktime and the jagged interlaced-looking lines in my title card image have returned. Compressor's preview was somehow misguided.
Now my plan is to burn this compressed video to a DVD and view it on a TV to see if maybe these jagged lines in the final compressed version are only being caused by viewing on my computer's monitor. I'm hoping this is the case, otherwise I'm at a loss of what to do next.
If you need any more details please let me know. Otherwise I hope this is enough to give you a better idea of what issues I'm dealing with.
Thanks again for your insights.

Website Background Image

Sometimes when you get into more technical areas, you forget
the simple things. Can anyone assist on particulars of
creating a background image. For example: If I have a
particular design, artwork or photo that I'd like to place in the
background of a website (fill up entire screen), how do I
manipuate this to work? (other than adjusting size dimensions)
Thanks

Well, a pattern is not too difficult, you can have one
instance of the
pattern and when it repeats it will duplicate and fill the
screen. Now a
photo is an entirely different matter. It can not be scaled
with the browser
so you have to make it the size you want. You will need to
not allow it to
repeat or it will look real funky on a large screen. You may
want to make a
page background that will frame the image nicely, then place
a div for your
content and set the image as the background for the div. This
way the image
will float in the browser.
Just a suggestion, you'll have to experiment to see what
looks best.
Lawrence Cramer
*Adobe Community Expert* - Dreamweaver -
http://tinyurl.com/jhnyq
email: lawrence at cartweaver dot com
Cartweaver CF, ASP & PHP Shopping Cart for Dreamweaver
www.cartweaver.com
news://support.cartweaver.com
=====================================================
"bluemoonstudio" <[email protected]> wrote
in message
news:e961rl$rld$[email protected]..
> Sometimes when you get into more technical areas, you
forget the simple
> things.
> Can anyone assist on particulars of
> creating a background image. For example: If I have a
particular design,
> artwork or photo that I'd like to place in the
> background of a website (fill up entire screen), how do
I manipuate this
> to
> work? (other than adjusting size dimensions)
>
> Thanks
>

PLEASE Help with HTML code for email background image...

Hi there!
i have a background image that I want to pop into an html email widget for the email's background... here is the web link I created in Photoshop: file:///C:/Users/Rachel/Desktop/iMuse%20Clients/LeadMachine360/Email%20Signatures/tileabl e-metal-textures-2.html
If anyone could please help me out that would be AWESOME! I've attached pics of the background & I'm using Infusionsoft email builder which allows for HTML widgets. I have a code that I use for my landing pages & webforms which works, tried that but no dice!
Any help would be much appreciated - I'm an html newbie!
Here is the code that I use for landing pages & works great, tried it for the email & it was a fail:
<style>
#mainContent .background, {
      background: url('file:///C:/Users/Rachel/Desktop/iMuse%20Clients/LeadMachine360/Email%20Signatures/ti leable-metal-textures-2.html') no-repeat center center fixed;
    background-size: cover;
</style>
<script src="file:///C:/Users/Rachel/Desktop/iMuse%20Clients/LeadMachine360/Email%20Signatures/ti leable-metal-textures-2.html">
</script>
<script>
jQuery(document).ready(
      function(){
      jQuery(' table.bodyContainer').removeAttr('bgcolor');
</script>
thanks in advance!
Muse

Not sure what you expect. Your URL is absolute and pointing to a local file resource. It's not a proper relative HTML link. Beyond that it's toatlly unclear how you actually plan to load your image and where they are hosted, so nobody can tell you anything. Either way, there is an obviously painful lack of understanding of even the most basic web techniques, so the best advise anyone would give you is to spend some time with a web search and actualyl learn some of that stuff...
Mylenium

CODING FOR THE BACKGROUND IMAGE?

hello
I am more of an illustrator than a web guru...but would like to know how do they do this to the background image see: ttp://www.mozillamessaging.com/en-US/thunderbird/download/?product=thunderbird-3.0.4&os=o sx&lang=en-US
How do you design the background image so it "sits" at the top of the page and what do you do so that you have a "repeat" pattern on the ends of each side of the design?
Any help would be appreciated! I can't seem to figure it out!
cheers
Wes

What image are you reffering to?
if you use CSS for the page,
the image is put there in a div with a margin of 0
and to repeat an image you repeat-x for horizontal
and repeat-y for vertical.

Adding video to a background image

Hello,
Having a bit of trouble here. I have Premiere Elements 10 and I am trying to figure something out.
I have a background image that I want to be able to add video into a small section of it, while the rest of the image is still there. The area is framed, so it would go into a specific area on the image.
It would kind of look like how most of your news shows look with the video over the person shoulder, just instead of it being a live person, it is just a still image that the video is in.
I have tried using the Green Screen Key and it will black out the green box, but it will not put the video in there. I have the video on Video 2 witht he image on Video 1. When I add the video into Video 2 it just overlays the entire thing and I cannot see any of the background image at all.
Any help would be appreciated.
If you need, I can provide a link to someone elses youtube video to show what it is I am trying to do.
Thanks,
Michael

Are you talking about a Picture-in-Picture effect -- with a person sitting at a news desk and a photo or video inset in the upper left or upper right of the screen?
Here's a tutorial -- but how you specifically do it depends on which version of the program you're using.
http://www.youtube.com/watch?v=mzYs-ifrHjU

Website background image is not loading in firefox version 22.0

i am working on a website ,with earlier version of firefox(20.0) my website background page was loading properly but when i tried to see my webpage on latest firefox browser it does not load the background image ?

Reload the webpage while bypassing the cache using '''one''' of the following steps:
*Hold down the ''Shift'' key and click the ''Reload'' button with a left click.
OR
*Press ''Ctrl'' + ''F5'' or ''Ctrl'' + ''Shift'' + ''R'' (Windows and Linux)
*Press ''Command'' + ''Shift'' + ''R'' (Mac)
Let us know if this solves the issues you are having.

SHARPEN VIDEO FOR WEBSITE USE

Hi all,
I've got a couple of instruction films made from recorded computer screens. My task is to change the language for these. I use Premiere Pro 6.0.
THE MAKING
A "light" compression was used when recording, giving sharp images, that accepted a low frame rate (even though it says 20, it's maybe 2-3 frames per second).
Then the films were saved with good compression, that still gives sharp images.
THE EDITING
MP4
In .mp4 which I hear is the best format to use for webpages, the imported image gets blury.
What kind of parametres do I have to change to get a sharper image?
AVI
I then asked to have it in .avi but this doesn't work at all, error message when importing.
What should I do to make the moving shots originating from screens sharp again?
They are sharp when I look at them in Windows media player.
Many thanks,
F

>made from recorded computer screens
What software and what codec?
Read Bill Hunt on a file type as WRAPPER http://forums.adobe.com/thread/440037
What is a CODEC... a Primer http://forums.adobe.com/thread/546811
What CODEC is INSIDE that file? http://forums.adobe.com/thread/440037
Report back with the codec details of your file, use the programs below... a screen shot works well to SHOW people what you are doing
http://forums.adobe.com/thread/592070?tstart=30
For PC http://mediainfo.sourceforge.net/en or http://www.headbands.com/gspot/
>use Premiere Pro 6.0
Is there any reason why you have not updated? (I think PC version is now at 6.03)
All Adobe updates start here and select product, read to see if you need to install updates in number order, or if the updates are cumulative for the individual product http://www.adobe.com/downloads/updates/

Compressing video for iPod using QuickTime 7 Pro ("expert")

Hi all,
I purchased QuickTime 7 Pro thinking I would be able to compress 640x480 H.264 video for an iPod. I have a specific application that requires precise control over the compression -- that is, the no-option "Movie to iPod" export setting ain't gonna cut it.
I have tried many, many different setting combinations using "Movie to MPEG-4" and "Movie to QuickTime Movie" under "File" --> "Export" in QuickTime, and I have been careful to limit sizes and bitrates per iPod tech specs as published on the Apple Web site. However, while all of the H.264 files I have output will open in iTunes, none of them will sync to my iPod. Videos I output using standard MPEG-4 compression will sync to my iPod (and look awful), but videos using H.264 will not.
Does anyone know what settings I can use to export 640x480 H.264 video to my iPod, and how I can have more control over the process than just "Movie to iPod?"
Thanks!
-- Joey
What I got (the technical details):
WinXP Pro with all the latest updates on Intel
5G 60GB iPod w/ firmware ver 1.2
QuickTime 7.1.3 Pro
iTunes 7.0.1.8
multiple Wintel machines Windows XP Pro

Welcome to the discussions, Joeysirmons.
The developer that created VisualHub (Only for the Mac) has discovered how to create iPod compatible 640x480 video where the user has full control over the compression. The changes he made were to some public libraries so these methods should be finding their way to the ffmpeg based tools for Windows soon.

Compressing video for n97 using MAC ONLY SOFTWARE

Hi, i have several videos that wont play on n97, plays fine on a ipod video. I beleive they are all h264 encoded.
I have access to the following apps to compress video.
Mpeg streamclip
Quicktime PRO
iSquint
Final Cut Pro
Compressor
ANyone have good settings to use - the max i can use for good quality?
Also, anyway to re-compress my h264 videos so that degradation is kept to a minimum?
I am a MAC* user with a Nokia n97 - oh dear
*Mac is short for Macintosh, a computer made by a company called Apple.

Resolution: nHD 640x360
Bitrate: 1.5 Mbps or 1 Mbps
Framerate: 29.97 or 25 or whatever the source is.
Codec: h264 AVC baseline profile
That's what I would use.
Any re-encoding you do will add degradation, why do you need to re-encode?
640K Should be enough for everybody
El_Loco Nokia Video Blog

My website background image color is not correct in Safari????

On my website my background jpg image that appears in bottom left corner is not correct in Safari. In ALL other web browsers (Firefox 3.1, IE, Opera, etc) my website looks fine! So it must be a setting or error in Safari. The jpg image in question has a background color of 191919 (dark gray) and it matches in Firefox and IE, etc... but not in Safari? In Safari my jpg image is a lighter color than rest of webpage. My header is the same type of file (jpg with #191919 background) and it looks fine... THAT is the strange part!
Is this a known issue with safari or am I doing something wrong? I have tried no color management on the image in Photoshop and with color management in Photoshop (when I save for web) and this doesn't seem to matter. It is driving me crazy. My website looks silly in Safari with this error. www.eXacteXposure.com is the website.
David

flynlyons2 wrote:
On my website my background jpg image that appears in bottom left corner is not correct in Safari. ... My website looks silly in Safari with this error. www.eXacteXposure.com is the website.
I'm not seeing that problem here, either (Safari 3.1.2 in Mac OS X 10.5.5). The image at the bottom left corner matches the background nicely.
Have you looked at your site on more than one Mac running Safari? My thinking at this point is that your web site and images are fine, but there's a problem with your installation of Safari. Do you have any third party Safari "enhancers" or hacks installed?

Compressed VideoFormat for sending Desktop Images

Hi All,
In JMF 2.1.1 solutions, the ScreenGrabber captures the desktop images and uses RGBFormat. Which other VideoFormats can we use so that we can send the compressed data using RTP but still allow higher resolutions. JPEGFormat suports higher resolutions ?

Source format doesn't matter. JMF will transcode whatever the source format is into whatever the RTP format is for you automaticlly. Max resolution you're going to get is the minimum of the two.
[http://java.sun.com/javase/technologies/desktop/media/jmf/2.1.1/formats.html]
In windows, that leaves you with the options of JPEG and H.263, but H.263 at maximum supports CIF (352x288), so you're going to want to use JPEG_RTP as your video format.

Compressing video for web HTML5

When I'd create a video intro for a website, I used to export to the FLV format, but since Apple's made it clear that Flash isn't going to be supported, what is the preferred way (compression format) to deliver video that will play universally on everybody's browser/hardware? I keep hearing about HTML5, but how does one create a file format to comply with that language? Is there a Compressor preset I should be using?

H.264 is probably the codec of choice for the near future.
H.264 Is A Codec, Flash Is A Platform: One Can't Kill Off The Other
HTML5 Video

Compressing video for website background images

Similar Messages

Maybe you are looking for