I have created a simple 1024x1024 icon.png under resources/ :
Then i run ionic resources and all the icons i need are generated under resources/android/icon/
My config.xml is changed to this:
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
</platform>
<icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
Now if i look at the app icon once installed it looks like the figure in the middle is bigger and ratio is not respected:
As you can see, the little red ball became a huge ball, this is something i don't understand, can anybody clarify me this?
(Can't place comments yet, so I'll do it by answering)
By the looks of it you're using an iconpack of some sort. (Since all the icons have the same shaped background with the original icon on top). My guess is that the icon pack eliminates most of the transparent space surrounding your icon (and all others), to fit the same icon design.
You can easily find out if this is indeed the case by either:
disabling the iconpack (the red circle should be normal sized now, with the surrounding whitespace)
making an icon with a border around the sides of the icon, so it probably won't cut off the whitespace.
If it is indeed the iconpack that's eliminating the surrounding whitespace, you could try to have a very light (99% transparent) layer as a background. This will prevent the iconpack from eliminating whitespace, so it won't scale the circle.
I wouldn't really recommend this though, since most people won't use an icon pack and then the icon could look a little strange on other devices.
I think it is because of the ionic resources command. It will read the image and auto crop the image depend on each screen size.
Ionic Resource Site said that no rounded corners maybe It's for non-transparent pixels outside the main picture, or it will resize/crop it to fit:
The icon image’s minimum dimensions should be 192x192 px, and should have no rounded corners.
You can try this:
Navigate to the project\resources\android\icon:
Check if every icon in was generated wrong ratio.
If it is bigger than your's original image, open up any picture editor like Photoshop or Paint and resize it manually by hand until fit your expected ratio (because you should only need the ionic resources generate the pre-sized picture).
Save and do it again for the others.
Rebuild the project.
UPDATE: Put 4 tiny pixel of color for 4 corners and try again. I think the device should know where is the correct border for the icon instead of resizing it.
Related
I am trying to build tooltip and modals for an iOS app using react-native. Issue I am facing is that background of tooltips and modals is not transparent. However its showing fine on android version of the app.
Is there some setting I am missing?
I have used different libraries like react-native-elements(tooltip, overlay), react-native date-time-picker and other dropdown and picker libraries of react-native but all are having black(solid color background) and actual layout is not being displayed.
Pasting a sample tooltip code as well,
<Tooltip withOverlay={true} overlayColor={Colors.unselected} backgroundColor={Colors.grey} width={250} height={'auto'}
ModalComponent={Modal}
popover={<EditMenu />}>
<Icon name={'downcircle'} family={'ant'} color={Colors.grey} size={18} />
</Tooltip>
You can achieve this by using RGBA background color with a fractional alpha channel value:
<Tooltip backgroundColor="rgba(0, 0, 0, 0.1)" />
Issue was fixed when I updated xcode and used iOS 13. Previously I was using iOS 12. Also tested it on physical device and there modals and tooltips are working fine.
We have a product details page on our website and it has a preview of a large image of the product. The problem is because of it being too large and hi-res, it takes time to load and render on our page. Now I've read about something called image upscaling or from what I've understood it works a bit more like lazyloading the images. So the concept is they generate a very small, in terms of file size and image dimension, version of the large image and set it as the initial preview of the image. Then size it up to same as the large image's original dimension. So it is stretched and they blur it out. They wait for the larger image to load then replace the smaller one with it once it is done loading. I've seen this in multiple blogs and news website and it seems like a very good solution. But my concern is, does this affect our page's SEO? If so, is there a way to implement this kind of behavior without hurting our page's SEO?
I understand that you have a problem with optimizing your images. To solve this, I recommend that you apply the following techniques:
Add the srcset attribute to the img element. The srcset attribute extends the functionality of the img element. If the browser does not support the srcset attribute, by default the image file is imported using the src attribute. If the browser supports the srcset attribute, you can specify a list of image sources and conditions (comma-separated) before the request is received. As a result, only those images that match the parameters of the device are downloaded and displayed.
Art direction in the responsive images with the element picture. If you want the images to vary depending on the characteristics of the device (art direction effect), use the element picture. The picture element specifies a declarative solution to provide multiple versions of the same image, depending on the various characteristics of the device: size, resolution, destination, and so on.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
In the above example, if the width of the browser is not less than 800 pixels, the head.jpg or head-2x.jpg format will be used (depending on the screen resolution of the device).If the width of the browser is from 450 to 800 pixels, the formats head-small.jpg or head-small-2x.jpg (also depending on the screen resolution of the device) are applied. If we are talking about a screen width of less than 450 pixels and a device with downward compatibility, the picture element will not be supported. In this case, the browser uses the img element to display the image on the screen (it must be enabled).
Images with relative dimensions. If the final image size is unknown, it is difficult to select the pixel density descriptor for image sources. This, in particular, refers to images that are stretched proportionally to the width of the browser and change their size depending on it. In this case does not indicate the fixed image size and pixel density. Instead, you can determine the size of the image being processed by adding a handle to width. This will allow the browser to automatically calculate the optimal pixel density and select the correct image to load.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
This example shows an image that takes half the width of the viewport (sizes = "50vw" when applying the viewport) and depends on the width of the browser and its ratio of logical and physical pixels. As a result, the browser can select an image that will be displayed correctly in a window of any size.
Please note that images of the JPG-JPEG format have approximately 50% less volume than PNG. Therefore, they are easier and faster to load. To change the image format and resize images, you can use this tool Photo Editor Online. To compress images, you can use this tool - JPEG and PNG compressors.
The best solution is the use of Accelerated Mobile Pages AMP. Please note that in their implementation of the image element is also used the srcset attribute.
Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN.
You can use for preloading images of the current web page with meta preload, eg: <link rel="preload" href="//examples.com/images/img1.jpg" as="image">
Read more Preload of W3C ++ Preloading content with rel="preload" of Moz.
For SEO I'm going to assume you want to go by googles standards for my answer.
lazy loading will help your bandwidth, not your SEO google will judge your website by full page load time.
I recommend you compress your images and that will be all the difference.
if you have any pictures you can load 20 pics and the have a button saying load more, then lazy load from there.
this would be a big SEO boost as your now loading half your website.
I have a website project that needs to emulate the experience of walking trough a set of chambers. Since Flash is obsolete I decided to go with HTML/CSS and JS to achieve this goal.
In order to click the doors I made some image mappings like this:
<area
alt="intrare-lobby"
title="Intrare"
shape="poly"
coords="1257,676,1256,569,1259,565,1268,560,1278,558,1287,558,1293,559,1298,560,1304,564,1306,568,1307,677"
rel="Intrare Lobby"
role="link"
/>
The problem that I found with image mappings is that the maximum adaptation to the screen's resolution that I can get is to make the image responsive. A responsive image adapts to the width of the page but not to its height.
Since the whole website is build out of an image it makes sense to use those images in CSS, making them background images, with "cover" set as its size.
The website will have a mobile version so this only needs to adapt to screens from tablet resolution upwards.
I know that image mappings are limited to the tag. Is there any way I can obtain the same effect with JavaScript on a background image?
The link to the project is https://sporedev.ro/pleiade2/. I currently have mappings on the statues on the left side and on the entrance doors to the building.
I've been having a lot of issues with displaying images on mobile devices. It has something to do with pixel ratios and scaling.
The idea is that I want to prevent billiniar filtering on my images. On desktop this is easy, just display the image at 1x, and it looks perfect.
There are some issues with desktop, such as when you try to scale up using the browser it filters the image, but you can at least upload a scaled version and it will look perfect.
Here is my test page: http://stage.samkeddy.com/test/
You can see that all but the second one are perfectly crisp.
But here is what it looks like on my phone: http://imgur.com/a/4rMKj
It's not even close to the right size. The image should be 70 pixels wide, but it comes out to either 53 or 63 pixels wide (one is page loaded, second is after double tapping).
I want my image to line up exactly with the pixels on my phone, is there a way to even achieve this?
Actually you should forget pixel in mobile device, like android, the screen density is barely same, a picture looks different at different density screen.
I suggest using some responsive design, use min-width parameter for a img tag, and the image from server side should big enough to prevent blur.
There are also some image service which provide scale function, you can add ?w=100&h=100 to thre image url for compressing a big picture to a small one.
I have a script that lays out these circular icons on the map, you hover over them, they spring up, text appears, etc. The icons are scaled relative to their position on the map, ie, the distance from 0 on the y-axis. I've tried to set the scale through CSS's width and height attributes and through the html width & heights on the img tag and still have the same problem:
Basically, in their dormant state, such as when the page is first loaded, or the user flicks between tabs, the images (trans' PNGs) are anti-aliased. However, when the hover() function, and thus the animate() function, is invoked, the images suddenly become jagged and horrid. I've noticed that this behaviour doesn't exist in firefox but does in safari and chrome. I don't know whether this is to do with Webkit, jQuery or just javascript itself but maybe someone could shine some light as google resulted in nothing. Any thoughts? :)
Please also note that the bottom left and bottom right icons look fine in both attached screenshots- they're unscaled ones!
Thanks a lot :)
Matt
i can only guess on this, but my assumption is that gecko and webkit use different scaling algorithms for images. thus it has nothing to do with javascript, jquery or png at all.
in fact, the image still has antialiased edges even in the webkit screenshot. (you see that when you zoom in)
the border is just messed up which is usually the result of a bad scaling algorithm.
try the following to confirm this assumption:
<img src="youricon.png" width="90%" height="90%">
and compare the result in the two browsers. you should see the same problem.
possible solutions:
make a smaller version of the image and replace image with the smaller one on hover instead of scaling it.
use a scalable vector graphics format like SVG for your icons.