I cannot get Google Vision to detect Coke logos where they are less than 10% of the screen. Logo is approximately 200x30 but it is still pretty clearly discernible to a human eye. Visa logo next to it is a bit bigger and cannot be detected as well.
Anyone knows what is the minimum size for logo detection? These ones are easily recognized by mxnet.
I am using the regular sample code to detect it:
client = vision.ImageAnnotatorClient()
with io.open("tmp/"+filename, 'rb') as image_file:
content = image_file.read()
image = vision.types.Image(content=content)
response = client.logo_detection(image=image)
logos = response.logo_annotations
print('Logos:')
for logo in logos:
print(logo.description)
here is a sample image: https://imgur.com/a/giXjpVy
The recommended image size for logo detection is 640 x 480 pixels. Google Vision API's accuracy might vary for the given image quality. For your case, the quality of the actual logos in your image seems to be low for logo detection.
Related
I have trouble with facebook, twitter, mix.com basically with every social site. When I share my post all my images are automatically cropped from the center leaving peoples on images headless. How to force og:image to be cropped from the bottom only leaving the upper part of the image visible? I am using WordPress theme GeneratePress.
Make sure you are following the guidelines: https://developers.facebook.com/docs/sharing/webmasters/images
The minimum allowed image dimension is 200 x 200 pixels.
The size of the image file must not exceed 8 MB.
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that
are 600 x 315 pixels to display link page posts with larger images.
...
If you make sure to use the correct aspect ratio, you can limit the chance of getting cropped images:
Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.
I use linkedin v2 api and i`m having two problems:
1 - We have customer reports that when posting with us, the reach of the post is reduced dramatically.
2 - In addition, we find that when you publish an image via the API, Linkedin is adding a gray border. Even for images that follow the pattern indicated by your documentation.
Can you help with this issues?
unfortunately, LinkedIn is still sending people here from there support. I will not be able to answer question 1. But for question 2 you should check out the following:
Click here for more information about the images
We recommend that you upload rich media in 1200 x 627 aspect ratio. Images uploaded in the recommended 1200 x 627 ratio are automatically displayed on the mobile app with white padding on the top/bottom or sides of the image, to fit the ratio without being cropped. Although a 3:2 aspect ratio, or 1200 x 800, displays fully without padding, we recommend using the industry-standard 1200 x 627 ratio. Link share thumbnail image uploads are displayed in a 2:1 ratio. Limit text in rich media images to the center of the image in a title-safe area.
Please go through this link https://www.linkedin.com/help/linkedin/topics/6227/6237/81310/customizing-an-image-and-title-when-posting-a-url-on-your-linkedin-page?lang=en
I'm building a page which is supposed to be full retina ready. I'm creating a retina version of all the small-medium images.
It looks good when you look at the 100x100 pixel version of a 50x50 image on devices with high density screens. But what if the image is much larger? Like a background image of a slider with 1700x600 pixel dimensions, should this get a retina version as well? The image's size is already much bigger than almost every mobile device's resolution. Would a 1700x600 or a 3400x1200 image look different on a 640x960 display?
Don't forget about retina enabled laptops, and iPads... In my experience most images you can save at a scale of about 150% the expected viewing size, and they still look great on a high density screen. You should play with compression quality as well, a lot of times you can lower the quality and still have an image that looks great because of the shear amount of extra pixels.
See this for an example of what I'm talking about: http://filamentgroup.com/lab/rwd_img_compression/
I have an 40px by 20px image with 72 Pixels / Inch.
I would like to create a Retina display version.
What should I do? Double the size? Change the resolution?
And in which format should I save it? PNG? JPG? ...
I am using this image on a web site ...
In your image editor, double the size of your image to 80px by 40px.
In your markup set the width to 40 and height to 20.
<img src="example.png" width="40" height="20" />
You should save as png if you need transparency or the image is line art. Save photographs as jpg.
My answer is convert your image into SVG
Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).
<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />
As long as you use Modernzr which can work to get svg friendly in most browsers.
You can see it here how it's done:
http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
Hope it helps :)
A retina display image (or high-density display image) is double the pixel size of a standard image - its scaling factor is 2.0. This means that yes, for your 40x20 pixel image, you will need to make an 80x40 pixel version (that is then displayed at double pixel density on screen). The format doesn't matter as much, both PNG and JPG will work fine (PNG will not degrade in quality with compression, but the file size will be larger than JPG).
However, the problem with high-density display images is that they take up more bandwidth, and are unnecessary for devices that don't have the high resolution or Retina displays. This means more data transferred over the network, inconveniencing mobile users and those with limited data transfer caps.
One solution is to use something like Retina.js. It's an open-source javascript client script that will automatically load the retina-sized image from your server and swap it in-place for the low-density version, if it exists. It follows Apple's standard for naming high-resolution images - #2x, so you can have HTML code like this:
<img src="/images/my_image.jpg" />
and the script will search your server also for /images/my_image#2x.jpg. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.
Generally as of this writing there are two types of retina displays, hence you should create an image for each type.
For a 2× device, you would need to produce twice the logical pixels' width and height with a resolution of 144 pixels per inch (72 ppi ✕ 2).
For a 3× device, you would need three times the logical pixels with a resolution of 216 pixels per inch (72 ppi ✕ 3).
Examples of 2× devices are the MacBook Pro (released in 2012-2019) and most iPhone since the iPhone 4. Examples of 3×
devices are the iPhone 6 Plus, and the iPhone X. However the iPhone Xr is a 2× device.
Hence for your case you would need images in 80 px ✕ 40 px and 120 px ✕ 60 px for 2× and 3× devices respectively.
Retina displays are not dependent on the specific bitmap image format. You can use the original image format. For websites, you should use JPG for photographs and PNG for line-art graphics saved as bitmaps.
You should not just blindly enlarge images otherwise this would create a blurred results – it would no better than if you don't include any high-resolution versions in the first place. Either obtain the original higher-resolution version of the images (typically from vector graphic source) and downscale them or use a machine-learning based image enhancement solution such as Bigger Picture to "convert" your image into a higher resolution.
Photoshop gives you a couple options for resizing an image. For instance if the image is iPhone size you can increase the image size by 200%. Photoshop gives you a couple options for resampling of the image. Bicubic, bilinear and etc. This will remake the image at a higher resolution and interpolate the missing pixels. Hope this helps.
This is a really interesting article showing a nice option for dealing with high res images:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Basically, it's saying that, if you make the image quite large (width and height) but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that the file size is very low, too, which is an extra bonus. You can set the width and height of the image in your CSS and/or HTML to set it to the visual dimensions you desire.
This article blew me away, and is my go-to approach for dealing with both retina-friendly and bandwidth-friendly images. Win, win.
You can use CSS opacity option.
This will give you an transparent look of your image based upon the value you set to opacity.
Try learning opacity: http://www.w3schools.com/css/css_image_transparency.asp
I want to display "natural size" pictures of goods on web site.
First of course i calculate size of picture :
<Height of picture in pixels> * <real height of item in mm>
-----------------------------------------------------------
<height of item on the picture in pixels>
Formula is logicaly correct and it works fine on
desktop 17'' 4:3 monitor 1280*1024.
Any other device shows metrics wrong.
I test:
2 smartphone.
22'' 1920*1080 desktop monitor
13.3'' 1366*768 notebook
14'' 1600*900 notebook
They all not 4:3 aspect ratio.
what's wrong with that? How can i reach my goal?
I search web but only workaround i found is to display piece of A4 size paper and ask user zoom page.
I better ask user to setup their system, but how to do it?
Unfortunately, although methods exist to query the browser for the exact pixels per inch of its display, the browser vendors decided to agree to a convenient lie... all browsers report 96 pixels per inch. Although you can get a browser to report this fact to you, there is no way to get the real pixels per inch.
A famous example is that there is no way through Javascript, HTML, or CSS to detect the difference between an IPad 2 and an IPad Mini, despite having radically different pixel density.
Actually I find the approach of using the paper and asking the user to zoom to calibrate the "real displayed size" rather clever. If you make it easy to use, I'm sure they will appreciate this feature!
In theory, by CSS 2.1 specs, the mm unit (and similar units like cm and in) relate to physical units. So if you set an image width in mm units, browsers should scale the image to the given physical measure, with the accuracy allowed by the resolution of the device.
In reality, browsers behave more the way described in the CSS3 Values and Units CR. The section on physical units says that 1in equals 96px by definition, and on high-resolution devices like printers, the inch is the anchor unit, corresponding to real physical inch, whereas on lower-resolution devices like displays, the pixel is the anchor unit. It adds: “Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements.” (Besides, even in printers, the correspondence between CSS in and a physical inch is not necessarily exact.)
So, mission impossible.
For calibration by the user, I would not use an A4 paper. It’s large, and not everyone has A4 papers at hand, especially in countries with a different standard paper size. A ruler, with both inches and millimeters, would be better. And perhaps you could add a zooming widget to make the zooming easier.
Thanks to all! I combined all of tips and make picture :
http://www.clker.com/clipart-258249.html
user takes one of common thing and fit it to picture by zoom.