: Pixelated png images I'm in the process of building my first wordpress website. So far I have uploaded most of my logos etc as .svg files and everything seems to be working great. However
I'm in the process of building my first wordpress website. So far I have uploaded most of my logos etc as .svg files and everything seems to be working great. However at the moment I'm working on my contacts page, and there is an option to use a custom pin icon for a google map module in my theme. So I jump into illustrator and make a custom pin and try uploading it as an svg,but I couldn't get it to work. I then try to upload a .png file as I want to maintain transparency.
I created the artwork at 100px X 100px @72dpi thinking at the pin I'm looking to replace only looks to be 50px max. But it looks pixelated, so I re-upload it at 200px X 200px @ 96dpi and it still looks pixelated. Finally, I upload the artwork at 500px x 500px @ 150dpi and it looks pixelated as well. There appears to be no difference between the 100px@72 and the 500px@150 images.
As I said, the final icon on the screen looks to be no bigger than as 50px X 50px, so I shouldn't be stretching the image.
All I can think is that maybe the google maps module that my theme uses won't display anything high res?
Any advice or help?
More posts by @Berumen635
4 Comments
Sorted by latest first Latest Oldest Best
The @ 72 ppi, 150 ppi, 96 ppi is irrelevant on an electronic publication.
A downscaled raster image will look blurry, not pixelated. Your images are not pixelated.
If you are using a retina device, you probably need to upload the same asset marked as 2x or 3x on your stylesheet.
A raster image is better to uload it at real size, that is 50px so make a file that size, and sharpen any detail you need to. Do that to the 100px 2x and the 150 px 3x asset.
Google says
In the most basic case, an icon can simply indicate an image to use instead of the default Google Maps pushpin icon. To specify such an icon, set the marker's icon property to the URL of an image. The Google Maps JavaScript API will size the icon automatically.
I assume this is what Wordpress is using behind the scenes.
A question on Stack Overflow may help if you're looking at the underlying js (scaledSize), though you'll still need to do some experimenting. A nice example of the problem is also on Stack Overflow.
But here's a tutorial suggesting that .svgs should be possible (it might be as simple as specifying the scale). Once again this requires tweaking the js.
If you are trying to produce an image that is displayed at 50px X 50px, the best size to upload is 50px X 50px.
Whether the images is being scaled up or down, software needs to decide to add or remove pixels to display it. This will mean that the image displayed is not the same as the image you upload. When using art with distinct lines (like the pin you've created), this can create 'softer' edges than desired.
Your chosen vector design program should have something similar to a 'pixel preview' (Adobe Illustrator) that will replicate how your vectors will look when displayed at a particular pixel resolution. Things like aligning your lines to the pixel grid, and exporting at the exact size are a good way to ensure the clean lines you are hoping for, instead of the softer 'blurred' lines that you are seeing here.
Different browsers have different anti-aliasing but it looks more like the server resizes the image after upload.
You can probably check it manually or by some developer tool. Find and open the icon image and check its attributes.
You can also try to upload the image that is not necessary to resize (50px if you say so).
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.