I am implementing dynamic functions that display different images based on the viewport, I think WP has this functionality, here is my helper code , code that you can understand,
PHP Code:
function get_thumbnails($id, $title, $class = null)
{
$MediaModel = new UploadModel();
$media = $MediaModel->find($id);
if ($media !== null) {
$small_image = base_url('uploads/' . $media['upload_path'] . '/small/' . $media['file_name']);
$medium_image = base_url('uploads/' . $media['upload_path'] . '/medium/' . $media['file_name']);
$large_image = base_url('uploads/' . $media['upload_path'] . '/medium/' . $media['file_name']);
$titleAttribute = !empty($title) ? "alt=\"" . esc($title) . "\"" : "";
$class = $class ?? '';
return "<img
src=\"$small_image\"
$titleAttribute
title=\"" . esc($title) . "\"
class=\"$class rounded-top w-100\"
style=\"min-height: 250px; object-fit: cover\"
sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 25vw\"
srcset=\"$large_image 1200w, $medium_image 600w, $small_image 300w\">";
}
return null;
}
is this the correct way or is there any alternative approach with JavaScript that is better in terms of SEO and performance, after implementing this code I am not seeing any improvements in page speed.
here is my sample page URL ,
Visit Paros or .. ....
