Pixelated Vector File: Wordpress

O

oreziaki

New Member
Hi, I've tried searching through the forums for this problem, didn't find anything but if there's a post, feel free to point me to it!
I was taught to design logos in Photoshop, but recently switched to Illustrator because of this problem. I was under the impression that vector images are typically of a higher resolution, great for web.
I have this logo designed for a Wordpress site at the recommended size, at 100% it looks okay. However when I enlarge the logo with CSS (even a little bit) it is heavily pixelated.

Also, I saved it on a transparent background and there's still a white outline around the text. I'm sure the two are related. Any advice?
Jay_Site-Logo.png
 
svg is the only vector format that is vaguely standardised for online use (still not fully supported).... your logo is likely in jpeg/png which is not a vector format and as such will have pixelation issues when you enlarge it.
 
Levi said:
svg is the only vector format that is vaguely standardised for online use (still not fully supported).... your logo is likely in jpeg/png which is not a vector format and as such will have pixelation issues when you enlarge it.
Click to expand...
Ah I see. So my question then becomes, on PS/Illustrator, why is SVG not an option when it comes to "Save for Web"? Seems dumb..I will try and upload the file as an SVG then...thanks!
 
This may come across as a bit rude or condescending (I apologise) but you need to forget SVG files! If you're struggling to upload an image to wordpress I'm pretty sure you're not going to have any knowledge of SVG browser support and how to write fallbacks into the themes code. You're having problems because you're trying to scale up a raster image. If you create your web image as a jpg, at the correct size, and at 72ppi (pixels per inch) you wont have pixelation issues when viewing online.
 
bigdave said:
This may come across as a bit rude or condescending (I apologise) but you need to forget SVG files! If you're struggling to upload an image to wordpress I'm pretty sure you're not going to have any knowledge of SVG browser support and how to write fallbacks into the themes code. You're having problems because you're trying to scale up a raster image. If you create your web image as a jpg, at the correct size, and at 72ppi (pixels per inch) you wont have pixelation issues when viewing online.
Click to expand...
No worries, your assumption is correct...more stuff for me to read up on i guess. However, I saved the image as 72ppi initially, had the problem, changed it to 300 ppi, same issue. That's what led me to vector images. The issue is the site is responsive, so when the logo resizes for mobile, all the aforementioned issues appear.
 
Why are you enlarging the logo using CSS? Surely you would be scaling it down if anything for mobile?

Are you exporting as a GIF by any chance? That would explain the white outlines and lack of quality and I think GIF is the default format when you choose "Export As...". If you need transparency I'd do a transparent PNG at 144ppi, so you have a retina image (twice as big as 72ppi).

There is a plugin that allows you to upload SVGs to Wordpress but that's not really how you should use SVGs, they're intended to be added in to the markup as code so you can manipulate the colours and paths using CSS.
 
Paul Murray said:
... I'd do a transparent PNG at 144ppi, so you have a retina image (twice as big as 72ppi)..
Click to expand...

I tried to avoid this for fear of confusing oreziaki but it's a very valid point. It's amazing how often people see fuzzy images and think you're lying when you say its their retina screen causing the issue.


@oreziaki
I imagine that the mobile fuzzy issue is because the logo on desktop is possibly only 200-300px wide but the responsive media query of your theme takes it to full width which could potentially be over 450px. The best solution in this scenario is to make the logo at it's largest conceivable size as defined by the media queries in your css file. So if you have a media query for max screen width of 480px that resizes the logo's width to 100%, you should make the logo 480px wide and then scale it back down for desktop.

The query might look something like the following:

.logo img{
max-width:300px;​
}

@media only screen and (max-width:480px) {
.logo img{
max-width: initial;
width: 100%;​
}​
}
 
Mr Geek said:
I've found it better to add 2 logos in the past then have the mobile view call the mobile logo when needed ;)
Click to expand...

That would be a good alternative assuming the theme loads the logo outside the dom (for example as a background image called in the css).
 
Clare said:
What's a retina image?
Click to expand...
An image that's optimised for retina resolution screens and devices.

Essentially the image is twice the PPI (144PPI, images for screen are normally 72PPI) so that it display clearly on retina devices. A non-retina image will look fuzzy and pixelated on retina devices because it's basically blown up to twice as big.
 
also consider looking into <picture> tag

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>

have a look at w3 schools Responsive Web Design - Images

this is for use with mobile and retina displays

screens are getting more pixel dense and as such we need to ensure that we create our images and code accordingly

using different images set for the size required will optimise load time.
 
You must log in or register to reply here.
Back
Top