I have a Content Slider (All-in-one-banner sort of) on the home page of my website.
Every time this banner slides onto the next image in the queue, the other images (png format) on my page are getting pixelated. Especially it happens in Chrome.
Images and Icons such as the logos, icons used for navigation, etc... - they get pixelated when a new slide changes on the banner.
Please help me.
Demo link (Open in chrome):
When the slides in the banner change, Look at the logo on the top and the logos to the right, and also the profile pics below,: indiaemerge.com/ieys2013
The solution I could figure out is that one should NOT use an image with large dimensions.
For example: I was trying to use an image of size 800px X 400px to fit it into a division of 200px X 50px. Because of this the image was getting distorted when slides would change.
I reduced the dimensions and resolution of the image to match the target division's dimensions and it worked.
Another way to fix this is to use an svg image file.
So the lesson to be learnt here is that always try to use an image (in case it is png or jpg) whose size meets your requirement as precisely as possible. If it is an svg image file then there won't be any problem.
Related
I´ve a cropped picture in a powerpoint layer and I want to change the picture without changing the size of the cropping area.
If I change the image by clicking "change picture" the cropping area resizes too, to show the whole picture.
How can I do that without changing the cropping area?
In Apple Keynote you only have to drag the picture you want to the cropping area and you only have to align it.
From my experience, I'm afraid you have to set the crop manually by "Format Picture" -"Crop" to remain the same cropping area when you replace a picture.
This isn't much help, but Libreoffice will do this. Crop, resize, then select your image and re-insert a new image - formatting will be the same, perfect for when you want to quickly redo formatting for same sized images.
In my experience, a picture that you insert to replace an existing one, using Change Picture, will "inherit" the crop&size settings of the old picture IF the old&new images are actually of the same size (in pixels) - if not, the new one will revert to the default crop&size so you will have to redo these manually.
This changes if the image to-be-replaced has any crop setting applied to it in Powerpoint. In this case, the replacing image will not inherit those, and might also be inserted with a different size&position, leading most likely to an unwanted result & further work needed.
A workaround I found is to first remove the crop setting from the old picture, replace with new image, then reapply the crop. This is still less work than having to manually redo the size&position (or to define these based on numbers copied from the PropertiesPane of the old image).
Quick work around: if you plan to have multiple same size images and you wish to use change image to swap the content on each page (something we do with floor plans all the time); don't bother cropping them.
Put the whole image in and crop it by sticking shapes on top of it, which are the same color as the presentation background color, like a mask.
optionally crop the images only when the whole presentation is finished.
I created an extension for Firefox and made a simple icon for it.
But when I tested it in the Addon manager the icon appeared blurry despite my source image was fine.
I started to experiment with different sizes and shapes of the icon.
Figured out that the icon container is 48x48 pixels and the default addon icon is 32x32.
But for any experiments the result was the same.
So I created a simple rectangle icon drawing it by pixels so it shouldn't blur anyway:
But the result blurred again:
There is some sub-pixels around the rectangle though the border should be crisp...
In pixels view:
Also I found the default extension icon (a puzzle piece) and in pixels it looks perfect but in the manager the borders are blurred a little though it's not obvious at first glance.
Are you sure this is not happening when you save the image? I don't know what app you are using, but many photo apps try to compress jpm images when you save them by default. Check this first.
Usually this does not happen with png images, so you could try using a png image instead as well.
It was silly enough... The broblem was the page scale not 100% on the Addons page. Pressed Ctrl+0 and all restored.
It happens sometimes on other web pages when I zoom in/out the view and images lose their sharpness.
We have a sprite of many icons which is 10564px x 80px. The icons are arranged horizontally.
In every other browser except IE10 the icons/images show up when being used as background images for tags with specific CSS to apply the relevant position.
When viewed in IE10 they do not show up at all and actually when you try to view the png file directly from the URL in IE10 it doesn't show either.
Any ideas?
After extensive testing, it turns out it's a limitation on the width of the PNG canvas and IE10.
PNG images would work and can be viewed right up until 8000px wide but no more than that, after that they just don't render.
After more testing it's related to whether or not they are transparent. PNGs with transparency just don't show at all whereas images without transparency show as a black block (canvas).
Whether or not MS will fix this remains to be seen... we live in hope!
The fix for us is to reduce the width of our sprite to 8000px and have two or more rows of icons/images well spaced out.
The fixes is only to separate the each individual image as single with minimum size, which will be less than 8000px wide;
We have got a view of a content type with an image and some fields, but the image is displayed way to large. We tried to adjust maximum resolution but that just crops the image and makes it pixelated. How can we get this image to be displayed smaller?
thanks.
In Drupal 7, you can use the core Image Styles (admin/config/media/image-styles) to set pre-defined image sizes, cropping, and more. Once you have an image style configured, you can use it to style an image in a view. This gives you complete control over image cropping and sizing. If you're using Drupal 6, the ImageCache module does the same thing.
I am trying to reference images with a greater height than width (portrait format) in KML script for Google Earth; however, the image always comes out as landscape, or rotated left 90 degrees, e.g.
<img id="id_photo" src="2012_01_21-dscf03.jpg" width="500"></img>
I've tried everything I could think of. Is there a image tag to correct this, e.g., format="portrait"?
Thanks,
Walter
This sounds like an example of EXIF only rotation. Which GE probably doesn't honour.
Some cameras etc, 'rotate' a image so its the right way up by setting a flag in the EXIF data. The raw JPG itself, is still in the landscape format.
A display (or convert) program, should hopefilly notice this 'rotation required' flag, and rotate the image.
But Google Earth probably doesnt honor it, so you are just seeing the baseline image as its actully stored (unrotated)
Recommend trying one of the applications mentioned here:
http://jpegclub.org/losslessapps.html
(many note they have automatic correction - so should "fix" your jpg files)
This is already an old thread, but I stumbled on the same problem. And did not find a solution for my situation. Eventually I found a way around, so I thought I'd share it here.
Basically the solution is to rotate the offending images twice, once 90° to the left and then back again.
What you had was an image with a width larger than the height, but with an orientation tag that tells an application to rotate it 90° (but Google Earth does not).
After rotating it twice it is an image with width and height switched, and an orientation tag that says not to rotate it.
Now any application, including Google Earth, will display it correctly.
I used ExifTool to write the tags for all my images to a CSV file, created a list from that with all the pictures to rotate, and used that list to tell IrfanView twice to rotate them.