I am using png photos, and my Opencart version is 3.0.3.6.
What should I do? Anyone has any clues?
OpenCart set optimized resolution for your logo picture. It might be the case that you added a large image file, so why not trying to resize the image first.
Your file format can also affect image quality, varies by browsers. So if it's the PNG that cause the problem, try reformatting your image to JPEG.
LitExtension - Shopping Cart Migration Expert
Visit us at: https://litextension.com
Possible solutions can include: A) generate your logo for the web at 2x the size you intend to use it, and use code to instruct it's display size on screen; B) generate two size variants of your logo, and use code to pick which one to display depending on the device it's being viewed on; C) in specific cases (often depending on the complexity of the logo), you can use a resolution independent image format such as SVG (Scalable Vector Graphics), which is rendered on the client device at the native screen resolution, so always looks crisp. Option C should be explored cautiously though, as there are other complexities and limitations with this approach, but it CAN look superb in the right context.
Normally, images on these high resolution screens would look very small as these screens have a much higher pixel density (ppi).
But, apparently, they fixed that, kind off:
So either send high resolution images to all devices (more bytes), use srcset which is a pain or try to determine the device resolution host-side which is even a bigger pain.The makers of these new monitors don’t want you to view tiny websites all the time, so they scale up the size of those objects to match the approximate 1″ length of a traditional screen, essentially “stretching” the image to fit the larger space. (You can change this view in your monitor settings, but many people don’t.) And the result of the monitor stretching the image to fit the larger size, means that the photo gets blurry because you’ve essentially zoomed in farther than the image expected you to.
https://www.sitelock.com/blog/how-to-en ... %20screens.
https://premium.wpmudev.org/blog/make-i ... ina-ready/
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Hello,Dunninghams wrote: ↑Wed Aug 26, 2020 8:19 amA Graphic Designer here: You may also find that you are looking at your logo image on devices with very different screen resolutions. It's quite common for many external monitors to still be "standard" resolution of anywhere from 72 to 96 pixels per inch, whereas increasingly, many mobile devices are using significantly higher resolution displays, often 150 to 300+ pixels per inch. As a result, an image that looks fine on a Standard resolution display, looks blurry and pixellated on a high resolution mobile device screen, because it is being displayed at greater than it's 1:1 pixel dimensions.
Possible solutions can include: A) generate your logo for the web at 2x the size you intend to use it, and use code to instruct it's display size on screen; B) generate two size variants of your logo, and use code to pick which one to display depending on the device it's being viewed on; C) in specific cases (often depending on the complexity of the logo), you can use a resolution independent image format such as SVG (Scalable Vector Graphics), which is rendered on the client device at the native screen resolution, so always looks crisp. Option C should be explored cautiously though, as there are other complexities and limitations with this approach, but it CAN look superb in the right context.
Thank you for your reply, much appreciated!
Do you know how I can edit the codes and define the resolution of the logo for each screen sizes? Which files should I edit within opencart and what are the codes?
Thanks again!
Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1">
See more on this here: https://developer.mozilla.org/en-US/doc ... t_meta_tag
Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig
letxobnav wrote: ↑Wed Aug 26, 2020 3:11 pmIn the olden days, the different browsers (html/js/css) were a pain for web developers, today it is the different devices.
Normally, images on these high resolution screens would look very small as these screens have a much higher pixel density (ppi).
But, apparently, they fixed that, kind off:So either send high resolution images to all devices (more bytes), use srcset which is a pain or try to determine the device resolution host-side which is even a bigger pain.The makers of these new monitors don’t want you to view tiny websites all the time, so they scale up the size of those objects to match the approximate 1″ length of a traditional screen, essentially “stretching” the image to fit the larger space. (You can change this view in your monitor settings, but many people don’t.) And the result of the monitor stretching the image to fit the larger size, means that the photo gets blurry because you’ve essentially zoomed in farther than the image expected you to.
https://www.sitelock.com/blog/how-to-en ... %20screens.
https://premium.wpmudev.org/blog/make-i ... ina-ready/
I don't mind using higher resolution pictures, but I don't know which css/php files to edit, or what codes to write. If you could provide some guidance on it that would be much appreciated.
For product images you set the target resolutions in admin which are then used to resize the original to.
Double the target resolutions as long as you make sure your originals have higher resolutions.
That will ofcourse increase the filesizes of the resulting resized cached images and it will result in more resizing on the browser part (responsive images) but so be it.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
it's better than anything else I tried before. I still create my Images with the
old XP Imager Composer, save 'em in regular PNG format, and then
compress them single, or in Bulk, on the Site linked below. It then sends me
a ZIP File, with all compressed pics, they just need to be slightly renamed again,
to further match their 'OC defined' Image Names again.
Images / Banners should not exeed 1280 pixel full-size width, it makes not much
sense, and only add's to loading time. Theme width should be size-limited to such
a Resolution anyway, to keep a somehow 'compact' style.
Good Luck!
Ernie
---
GiftofSpeed.com
https://www.giftofspeed.com/png-compressor/
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
letxobnav wrote: ↑Fri Aug 28, 2020 9:41 amwell, the logo is not resized by OC but taken straight from you admin settings definition and uses responsive so I would suggest to replace your logo with an image double the resolution.
For product images you set the target resolutions in admin which are then used to resize the original to.
Double the target resolutions as long as you make sure your originals have higher resolutions.
That will ofcourse increase the filesizes of the resulting resized cached images and it will result in more resizing on the browser part (responsive images) but so be it.
The problem I found is that if I keep the logo image resolution too high, it would display a much bigger sized image and would look too big on my website header on the web platform. Is there a way I could fix that resolution with css?
The simple answer will be NEVER try to resize the image with your CSS, this will badly impact your site load time.
https://softwareengineering.stackexchan ... a-bad-idea
Further more search on google to understand that why everyone is still asking you to make a new image
Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature
high resolution screens have a much higher pixel density, more pixels per square inch. So a 200x200px image may look good on a 5x5inch normal resolution screen but would display half the size on a screen with double the pixel density. to make it look the same size you would have to send a 400x400px image.the problem I found is that if I keep the logo image resolution too high, it would display a much bigger sized image and would look too big on my website header on the web platform. Is there a way I could fix that resolution with css?
So send 400x400px to all but make it responsive (which is default I believe) or use srcsets, make several copies with different resolutions and have the browser decide which image to use given the device's resolution.
and don't use png for product images as that is bad.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Urgent Questions shoot here: khnaz35@gmail.com
Enjoy nature
Double it up for the mobile and scale it down for the desktop if that makes you happy - but at least compress it. tinypng.com if you have nothing else. If you can use jpg you should, if it has a transparent background, you have no choice.
There are a number of ways depending on the issues you are experiencing when you say too big - but one would be to set a max-height to prevent it from getting too big.
Code: Select all
@media (min-width: 768px) {
#logo > a > img {
max-height: 200px;
}
}
Code: Select all
@media (min-width: 768px) and (max-width: 991px) {
#logo > a > img {
max-height: 200px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#logo > a > img {
max-height: 250px;
}
}
@media (min-width: 1200px) {
#logo > a > img {
max-height: 300px;
}
}
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Code: Select all
display: block;
max-width: 100%;
height: auto;
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
But yes - I am suggesting to override the height:auto
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
no, only images that have that class.that will change all images
An image will only look maximum sharp when it is displayed 100%.
If you resize and image up or down, by browser or css it blurs, always.
Even after resizing an image via php or photoshop, you need to sharpen it as the very resize algorithms blur.
For big product images we use:
Code: Select all
public function imagesharpen_precise() {
$height = imagesy($this->image);
$width = imagesx($this->image);
$rs = array();
$gs = array();
$bs = array();
for ($y = 0; $y < $height; ++$y) {
for ($x = 0; $x < $width; ++$x) {
$rgb = imagecolorat($this->image, $x, $y);
$rs[$y][$x] = $rgb >> 0x10;
$gs[$y][$x] = $rgb >> 0x08 & 0xFF;
$bs[$y][$x] = $rgb & 0xFF;
}
}
$height--;
$width--;
for ($y = 1; $y < $height; ++$y) {
$rd = $rs[$y][0];
$gd = $gs[$y][0];
$bd = $bs[$y][0];
$yd = $y - 1;
$yi = $y + 1;
for ($x = 1; $x < $width; ++$x) {
$r = -($rs[$yd][$x] + $rs[$yi][$x] + $rd + $rs[$y][$x + 1]) / 4;
$g = -($gs[$yd][$x] + $gs[$yi][$x] + $gd + $gs[$y][$x + 1]) / 4;
$b = -($bs[$yd][$x] + $bs[$yi][$x] + $bd + $bs[$y][$x + 1]) / 4;
$r += 2 * $rd = $rs[$y][$x];
$g += 2 * $gd = $gs[$y][$x];
$b += 2 * $bd = $bs[$y][$x];
if ($r < 0) $r = 0;
elseif ($r > 255) $r = 255;
if ($g < 0) $g = 0;
elseif ($g > 255) $g = 255;
if ($b < 0) $b = 0;
elseif ($b > 255) $b = 255;
imagesetpixel($this->image, $x, $y, $r << 0x10 | $g << 0x08 | $b);
}
}
unset($rs);
unset($gs);
unset($bs);
}
Code: Select all
$image->imagesharpen_precise();
Code: Select all
public function convolution() {
$sharpenMatrix = array([-1.2, -1, -1.2],[-1, 20, -1],[-1.2, -1, -1.2]);
$divisor = array_sum(array_map('array_sum', $sharpenMatrix));
$offset = 0;
imageconvolution($this->image, $sharpenMatrix, $divisor, $offset);
}
Code: Select all
$image->convolution();
We do not use any of that for logos, if your company logo needs to be super sharp then maybe rethink your logo unless it is an image of the sunset or the grand canyon.
ps. when experimenting with different image settings, disable your browser cache.
Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.
Users browsing this forum: No registered users and 264 guests